首先,我们要先用input 框的type=“file”的属性进行文件的上传,需要注意的是,multiple属性可以支持多上传
<input multiple type="file" id="files" name="files" onchange="upfileactual(this,'upload/uploadFiles.json')" />
然后
function ajaxFileUploadsActual(e, url,obj) {
var addImags =$(e).prop('files');
var fileSize=0;
for(var i=0;i<addImags.length;i++){
fileSize=$(addImags)[i].size;
if(fileSize > _file_msx){
boxAlert("文件超过默认大小(10MB)");
return;
}
}
var id = $(e).attr('id');
$.ajaxFileUpload({
url : url,
secureuri : false,
fileElementId : id,
dataType : 'json',
success : function(data) // 服务器成功响应处理函数
{
if(data.data.fail==3){//上传失败
boxAlert(data.data.fileName+" 文件名中包含\" , \"不能上传!");
return ;
}else if(data.data.fail==2){//上传失败
boxAlert("不能上传 "+ data.data.fileType +" 类型的文件");
return ;
}
//文件名
var listFileName = data.data.listFileName;
//文件路径
var listSeverPath = data.data.listServerPath;
//listSeverPath = listSeverPath[i].replace(/\\/g, "\\\\");
$(obj).val(listSeverPath);
boxAlert("上传成功!");
},
error : function() {
boxAlert("上传失败,文件可能为空文件");
}
});
return ;
}
然后我们再看后台
@RequestMapping("/uploadFiles.json")
@ResponseBody
public AjaxResponse uploadFiles(@RequestParam("files") MultipartFile[] files, HttpServletRequest request) {
AjaxResponse ajaxResponse = AjaxResponse.instance();
ajaxResponse.setSuccess(false);
boolean flag = true;
String name = "";
for (MultipartFile file : files) {
String fileName = file.getOriginalFilename().substring(0, file.getOriginalFilename().lastIndexOf("."));
if (fileName.contains(",")) {
flag = false;
name = fileName;
break;
}
}
if (flag == true) {
Map<String, Object> resultMap = Utility.getMultipartUpload("upload", logger, files, request);
if (resultMap.get("result") != null && resultMap.get("result").toString().equals("success")) {
ajaxResponse.setSuccess(true);
ajaxResponse.setData(resultMap);
}
} else {
Map<String, Object> map = new HashMap<>();
map.put("fileName", name);
map.put("fail", "true");
ajaxResponse.setData(map);
ajaxResponse.setSuccess(true);
}
return ajaxResponse;
}