1、多文件上传：http://blog.csdn.net/a1314517love/article/details/24183273

2、单文件上传的简单示例：http://blog.csdn.net/cheung1021/article/details/7084673

3、springMVC+ajaxfileupload异步上传图片并及时预览

http://www.codeweblog.com/springmvc-ajaxfileupload%E5%BC%82%E6%AD%A5%E4%B8%8A%E4%BC%A0%E5%9B%BE%E7%89%87%E9%A2%84%E8%A7%88-%E8%A3%81%E5%89%AA%E5%B9%B6%E4%BF%9D%E5%AD%98%E5%9B%BE%E7%89%87/

个人实践：

一、对1中的第二种方法的实现：

${pageTitle }

name:

packagecom.leslie.controller;importjava.io.File;importjava.io.IOException;importjava.util.Iterator;importjavax.servlet.http.HttpServletRequest;importjavax.servlet.http.HttpServletResponse;importjavax.validation.Valid;importorg.slf4j.Logger;importorg.slf4j.LoggerFactory;importorg.springframework.stereotype.Controller;importorg.springframework.validation.BindingResult;importorg.springframework.web.bind.WebDataBinder;importorg.springframework.web.bind.annotation.InitBinder;importorg.springframework.web.bind.annotation.ModelAttribute;importorg.springframework.web.bind.annotation.RequestMapping;importorg.springframework.web.bind.annotation.ResponseBody;importorg.springframework.web.multipart.MultipartFile;importorg.springframework.web.multipart.MultipartHttpServletRequest;importorg.springframework.web.multipart.commons.CommonsMultipartResolver;importorg.springframework.web.servlet.ModelAndView;importcom.leslie.User;

@Controller

@RequestMapping("/workConfig")public classSJWorkConfigController {private Logger log = LoggerFactory.getLogger(SJWorkConfigController .class);

@RequestMapping(value= "/upload")publicModelAndView upload(@Valid @ModelAttribute User user, BindingResult br, HttpServletRequest request,

HttpServletResponse response)throwsIllegalStateException, IOException {//创建一个通用的多部分解析器

CommonsMultipartResolver multipartResolver = newCommonsMultipartResolver(

request.getSession().getServletContext());//判断 request 是否有文件上传,即多部分请求

if(multipartResolver.isMultipart(request)) {//转换成多部分request

MultipartHttpServletRequest multiRequest =(MultipartHttpServletRequest) request;//取得request中的所有文件名

Iterator iter =multiRequest.getFileNames();while(iter.hasNext()) {//记录上传过程起始时的时间，用来计算上传时间//int pre = (int) System.currentTimeMillis();//取得上传文件

MultipartFile file =multiRequest.getFile(iter.next());if (file != null) {//取得当前上传文件的文件名称

String myFileName =file.getOriginalFilename();//如果名称不为“”,说明该文件存在，否则说明该文件不存在

if (myFileName.trim() != "") {

System.out.println(myFileName);//重命名上传后的文件名

String fileName = "demoUpload" +file.getOriginalFilename();//定义上传路径

String path = "E:/test/" +fileName;

File localFile= newFile(path);

file.transferTo(localFile);

}

}//记录上传该文件后的时间//int finaltime = (int) System.currentTimeMillis();//System.out.println(finaltime - pre);

}

}

ModelAndView mv= newModelAndView();

mv.addObject("message", request.getParameter("name").toString());

mv.setViewName("hello");returnmv;

}//@RequestMapping(value = "/upload")//public ModelAndView upload(DefaultMultipartHttpServletRequest request) {//CommonsMultipartFile file = (CommonsMultipartFile)//request.getFile("file");// //这里的file就是前台页面的name//if (file.isEmpty()) {//return null;//}// //获取路径，生成完整的文件路径//String fileName = "E:/test/"+"demoUpload" + file.getOriginalFilename();//File uploadFile = new File(fileName);//try {// //上传//FileCopyUtils.copy(file.getBytes(), uploadFile);//} catch (IOException e) {//e.printStackTrace();//}//ModelAndView mv = new ModelAndView();//mv.addObject("message",request.getParameter("name").toString());//mv.setViewName("hello");//return mv;//}

}

1、1中的方法比较通用，且一次能上传多个文件。

2、虽然request的类型是MultipartHttpServletRequest，但仍可继续使用request.getParameter来正常取表单中的非Multipart内容，

