崔文远 Troy Cui 老崔先生的上海生活、技术博客

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

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

1、头像上传

2、产品主图上传

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

4、附件上传(如:简历、申请表)

5、多附件上传

6、视频上传

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

遇到的问题如下:

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

而我需要在文件上传前的那一刻,读取用户输入的新值。经过百度相关问题,最终还是通过官方的技术文档,找到beforeFileQueueduploadBeforeSend,参考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或微信交流。

Tags: WebUploader

发布: cuiwenyuan 分类: Web技术 评论: 2 浏览: 4214
留言列表
来宾
来宾 赞你一个,爱死你了
来宾
来宾 感谢提供这个修改的方法
来宾
来宾 可以的
发表留言
◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。