Js 之移动端图片上传插件mbUploadify

一、下载

https://pan.baidu.com/s/1NEL4tkHoK4ydqdMi_hgWcw

提取码：vx7e

二、Demo示例

<div class="weui_uploader_input_wrp">
                    <input class="weui_uploader_input js_file" id="j-file" name="file" type="file" accept="image/jpg,image/jpeg,image/png,image/gif" multiple >
                </div>
<script>
    new mbUploadify({
        file: document.getElementById('j-file'),
        size: 1024 * 1024 * 10,
        type: "image",
        /*ajax 上传地址*/
        url: '/api/a/upload.php?userid={$_userid}',
        /*ajax上传成功*/
        uploadSuccess: function(res){
            console.log(res);
            var json = JSON.parse(res);
            var html = `<li class="weui_uploader_file"
                        style="background-image:url(`+json.url+`)">
                        <span class="delete-img-btn aui-iconfont aui-icon-close" onclick="deleteImg(this)"></span>
                    </li>`;
            $(".weui_uploader_files").append(html);

        },
        error: function(file, msg){
            console.log(file, msg)
        },
    })
</script>

三、插件文档

#mbUploadify.js
##html5移动端文件上传插件, 无依赖, 轻小

在线演示：[http://www.byex.cn/mbUploadify](http://www.byex.cn/mbUploadify/)

Written by: hishion

##使用一

####Step 1: 引入资源文件

```html
<input type="file" name="files"  id="j-file" multiple>

<!-- mbUploadify Javascript file -->
<script src="mbUploadify.min.js"></script>
```

####Step 2: 调用 mbUploadify 

```javascript
var upload = new mbUploadify({
        file: document.getElementById('j-file'),
        /*ajax 上传地址*/
        url: 'mbUploadify.php',
        /*ajax上传成功*/
        uploadSuccess: function(res){
            console.log(res);
        },
        ......
    })
```

##使用二

####Step 1: 引入资源文件

```html
<form action="mbUploadify.php" method="post">
    <label for="j-file2" class="mbUploadify" id="j-dropArea">
        拖拽文件上传
        <input type="file" name="files" id="j-file2"  multiple>

    </label>
    <!--   附带提交其它数据   -->
    <input type="hidden" name="email" value="506713930@qq.com">
</form>
<!-- mbUploadify Javascript file -->
<script src="mbUploadify.min.js"></script>
```

####Step 2: 调用 mbUploadify 

```javascript
var upload2 = new mbUploadify(document.querySelector('form'), {
        /*文件拖拽上传区域对象 null表示不支持拖拽上传*/
        dropElement: document.getElementById('j-dropArea'),
        ......
    });
```

##配置项

构造函数 mbUploadify 的参数个数可选, 其中第二个参数配置项列表如下. 当只有一个form对象作参数时，系统会从form对象里面查找file, url, uploadName配置项.
```
var upload = new mbUploadify(form, {
    //input file控件对象
    file: '',
    //上传类型
    type: 'image',
    //上传最多个数
    maximum: 5,
    //文件大小 2M
    size: 1024*1024*2,
    //html5中reader对象解析类型 可选 [string | text | url]
    rendAsType: 'url',
    //上传时后端 接收的 name
    uploadName: '',
    //上传地址
    url: '',
    //错误提示信息!
    message: {
        type: '类型不对!',
        size: '文件太大',
        maximum: '上传文件数量太多!',
        same: '不能上传相同的文件!',
        other: '其它网络错误!'
    },
    //是否多选
    isMultiple: true,
    //是否允许提交重复的文件
    isAllowSame: false,

    //文件拖拽上传区域对象 null表示不支持
    dropElement: null,
    //文件拖拽dragenter事件回调
    dragenter: function(){},
    //文件拖拽dragleave事件回调
    dragleave: function(){},
    //文件拖拽dragover事件回调
    dragover: function(){},
    //文件拖拽drop事件回调
    drop: function(){},

    //ajax上传成功 回调
    uploadSuccess: function(){},
    //ajax上传失败 回调
    uploadFailed: function(){},
    //ajax上传完成
    uploadComplete: function(){},

    //上传中止
    abort: function(){},
    //上传失败
    error: function(file, msg){},
    //上传开始
    loadstart: function(){},
    //上传进度
    progress: function(){},
    //上传成功
    load: function(){},
    //上传完成，不管成功失败
    loadend: function(){},
    //ajax上传成功
    uploadSuccess: function(){},
    //ajax上传失败
    uploadFailed: function(){},
    //ajax上传完成
    uploadComplete: function(){}
});
```