用jquery.fileupload實現多圖上傳單圖上傳

這個插件用起來還是比較簡單的，做后台的圖片上傳完全沒有問題，在用戶端的話 需要注意一下上傳的流量會不會太大，需要做一些控制。

1、需要的文件

jquery.fileupload.js

jquery.iframe-transport.js

jquery.ui.widget.js

2、 單圖上傳

<input id="btn_upload_image" type="file" name="material_image">

var url_upload_image = "后台接口地址"；

//圖片上傳
$("#btn_upload_image").fileupload({
    dataType: 'json',
    url: url_upload_image,
    formData: {param:1},
    add: function (e, data) {//上傳之前的處理
        data.submit();
    },
    done: function (e, data) { //對接口返回信息的處理
        var result = data.result;
        if (typeof result.error === 'undefined') {
           //成功
        } else {
            //失敗
        }
    }
});

2 、多圖上傳

多圖上傳只是一次性選擇多張圖片，上傳的過程中也是一張一張的向后台接口傳輸

<form method="post" action="" id="mutil_upload" enctype="multipart/form-data">
      <input type="file" name="material_image" multiple="multiple"/>
</form>

$('#mutil_upload').fileupload({
            dataType: 'json',
            url: url_upload_image,
            formData: {material_id: <?= $item_edit_flag?$item_data['goods_commonid']:$_REQUEST['goods_commonid']?>},
            add: function (e,data) {//上傳之前的處理
                data.submit();
            },
            done: function (e,data) {
                var param = data.result;
                if(param && param.state == 'true'){
                    //成功
                } else {
                    //失敗
                }
            }
        });

null

附件列表