ajaxFileUpload带参数提交

1.JQuery ajaxfileupload插件使用准备

下载地址：

http://www.phpletter.com/DOWNLOAD/

 

2.原理分析

ajaxfileupload也是利用iframe实现无刷新异步提交，ajaxfileupload是通过监听iframe的onload方法来实现， 当从服务端处理完成后，就触发iframe的onload事件调用其绑定的方法，在绑定的方法中获取iframe中服务器返回的数据体（支持的普通文本,json,xml,script, html）

4.总结

ajaxfileupload插件简化了文件上传的过程，页面上无需定义from表单，提交时自动完成临时form表单创建target为临时创建的iframe， 并将file控件复制一份到表单内进行提交，完成提交后自动销毁临时生成的form表单和iframe。

缺点：不支持多个file控件，不过这种解决方案也不适合进行多文件的提交，所以无伤大雅。

使用ajaxFileUpload上传文件时,有时需要带参数提交,网上有很多资料说使用data,但其实要使用data带参数是需要修改的,否则后台是获取不到的.

分析原因：

ajaxFileUpload为了实现无刷新异步提交文件,构建 iframe 然后创建form表单 再将要上传的文件写上去再提交.但是原代码 却没有处理data.所以这块内容需要我们自己加上去.

下面红色部分为修改ajaxFileUpload.js的三处地方:

备注:好像csdn代码中加颜色加粗  有问题这三处修改的地方我直接贴出来,位置看下面的代码,

ajaxFileUpload为了实现无刷新异步提交文件,构建 iframe 然后创建form表单 再将要上传的文件写上去再提交.但是原代码 却没有处理data.所以这块内容需要我们自己加上去.
下面红色部分为修改ajaxFileUpload.js的三处地方:
备注:好像csdn代码中加颜色加粗  有问题这三处修改的地方我直接贴出来,位置看下面的代码,
createUploadForm: function(id, fileElementId,data);

if (data) { 
        for (var i in data) { 
            $('<input type="hidden" name="' + i + '" value="' + data[i] + '" />').appendTo(form);
        } 
    }


var form = jQuery.createUploadForm(id, s.fileElementId,s.data);

如何使用它呢？

$.ajaxFileUpload({
                    url: 'http://localhost:8080/HNUST/crawler/ordinary2', 
                    type: 'post',
                    data : {
                        url : url,
                        keyword : keyword,
                        rule : rule,
                        data : data,
                        sign:sign
                    },
                    secureuri: false, //一般设置为false
                    fileElementId: 'file', // 上传文件的id、name属性名
                    dataType: 'JSON', //返回值类型，一般设置为json、application/json  这里要用大写  不然会取不到返回的数据
                    success: function(data, status){  
                        alert(data);
                    },
                    error: function(data, status, e){ 
                        alert(e);
                    }
                });

html：

<input type="file" id="file" name="file">

java：java后台  获取参数还是正常获取:

String url=request.getParameter("url");
String  keyword=request.getParameter("keyword");

获取文件并分行读取(非图片):

MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;  
     MultipartFile multipartFile = multipartRequest.getFile("file");  //这个file要与fileElementId一致
     
     try {
        InputStream inputStream=multipartFile.getInputStream();
        BufferedReader reader = new BufferedReader(new InputStreamReader(inputStream));
        String tempString = null;
       
        // 一次读入一行，直到读入null为文件结束
        while ((tempString = reader.readLine()) != null) {
        fileList.add(tempString);        
        }
    } catch (IOException e2) {
        // TODO Auto-generated catch block
        e2.printStackTrace();
    }

使用过程中有两点需要注意的地方：

其一，dataType必须要大写；

其二：在data的值要写成json的格式，否则后台无法接受参数

参考网站：http://blog.csdn.net/u013243986/article/details/51497057