主要优点是实现无刷新上传文件，本篇主要利用jquery的插件ajaxfileupload.js来实现异步上传功能。
一、异步上传单个文件
代码展示：
1.jsp页面(一定要引入jquery.js和ajaxfileupload.js)
1 <script type="text/javascript"> 2 function ajaxFileUpload(){ 3 $("#showImage").ajaxStart(function(){ 4 $(this).hide(); 5 }).ajaxComplete(function(){ 6 $(this).show(); 7 }); 8 $.ajaxFileUpload({ 9 url:'ajaxUploadFile_uploadFile.action', 10 secureuri:false, //是否采用安全协议，默认为false 11 fileElementId:'image', //需要上传的file文件框的id 12 dataType: 'json', 13 success: function (data){ 14 $("#showImage").attr("src","/FileUpLoadTest/file/"+data); 15 } 16 }); 17 return false; 18 } 19 </script> 20 </head> 21 <body> 22 <h2>异步上传单个文件</h2> 23 <input type="file" name="image" id="image"/><br> 24 <input type="button" value="上传" onclick="return ajaxFileUpload();"><br> 25 <img src="" id="showImage"> 26 </body>
二、异步上传多个文件
首先将ajaxfileupload.js中的createUploadForm方法修改为允许多文件上传：
function createUploadForm(formId,files,data) { //定义files为一个file数组 var form = $('<form action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>'); if (data) { for (var i in data) { $('<input type="hidden" name="' + i + '" value="' + data[i] + '" />').appendTo(form); } } for(var i=0;i<files.length;i++){ var ele = files[i]; var oldElement = (typeof ele == "string") ? $('#' + ele) : ele; var fileId = 'jUploadFile-' + createId(); var newElement = $(oldElement).clone(); $(oldElement).attr('id', fileId); $(oldElement).before(newElement); $(oldElement).appendTo(form); } //set attributes $(form).css('position', 'absolute'); $(form).css('top', '-1200px'); $(form).css('left', '-1200px'); $(form).appendTo('body'); return form; };
jsp页面中
var fileNum = 0;
$(document).ready(function(){
$("#addFile").click(function(){
fileNum++;
var addFile = "<input type='file' name='images' id='image" + fileNum + "'/><br><br>";
$("#files").append(addFile);
});
$("#upload").click(function(){
$("#upload").addClass("disabled");
$("#upload").attr("disabled" ,true);
$("#upload").attr("title" ,"文件上传中...");
uploadFile();
});
});
//文件上传
function uploadFile(){
var images = new Array();
for(var i = 0; i<fileNum + 1; i++){
images.push($("#image"+ i));
}
$.ajaxFileUpload({
url:'ajaxManyUpload_uploadManyFile',
secureuri:false, //是否采用安全协议，默认为false
files:images,
dataType: 'json',
success: function (data){
},
error: function (data, status, e){
alert(e);
}
});
}
<body>
<input type="button" id="addFile" value="添加上传文件" class="btn btn-success"/><br/><br/>
<div id="files">
<input type="file" name="images" id="image0"/> <br/><br/>
</div>
<input type="button" id="upload" value="上传" class="btn btn-info" title=""/><br/><br/><br/>
</body>
注：文件上传后台struts代码在struts2分类中文件上传查找。