用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

附件列表