标签： WebUploader

百度开源上传组件WebUploader的formData动态传值技巧

基于Web页面的文件上传一直是互联网应用开发中避免不了的，从asp时代的AspUpload组件、到asp无组件上传，到.Net时代的FileUpload，再到HTML5时代的各种基于jQuery的上传插件：Uploadify，WebUploader。我一路过来都使用过，不过因为DTcms的缘故，开始大面积切换到WebUploader（百度出品极少的好东西之一）。实际应用系统中，不管内部的还是基于互联网项目，通常我们都会遇到如下需求：

1、头像上传

2、产品主图上传

3、产品相册、作品相册、个人相册

4、附件上传（如：简历、申请表）

5、多附件上传

6、视频上传

而我有个需求：上传产品主图前，判断是否填写了商品编码，主要是想通过商品编码作为存储在服务器的新文件名（一部分）

遇到的问题如下：

WebUploader进行初始化的时候，可以通过posturl传递参数，也可以通过formData传递参数，但初始化的时候，这两个地方传参数都是当时的参数值。

而我需要在文件上传前的那一刻，读取用户输入的新值。经过百度相关问题，最终还是通过官方的技术文档，找到beforeFileQueued和uploadBeforeSend，参考DTcms中的uploader.js文件，进行了功能扩充。

beforeFileQueued事件允许做一些客户端的判断

//当文件被加入队列之前触发
uploader.on('beforeFileQueued', function (file) {
    //如果是单文件上传，把旧的文件地址传过去
    if (!p.multiple) {
        if (p.sendurl.indexOf("action=itemcode") > 0) {
            if ($("#txtItemCode").val() == '') {
                layer.msg('请先填写商品编码再上传图片！');
                //layer.alert('请先填写商品编码再上传图片！');
                return false;
            }
        }
    }
});

uploadBeforeSend事件可以允许在上传前修改formData的数据

//当某个文件的分块在发送前触发，主要用来询问是否要添加附带参数，大文件在开起分片上传的前提下此事件可能会触发多次。
uploader.on('uploadBeforeSend', function (obj, data, headers) {
    data.DelFilePath = parentObj.siblings(".upload-path").val();
    data.ItemCode = $("#txtItemCode").val();
});

另外，针对上传图片的预览图，增加了上传后的缩略图回传展示

parentObj.siblings(".upload-thumb").attr('src', data.thumb);

最终的前端效果图如下：

下一步有计划将上述的常用功能都用WebUploader做出前端(js+css+UI+bootstrap)和后端(ashx或webapi)，感兴趣的朋友加我QQ或微信交流。

Loading