Webuploader 多实例传参教程

Webuploader 多实例传参教程

Webuploader 是百度开发的一款用于图片和文件上传的前端控件，在所有的前端上传控件中算是比较好的，而且文档维护的也比较全面，基础的东西大家移步官网就可以。我们主要介绍两点：1.在一个页面实例化多个webuploader 对象，用于传多个图片 2.怎样传参数，并且在后台怎么获取(我以前查了好多博客，这块都没说明白)

一个页面多实例

如果想在一个页面上实例化多个webuploader对象，首先需要建立一个webuploader的数组，然后通过这个数组的下标依次实例化即可。看代码：

uploader = new Array();     //定义一个uploader数组
//可行性判断
if (!WebUploader.Uploader.support()) {
    alert('Web Uploader 不支持您的浏览器！如果你使用的是IE浏览器，请尝试升级 flash 播放器');
    throw new Error('WebUploader does not support the browser you are using.');
}
//每个uploader 的实例都给class 属性upload_container， 这样通过类选择器的each函数我们
//就可以遍历每个uploader 并且实例化了
$('.upload_container').each(function(index) {
            var list = $(this).find('#uploader-demo');
            var filePicker = $(this).find('#filePicker');//上传按钮实例
            //此处为webuploader的实例化过程，加了额下标index
            uploader[index] = WebUploader.create({
                auto : true,
                fileNumLimit : 1,
                fileSizeLimit : 2 * 1024 * 1024,
                fileSingleSizeLimit : 2 * 1024 * 1024,
                method : 'POST',
                thread : 100,
                disableGlobalDnd : true,
                swf : 'FuWuHao1/js/Uploader.swf',
                server : '/FuWuHao1/auth/savePic.do',
                accept : {
                    title : 'Images',
                    extensions : 'gif,jpg,jpeg,bmp,png',
                    mimeTypes : 'image/*'
                },
                pick : {
                    id : filePicker
                },
                formData :{
                    mydata : '2'
                }
            });
//同理，我们其他的函数也要加上index下标
//生成缩略图
uploader[index].on('fileQueued',function(file) {
                var $li = $('
'" class="file-item thumbnail">'
                        + ''
                        + '
'
                        + '
' + '
'), 
                        $img = $li.find('img');
                list.append($li);
                // 创建缩略图
                // 如果为非图片文件，可以不用调用此方法。
                // thumbnailWidth x thumbnailHeight 为 100 x 100
                uploader[index].makeThumb(file,function(error,src) {
                        if (error) {
                            $img.replaceWith('不能预览');
                            return;
                        }
                        $img.attr('src',src);
                        filePicker.hide();
                    }, 50, 60);
                });
//图片上传检查的
uploader[index].on('error', function(type) {
                    if (type == "F_DUPLICATE") {
                        $.toast("系统提示,请不要重复选择文件！");
                    } else if (type == "Q_TYPE_DENIED") {
                        $.toast("请上传gif,jpg,jpeg,bmp,png格式的图片");
                    } else if (type == "Q_EXCEED_SIZE_LIMIT") {
                        $.toast("单个文件大小不能超过2M");
                    } else if (type == "Q_EXCEED_NUM_LIMIT") {
                        $.toast("不能超过1个文件");
                    }
});

传参数

到此处大家可能会有疑问，我们在后台怎么去份是哪个实例对象传上来的，其实这个很简单，每个实例我们都传一个标识的参数就可以。有三种方法：

• 1.初始化的时候直接添加参数
  我们可以直接把index传过去，其他参数你们自己定义

formData :{
    uid: index
}

• 2.绑定uploadBeforeSend事件来给每个独立的文件添加参数

uploader.on( 'uploadBeforeSend', function( block, data ) {  
    ...  
    data.uid= 1;    // 将存在file对象中的md5数据携带发送过去。  
    ...  
},2); 

• 3.初始化后添加参数（只要在uploader.upload()方法前就行）

uploader[index].options.formData.uid = index;

• 4.java 后端获取
  我们在java 后台想获取这个uid 参数，通过

String uid = request.getParameter("uid");

这种方法是不行的，如果你用的spring, 直接在函数参数里面加上String uid也是获取不到的，要通过formData 来获取

try {
            DiskFileItemFactory factory = new DiskFileItemFactory();
            ServletFileUpload upload = new ServletFileUpload(factory);
            upload.setHeaderEncoding("UTF-8");
            if (!ServletFileUpload.isMultipartContent(request)) {
                result.setStatus(1);
                return result;
            }
            List list = upload.parseRequest(request);
            for (FileItem item : list) {
            //获取参数的地方
                if (item.isFormField()) {
                    String name = item.getFieldName();  //参数域的名字
                    String value = item.getString("UTF-8");  //参数域的值
                    // value = new String(value.getBytes("iso8859-1"),"UTF-8");
                    System.out.println(name + "=" + value);
                    if(name.equals("uid")){
                        switch(value){
                           //如果是uid这个域，我们来判断他的值，来代表不同的实例
                        }
                    }

                        File file = new File(savePath);
                        System.out.println(savePath);
                        if (!file.exists() && !file.isDirectory()) {
                            file.mkdirs();
                        }
                    }
                } else {
                //得到图片流的地方
                    String filename = item.getName();
                    System.out.println(filename);
                    if (filename == null || filename.trim().equals("")) {
                        continue;
                    }
                    filename = filename
                            .substring(filename.lastIndexOf("\\") + 1);
                    InputStream in = item.getInputStream();
                    pathf = savePath + "\\"
                            +System.currentTimeMillis()+ filename;
                    FileOutputStream out = new FileOutputStream(pathf);
                    byte buffer[] = new byte[1024];
                    int len = 0;
                    while ((len = in.read(buffer)) > 0) {
                        out.write(buffer, 0, len);
                    }
                    in.close();
                    out.close();
                    item.delete();
                }
            }
        } catch (Exception e) {
            e.printStackTrace();
        }

• 5.如果想要图片上传到服务器文件夹，返回路径到前端，最后存路径到数据库的源码的，留言联系我啊

今天就说到这里，后续会陆续更新java的一些东西，希望对你们有所帮助。