用jquery.fileupload實現多圖上傳單圖上傳
阿新 • • 發佈：2018-12-07
這個外掛用起來還是比較簡單的，做後臺的圖片上傳完全沒有問題，在使用者端的話 需要注意一下上傳的流量會不會太大，需要做一些控制。
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 {
//失敗
}
}
});