WebUploader 上传图片并提交表单(一)

WebUploader 是由百度开发的一个上传文件的框架，简单上传文件可以查看官网的两个demo。
由于自己需要上传用户信息，和用户照片，直接使用官网的demo，只能得到图片，于是花了一下午时间研究了一下WebUploader。
首先简单说明一下WebUploader如何传递文件给后台

  // 实例化
        uploader = WebUploader.create({
            pick: {
                id: '#filePicker-2',
                label: '点击选择图片'
            },
            formData: {
                uid: 123,
                username:0
            },
            dnd: '#dndArea',
            paste: '#uploader',
            swf: '<%=ctxPath%>/lib/webuploader/0.1.5/Uploader.swf',
            chunked: false,
            chunkSize: 512 * 512,
            server: '<%=ctxPath%>/Coach/updateImg.do',
            // runtimeOrder: 'flash',

            // accept: {
            //     title: 'Images',
            //     extensions: 'gif,jpg,jpeg,bmp,png',
            //     mimeTypes: 'image/*'
            // },

            // 禁掉全局的拖拽功能。这样不会出现图片拖进页面的时候，把图片打开。
            disableGlobalDnd: true,
            fileNumLimit: 300,
            fileSizeLimit: 200 * 1024 * 1024,    // 200 M
            fileSingleSizeLimit: 50 * 1024 * 1024    // 50 M
        });

如上所示,图片上传是通过server 的url。
formData 内的信息可以通过报文信息发现也一起传给了服务器。
对于如何返回服务器的响应，通过查看官方文档，我们可以找到如下函数，其中ret就是服务器的响应信息。

这里介绍两种上传图片及表单信息的方法
第一种方式
通过以上我们就能够自然而然的知道如何上传图片以及表单信息。
我们可以通过设置FormData内的值，来实现图片和信息一起传入服务器中。
这里需要注意一点，formdata内的值不能在WebUploader实例化式赋值，因为在此时赋值时，表单信息为空，所以得到的值一直为空

具体方式如下，首先在WebUploader实例化时申明变量，然后通过使用uploadBeforeSend函数，具体信息如下

其中data参数就是我们要的。我们通过对data.xxxx赋值来向服务器传参。

以下是部分代码：
1 首先在Wepuploader 初始化是设置传参变量

// 实例化
uploader = WebUploader.create({
pick: {
id: '#filePicker-2',
label: '点击选择图片'
},
formData: {
//设置传入服务器的参数变量
//注意不要在此赋值
uid: 123,
user:0
},
dnd: '#dndArea',
paste: '#uploader',
swf: '<%=ctxPath%>/lib/webuploader/0.1.5/Uploader.swf',
chunked: false,
chunkSize: 512 * 512,
server: '<%=ctxPath%>/Coach/updateImg.do',
// 禁掉全局的拖拽功能。这样不会出现图片拖进页面的时候，把图片打开。
disableGlobalDnd: true,
fileNumLimit: 300,
fileSizeLimit: 200 * 1024 * 1024, // 200 M
fileSingleSizeL * 1024 * 1024 // 50 M
});

我在formData中设置了两个变量 uid=123和 user=0.
${“username”}.val() 是获得表单username的值
使用uploadBeforSend函数为变量赋值

uploader.on( ‘uploadBeforeSend’, function( object, data,header ) {

        // 修改data可以控制发送哪些携带数据。
        data.user = $("#username").val();
        }

查看报文信息

我们可以看到在报文信息中 user值为tt，至此我们就成功的把表单信息和图片传给服务器

3 将图片及信息传给后台，这里我是用springmvc

@RequestMapping(“/updateImg.do”)
public @ResponseBody AjaxResult uploadImg(HttpServletRequest req,HttpServletResponse resp) {

    System.out.println(req.getParameter("user"));
    MultipartHttpServletRequest mul=(MultipartHttpServletRequest)req;
    Map<String,MultipartFile> files=mul.getFileMap();
    String fileName;
    File targetFile;
    String targetFileName=null;
    String uploadUrl=req.getSession().getServletContext().getRealPath("/")+"upload";
    File dir=new File(uploadUrl);
    System.out.println(dir);
    if(!dir.exists()) {
        dir.mkdirs();
    }

    for(MultipartFile file:files.values()) {
        fileName=file.getOriginalFilename();
        targetFile=new File(uploadUrl+"/"+fileName);
        targetFileName=uploadUrl+"\\"+fileName;
        if(!targetFile.exists()) {
            try {
                targetFile.createNewFile();
                file.transferTo(targetFile);
            } catch (IOException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }
        }

    }
    System.out.println("上传成功");
    AjaxResult ajax;
    if(targetFileName !=null) {
         ajax=new AjaxResult("1", targetFileName);
    }else {
        ajax=new AjaxResult("0","文件不存在");
    }

    return ajax;
    }

如上我们通过req.getparameter(“user”)方式来获得跟随图片一起传入的参数,这里我使用json作为返回参数，是为第二种方式做准备，大家可以把函数变成void
- 如 @RequestMapping(“/updateImg.do” )
public void update(HttpRequest req,HttpResponse resp)

我将通过下一篇来介绍第二种方式传值，思路其实很简单就是通过服务器返回图片信息，再通过form表单提交表单信息和图片信息