这样就可以将图片和普通表单内容一次提交了。

二、对3中方法的实现

注：3文中不但实现了图片上传和预览，并且有使用js切图的功能。由于我使用java在后台切图，所以只使用了它的文件上传预览功能。

前台页面代码：

${pageTitle }

font-family: "微软雅黑";

color: #F30;

}

App.init();//initlayout and core plugins

});

var file= $("#realPicFile").val();if(!/\.(gif|jpg|jpeg|png|JPG|PNG)$/.test(file)){

Error("不支持的图片格式.图片类型必须是.jpeg,jpg,png,gif格式.");return false;

}

$.ajaxFileUpload({

url :'${pageContext.request.contextPath}/workConfig/uploadOnePic?inputId=realPicFile',

secureuri :false,

fileElementId :'realPicFile',

dataType :'content',

success : function(data, status){

$("#realPic").attr("src", data);

},

error : function(data, status, e){

alert(e);//Error(e);

}

});return false;

}

后台controller代码(不包括切图)：

packagecom.leslie.controller;importjava.io.File;importjava.io.IOException;importjava.util.Iterator;importjava.util.List;importjavax.annotation.Resource;importjavax.servlet.http.HttpServletRequest;importjavax.servlet.http.HttpServletResponse;importjavax.validation.Valid;importorg.apache.commons.lang3.exception.ExceptionUtils;importorg.slf4j.Logger;importorg.slf4j.LoggerFactory;importorg.springframework.stereotype.Controller;importorg.springframework.validation.BindingResult;importorg.springframework.web.bind.WebDataBinder;importorg.springframework.web.bind.annotation.InitBinder;importorg.springframework.web.bind.annotation.ModelAttribute;importorg.springframework.web.bind.annotation.RequestMapping;importorg.springframework.web.bind.annotation.RequestParam;importorg.springframework.web.bind.annotation.ResponseBody;importorg.springframework.web.multipart.MultipartFile;importorg.springframework.web.multipart.MultipartHttpServletRequest;importorg.springframework.web.multipart.commons.CommonsMultipartResolver;importorg.springframework.web.servlet.ModelAndView;importcom.leslie.model.DesignerWorks;importcom.leslie.model.MemberDesigner;importcom.leslie.model.User;importcom.leslie.service.DesignerService;importcom.leslie.util.ConstantsUtil;importcom.leslie.validator.DesignerWorksValidator;

@Controller

@RequestMapping("/workConfig")public classSJWorkConfigController {

@RequestMapping("/uploadOnePic")

@ResponseBodypublicString fileUpload(String inputId, MultipartHttpServletRequest request) {try{

MultipartFile realPicFile=request.getFile(inputId);if (realPicFile != null) {//取得当前上传文件的文件名称

String myFileName =realPicFile.getOriginalFilename();//如果名称不为“”,说明该文件存在，否则说明该文件不存在

if (myFileName.trim() != "") {

System.out.println(myFileName);//重命名上传后的文件名

String fileName = "demoUpload" +realPicFile.getOriginalFilename();//定义上传路径

String path = "D:/program files/apache-tomcat-8.0.33/webapps/Public/upload/images/" +fileName;

String pathReturn= "/Public/upload/images/" +fileName;

File localFile= newFile(path);

realPicFile.transferTo(localFile);returnpathReturn;

}

}

}catch(Exception e) {//LOG.error("upload header picture error : ", e);

}return null;

}

}

过程概述：用户点选了文件选择器的按钮以后，浏览器弹出选择文件的对话框，当用户选定了某张图片并确定以后，会触发文件选择器的onchange事件，我们在onchange事件里调用ajaxfileupload将文件选择器

选中的文件提交到后台处理，后台通过request拿到文件以后，可以裁剪，可以保存，可以做很多事情，然后将保存以后的文件的url路径返回给前台ajaxfileupload，ajaxfileupload拿到文件路径以后，将页面中

相应的img标签的src属性改成文件路径，然后这张图片就在页面中显示出来了。

说明：

1、ajaxfileupload的功能只是将文件提交到后台，真正对图片进行保存、裁切等处理的还是后台程序。

2、ajaxfileupload的dataType属性一般为"json"，但我在使用json类型时报错，后台返回给前台数据以后走到了error分支，弹出“syntexError:unexpeted token”。网上搜了一下，有高人通过修改