ajaxFileUpload带参数提交

来源：互联网发布：微表情识别软件编辑：程序博客网时间：2024/05/16 01:27

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

0 0