webuploader使用

最新推荐文章于 2024-08-08 08:30:51 发布

hejisan

最新推荐文章于 2024-08-08 08:30:51 发布

阅读量298

点赞数

分类专栏： webuploader 文章标签： webuploader

本文链接：https://blog.youkuaiyun.com/hejisan/article/details/79899810

版权

webuploader 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何在一个页面上初始化多个 WebUploader 实例，并详细解释了配置参数的使用方法及注意事项，包括 formData 的正确设置避免冲突等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、同一个页面多个上传实例初使化

  <div class="uploader" id="id1" >
       <div class="btns">
           <div class="picker" style="">选择文件</div>
       </div>
  </div>

  <div class="uploader" id="id2" >
       <div class="btns">
           <div class="picker" style="">选择文件</div>
       </div>
  </div>

  <div class="uploader" id="id2" >
       <div class="btns">
           <div class="picker" style="">选择文件</div>
       </div>
  </div>

        var uploaderArr;
        $(function () {
            uploaderArr = new Array();
            $('.uploader').each(function (index) {
                var filePickerObj = $(this).find('.picker');
                var subCate = filePickerObj.attr('id');
                //console.log('type=' + type);
                uploaderArr[index] = WebUploader.create({
                    auto: true,
                    method: 'post',
                    server: "/EAFMS/AjaxHandler/UploadFile.ashx",
                    pick: {
                        id: filePickerObj,
                        multiple: false
                    },
                    swf: '/UILib/WebUploader/Uploader.swf',
                    formData: {
                        UserID:'<%=UserID%>'
                    },
                    resize: false
                });

                uploaderArr[index].on('uploadSuccess', function (file, response) {
                    alert(response);
                    //alert(response.message);file为该文件对象，response为后台服务器传过来的数据
                });

                uploaderArr[index].on('uploadError', function (file, response) {
                    alert('上传出错');
                });

                uploaderArr[index].on('uploadComplete', function (file, response) {
                    alert("uploadComplete")
                });
            })
        })

一些处理界面的代码我就不列举了

二、注意事项

1、formData的key名可以用单双引号括起来或者不都没关系，后台同样可以取得到；

2、另外一样定义自己附加数据的方式：

uploader.options ={formData:"userName":"吉安娜","gender":"女"}

3、formData中有一些key是被占用了的，比下：

name、id、type、lastModifiedDate、size、file

如果你使用这些json key将不会取到你预期的数据，而是这个控件自己的数据，这是个坑。