ajaxFileUpload带参数提交

使用ajaxFileUpload上传文件时,有时需要带参数提交,网上有很多资料说使用data,但其实要使用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);

// JavaScript Document
jQuery.extend({

    createUploadIframe: function(id,uri)
 {
   //create frame
            var frameId = 'jUploadFrame' + id;
            
            if(window.ActiveXObject) {
                var io = document.createElement('<iframe id="' + frameId + '" name="' + frameId + '" />');
                if(typeof uri== 'boolean'){
                    io.src = 'javascript:false';
                }
                else if(typeof uri== 'string'){
                    io.src = uri;
                }
            }
            else {
                var io = document.createElement('iframe');
                io.id = frameId;
                io.name = frameId;
            }
            io.style.position = 'absolute';
            io.style.top = '-1000px';
            io.style.left = '-1000px';

            document.body.appendChild(io);

            return io;   
    },<strong><span style="color:#FF0000;"> createUploadForm: function(id,data)</span></strong>
 {
  //create form 
  var formId = 'jUploadForm' + id;
  var fileId = 'jUploadFile' + id;
  var form = jQuery('<form  action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>'); 
  var oldElement = jQuery('#' + fileElementId);
  var newElement = jQuery(oldElement).clone();

  
  jQuery(oldElement).attr('id',fileId);
  jQuery(oldElement).before(newElement);
  jQuery(oldElement).appendTo(form);
  
<strong><span style="color:#FF0000;">if (data) { 
	    for (var i in data) { 
	        $('<input type="hidden" name="' + i + '" value="' + data[i] + '" />').appendTo(form); 
	    } 
	}</span></strong>
  
  //set attributes
  jQuery(form).css('position','absolute');
  jQuery(form).css('top','-1200px');
  jQuery(form).css('left','-1200px');
  jQuery(form).appendTo('body');  
 
  
  return form;
    },ajaxFileUpload: function(s) {
        // TODO introduce global settings,allowing the client to modify them for all requests,not only timeout  
        s = jQuery.extend({},jQuery.ajaxSettings,s);
        var id = s.fileElementId;        
<span style="color:#FF0000;"><strong>var form = jQuery.createUploadForm(id,s.data);</strong></span>
  var io = jQuery.createUploadIframe(id,s.secureuri);
  var frameId = 'jUploadFrame' + id;
  var formId = 'jUploadForm' + id;  
        
        if( s.global && ! jQuery.active++ )
  {
  
});

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:

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必须要大写

执行成功后返回的json 前带有<per> 需要使用

【data = jQuery.parseJSON(jQuery(data).text());】

参考:http://talentvictor.iteye.com/blog/1317790 http://blog.csdn.net/ye1992/article/details/21178579

ajaxFileUpload带参数提交

相关文章