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="[e-mail]">
</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(){}
});
```