ajaxFileUpload带参数提交(亲测可用)

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

分析原因:

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

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

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

①createUploadForm: function(id, fileElementId,data);

②jQuery(form).appendTo('body')的前面修改:
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为了实现无刷新异步提交文件,构建 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 js

如何使用它呢?

$.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后台接收参数  获取参数不能按照request.getParameter的方式,上传文件后台有两种方式(据我所知,欢迎拍砖),一种是是通过Servlet的方式,利用ServletFileUpload获取,FileItem集合,通过便利获取FileItem得到参数,不推荐

FileItemFactory factory = new DiskFileItemFactory();
        ServletFileUpload servletFileUpload = new ServletFileUpload(factory);
    
List<FileItem> fileItems = servletFileUpload.parseRequest(request);

第二种方式,是通过spring mvc上传文件的方式,通过MultipartFile file,直接接收文件,需要配置

<bean id="multipartResolver"    
        class="org.springframework.web.multipart.commons.CommonsMultipartResolver">    
        <!-- 默认编码 -->  
        <property name="defaultEncoding" value="utf-8" />    
        <!-- 文件大小最大值 -->  
        <property name="maxUploadSize" value="10485760000" />    
        <!-- 内存中的最大值 -->  
        <property name="maxInMemorySize" value="40960" />    
    </bean>  

详细可以参考spring mvc 文件上传参数,通过该种方式可以通过request.getParameter获取参数

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

其一,dataType必须要大写;

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

最后感谢@8英里的提示,让我修正之前的错误,避免给其他人代码不变。

参考网站:

http://blog.csdn.net/u013243986/article/details/51497057

http://blog.csdn.net/cheung1021/article/details/7084673/

posted @ 2016-07-28 19:17  培杰  阅读(42145)  评论(8编辑  收藏  举报