用jquery.fileupload实现多图上传单图上传

这个插件用起来还是比较简单的，做后台的图片上传完全没有问题，在用户端的话 需要注意一下上传的流量会不会太大，需要做一些控制。

1、需要的文件

jquery.fileupload.js

jquery.iframe-transport.js

jquery.ui.widget.js

2、 单图上传

<input  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=""  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

附件列表