SpringMVC+AJAX+MultipartFile 异步上传图片在很多博客上基本上都有写,但是基本都是东缺一块西缺一块的,调这东西调了很久,总算成功解决了。。。(网上看到有用ajaxfileupload.js这个插件,跟着写了下但是没成功,找了很久也没找到原因就放弃了。这里用的是jquery.form.js插件的ajaxSubmit()方法,网上有很多,可以去下载)
下载地址:http://malsup.github.com/jquery.form.js
前端js:
//jquery.form.js提交
function testaddedit(){
console.log("*****");
$("#upload_form").ajaxSubmit({
type: "POST",
url: path + "/system/editimg.php",
dataType: "json",
success: function(data){
var json = $.parseJSON(data);//把字符串转化为json对象
filepath = json.imgpath;//filepath方法外有定义
console.log(filepath);
},
error: function(){
alert("请链接网络");
}
});
}
表单:
<form id="upload_form" name="upload_form" >
<table class="table-border1" style="width: 100%;">
<tr>
<td class="th" style="width: 100px; line-height: 30px;">图片一:</td>
<td class="td">
<input id="file_upload2" name="file_upload2" class="easyui-filebox" style="width:300px" data-options="buttonText:'浏览',onChange:change_photo,prompt:'请选择一个文件...' " />
<input type="button" value="提交" οnclick="testaddedit();"/> <br/>
</td>
</tr>
</table>
</form>
后台接受处理:
// 该方法可以接受post和get两种提交方式
@RequestMapping(value="/editimg.php",method={RequestMethod.GET,RequestMethod.POST})
public @ResponseBody String editimg(@RequestParam(value="file_upload2", required=false) MultipartFile file,HttpServletRequest request,Model model) throws FileNotFoundException, IOException{
//E:\apache-tomcat-8.5.23\webapps\hsds_shuadan\
String brProjectPath = request.getSession ().getServletContext ().getRealPath ("/");
System.out.println(brProjectPath+"(((((");
IData data = new DataMap();
if( file != null && !file.isEmpty() ){
System.out.println(777);
savePicture(file, request,data);//保存图片
}else{
System.out.println("file不存在!");
}
// model.addAttribute("data",data);
JSONObject jsonData = new JSONObject();
jsonData.put("imgpath", data.getString("imagePath"));
//dictService.initDict(request.getServletContext());
return jsonData.toJSONString();
}
将上传图片保存到服务器:
//文件保存到服务器上
protected void savePicture(MultipartFile file, HttpServletRequest request,IData data)
throws IOException, FileNotFoundException {
String ImagePath = request.getSession().getServletContext().getRealPath("/imgupload");
System.out.println(ImagePath);
String fileName = file.getOriginalFilename();
String task_id = request.getParameter("task_id");
String imgpath = "/imgupload/"+fileName;
data.put("fileName", fileName);
// data.put("imagePath", ImagePath+"\\"+fileName);
data.put("imagePath", imgpath);
System.out.println(imgpath);
data.put("task_id", task_id);
File targetfile = new File(ImagePath, fileName);
Date date = new Date(System.currentTimeMillis());
if(targetfile.exists()){
String[] s = file.getOriginalFilename().split("\\.");
s[0] += date.getTime();
targetfile = new File(ImagePath, s[0] + "." + s[1]);
}
InputStream ins = file.getInputStream();
FileOutputStream fos = new FileOutputStream(targetfile);
byte b[] = new byte[1024];
int temp = 0;
while((temp = ins.read(b)) != -1){
fos.write(b, 0, temp);
}
fos.close();
ins.close();
}
以上就是将表单文件异步提交存到服务器的完整流程,因为耗时有点多所以就记录下来加深下记忆,同时也希望可以帮到遇到同样问题的大家!