WebUpload formdata 上传参数

https://www.cnblogs.com/wisdo/p/6159761.html

webUploader 是款很好用的优秀的开源上传组件，由百度公司开发，详细的介绍可参见webUploader 的官方文档：

最近在使用webUploader时，需要添加额外的参数，并在后台获取，参数的格式是json，刚开始一直设置不对，在参考了官网的api文档及相关热心网友的回答后，终于弄明白了webUploader 上传参数的设置。设置的方法一般是在uploader 对象创建后的 fileQueued  或 uploadBeforeSend 事件 中设置 ，也可以对webUploader 对象的属性 formData 进行直接 设置。

具体如下 ：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144

uploader = WebUploader.create({                     auto: false,                     // swf文件路径                     swf: '/Scripts/webUploader/Uploader.swf',                       // 文件接收服务端。                     server: '@Url.Action("Upload", "Home")',                       // 选择文件的按钮。可选。                     // 内部根据当前运行是创建，可能是input元素，也可能是flash.                     pick: '#myPicker',                      // formData: { "name": name, "desc": desc},                                      prepareNextFile:true,                     chunked: true,  // 分片上传大文件                     chunkRetry: 10, // 如果某个分片由于网络问题出错，允许自动重传多少次？                     thread: 100,// 最大上传并发数                     method: 'POST',                     fileSizeLimit: 1024,                       // 只允许选择图片文件。                     accept: {                         title: 'HTML5组态文件',                         extensions: 'gif,jpg,jpeg,bmp,png',                        mimeTypes: 'img/*'                     }                   });           5 6 7 8 9 10 11 12 13      //当文件被加入队列之前触发 uploader.on('beforeFileQueued', function (file) {     //如果是单文件上传，把旧的文件地址传过去     if (!p.multiple) {         if (p.sendurl.indexOf("action=itemcode") > 0) {             if ($("#txtItemCode").val() == '') {                 layer.msg('请先填写商品编码再上传图片！');                 //layer.alert('请先填写商品编码再上传图片！');                 return false;             }         data.formData= { "name": name, "desc": desc};         }     }     });                     uploader.on('fileQueued', function (file) {                     $("#listFile").append('<div id="' + file.id + '" class="item">' +                         '<h4 class="info">' + file.name + '</h4>' +                         '<p class="state">等待上传...</p>' +                     '</div>');                 });                   uploader.on('uploadProgress', function (file, percentage) {                     var li = $('#' + file.id),                         percent = li.find('.progress .progress-bar');                     // 避免重复创建                     if (!percent.length) {                         percent = $('<div class="progress progress-striped active">' +                           '<div class="progress-bar" role="progressbar" style="width: 0%">' +                           '</div>' +                         '</div>').appendTo(li).find('.progress-bar');                     }                     li.find('p.state').text('上传中');                     percent.css('width', percentage * 100 + '%');                 });                   uploader.on('uploadSuccess', function (file) {                     $('#' + file.id).find('p.state').text('已上传');                 });                   uploader.on('uploadError', function (file) {                     $('#' + file.id).find('p.state').text('上传出错');                 });                   uploader.on('uploadComplete', function (file) {                     $('#' + file.id).find('.progress').fadeOut();                     //$("#editModal").fadeOut(2000, window.location.reload());                     //destory();                     //$("#editModal").destory();                 });                     //当某个文件的分块在发送前触发，主要用来询问是否要添加附带参数，大文件在开起分片上传的前提下此事件可能会触发多次。                   uploader.on('uploadBeforeSend', function (obj, data, headers) {                    // data.DelFilePath = parentObj.siblings(".upload-path").val();                    //  data.ItemCode = $("#txtItemCode").val();              data.formData= { "name": name, "desc": desc};                 });                   uploader.on('all', function (type) {                     if (type === 'startUpload') {                         state = 'uploading';                     } else if (type === 'stopUpload') {                         state = 'paused';                     } else if (type === 'uploadFinished') {                         state = 'done';                     }                     if (state === 'uploading') {                         $('#btnBeginUpload').text('暂停上传');                     } else {                         $('#btnBeginUpload').text('开始上传');                     }                 });               } else {                 geap.alertPostMsgDefault("请选择一个文件!", "info");             }         });        // 点击上传事件     $('#btnSave').bind('click', function () {            var  name = $("#txtName").val();            var  id = $("#txtId").val();                if (!name || name.length == 0) {                  alert("请填写名称");                  return false;              }             var obj = new Object();             obj.name = name;             obj.id = id;             uploader.options.formData = obj;           //  uploader.options.formData = { "name": name, "id": id, };             if (state === 'uploading') {                 uploader.stop();             } else {                 uploader.upload();             }         });