关于ajaxfileupload.js插件的使用
众所周知,jsp中是无法使用ajax进行上传操作的,其实ajaxfileupload.js插件的使用也不过就是封装好的iframe,但是确实为我们的上传提供了很大的便利。
这里是ajaxfileupload插件的下载地址
ajaxfileupload.js的原生插件,只支持单上传,如果我们想要让他支持多上传,需要对插件的内部进行一个小小的改动。
代码块
原来未改动之前,例如:
var oldElement = jQuery('#' + fileElementId);
var newElement = jQuery(oldElement).clone();
jQuery(oldElement).attr('id', fileId);
jQuery(oldElement).before(newElement);
jQuery(oldElement).appendTo(form);
改动之后,也就是我们给他添加了一个循环,让他支持了多上传
for(var i in fileElementId){
var oldElement = jQuery('#' + fileElementId[i]);
var newElement = jQuery(oldElement).clone();
jQuery(oldElement).attr('id', fileId);
jQuery(oldElement).before(newElement);
jQuery(oldElement).appendTo(form);
}
下面我们讲解下ajaxfileupload的简单实用
function uploadMethod(){
$.ajaxFileUpload({
url : "<%=request.getContextPath()%>/user/uploadMethod.do",
secureuri : false,
//fileElementId:'uploadfile1',//原单上传使用方法
fileElementId :['uploadfile1','uploadfile2','uploadfile3','uploadfile4','uploadfile5'] //传入需要上传的多个file的id即可
dataType : 'json',
success : function(data) {
var data1=eval("("+data+")");
if (data1.result == 0) {
alert(data1.resultdata);
} else {
alert("上传失败!");
}
}
});
}
<input type='file' name='uploadfile' id='uploadId1'/>
<input type='file' name='uploadfile' id='uploadId2'/>
<input type='file' name='uploadfile' id='uploadId3'/>
<input type='file' name='uploadfile' id='uploadId4'/>
<input type='file' name='uploadfile' id='uploadId5'/>
后台的接收
@RequestMapping("/uploadMethod")
@ResponseBody
public String uploadFileMethod(@RequestParam(value="uploadfile",required=false,defaultValue="") MultipartFile[] uploadfile, HttpServletRequest request, Model model){
//使用MultipartFile数组来接受多个被上传的文件
String path = request.getSession().getServletContext().getRealPath("upload"); //我们先获取到upload文件夹的路径
for(MultipartFile m:uploadfile){
if(m!=null){
String fileName = m.getOriginalFilename();
File file=new File(path);
String[] fileNames=fileName.split("\\.");//获取上传文件后缀
String NfName=System.currentTimeMillis()+"."+fileNames[fileNames.length-1];//修改上传文件名称
System.out.println(path);
File targetFile = new File(path, fileName);
if(!targetFile.exists()){
targetFile.mkdirs();
}
//保存
try {
m.transferTo(targetFile); //拷贝上传的文件
System.out.println(request.getContextPath()+"/upload/"+fileName); //保存路径
model.addAttribute("filepath", request.getContextPath()+"/upload");
} catch (Exception e) {
e.printStackTrace();
}
}
}
return "{\"result\":0,\"resultdata\":\"上传成功\"}";//返回json格式的反馈信息
}