webUploader 是款很好用的优秀的开源上传组件,由百度公司开发,详细的介绍可参见webUploader 的官方文档:
最近在使用webUploader时,需要添加额外的参数,并在后台获取,参数的格式是json,刚开始一直设置不对,在参考了官网的api文档及相关热心网友的回答后,终于弄明白了webUploader 上传参数的设置。设置的方法一般是在uploader 对象创建后的 fileQueued 或 uploadBeforeSend 事件 中设置 ,也可以对webUploader 对象的属性 formData 进行直接 设置。
具体如下 :
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(); } });
本博客是自己在学习和工作途中的积累与总结,仅供自己参考,也欢迎大家转载,转载时请注明出处。