jQuery没有提供ajax的文件上传，我们可以通过ajaxfileupload实现ajax文件的上传。其实ajaxfileupload文件上传特别的简单。下面就演示一下在SpringMVC中实现ajax的文件上传。
1、后台接收代码
首先在spring的配置文件中添加文件上传配置
<!-- 文件上传 --><bean id="multipartResolver" class="org.springframework.monsMultipartResolver"><property name="defaultEncoding" value="UTF-8"/> </bean>
再写文件接收的代码
package org.andy.controller;import java.io.File;import java.io.IOException;import java.util.Arrays;import java.util.Date;import java.util.HashMap;import javax.servlet.ServletContext;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import mons.fileupload.servlet.ServletFileUpload;import org.apache.log4j.Logger;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RequestMethod;import org.springframework.web.bind.annotation.RequestParam;import org.springframework.monsMultipartFile;@Controller@RequestMapping("/upload")public class UploadController {private static final Logger LOG = Logger.getLogger(UploadController.class);private static final HashMap<String, String> TypeMap = new HashMap<String, String>();static {TypeMap.put("image", "gif,jpg,jpeg,png,bmp");TypeMap.put("flash", "swf,flv");TypeMap.put("media", "swf,flv,mp3,wav,wma,wmv,mid,avi,mpg,asf,rm,rmvb");TypeMap.put("file", "doc,docx,xls,xlsx,ppt,pptx,htm,html,txt,dwg,pdf");}/*** 文件上传 之 图片上传* * @param file* @param request* @return message: -1 没有文件上传 0 上传成功 1 上传失败 2 文件超过上传大小 3 文件格式错误 4 上传文件路径非法 5 上传目录没有写权限* * */@RequestMapping(value = "/imageUpload", method = RequestMethod.POST)public void imageUpload(@RequestParam("file") CommonsMultipartFile file,@RequestParam(required = false) String filePre, HttpServletRequest request, HttpServletResponse response) {LOG.info("file name is :" + file.getOriginalFilename());if (!file.isEmpty()) {ServletContext servletContext = request.getSession().getServletContext();String uploadPath = servletContext.getRealPath("/")+ "uploadImage/";// 文件上传大小long fileSize = 3 * 1024 * 1024;if (file.getSize() > fileSize) {backInfo(response, false, 2, "");return;}String OriginalFilename = file.getOriginalFilename();String fileSuffix = OriginalFilename.substring(OriginalFilename.lastIndexOf(".") + 1).toLowerCase();if (!Arrays.asList(TypeMap.get("image").split(",")).contains(fileSuffix)) {backInfo(response, false, 3, "");return;}if (!ServletFileUpload.isMultipartContent(request)) {backInfo(response, false, -1, "");return;}// 检查上传文件的目录File uploadDir = new File(uploadPath);if (!uploadDir.isDirectory()) {if (!uploadDir.mkdir()) {backInfo(response, false, 4, "");return;}}// 是否有上传的权限if (!uploadDir.canWrite()) {backInfo(response, false, 5, "");return;}//新文件名String newname = "";if(null != filePre){newname += filePre;//对应模块上传的文件名前缀}newname +=DateFormater.format(new Date(),DateFormater.DATETIME_PATTERN) + "." + fileSuffix;File saveFile = new File(uploadPath, newname);try {file.transferTo(saveFile);backInfo(response, true, 0, newname);} catch (Exception e) {LOG.error(e.getMessage(), e);backInfo(response, false, 1, "");return;}} else {backInfo(response, false, -1, "");return;}}// 返回信息private void backInfo(HttpServletResponse response, boolean flag, int message,String fileName) {String json = "";if (flag) {json = "{ \"status\": \"success"; } else {json = "{ \"status\": \"error"; }json += "\",\"fileName\": \"" + fileName + "\",\"message\": \"" + message + "\"}";try {response.setContentType("text/html;charset=utf-8");response.getWriter().write(json);} catch (IOException e) {LOG.error(e.getMessage(), e);}}}
2、前台接受代码
使用ajaxfileupload时，首先下载ajaxfileupload文件，导入对应的js文件
<script type="text/javascript" src="js/ajaxfileupload.js"></script>
文件传输字段必须为file类型，如下：
<input type="file" id="file" name="file" οnchange="ajaxFileUpload();"/>
其次，处理上传文件：
//ajax 实现文件上传 function ajaxFileUpload() {$.ajaxFileUpload({url : "upload/imageUpload.shtml",secureuri : false,data : {filePre : "feedback",p : new Date()},fileElementId : "file",dataType : "json",success : function(data) {if (data.status == "success") {//上传成功}switch(data.message){//解析上传状态case "0" : //上传成功break;case "-1" : //上传文件不能为空break;default: //上传失败break;}},error : function(data) {//上传失败}});}
本文出处：/fengshizty
其实很简单。
