1、多文件上传:/a1314517love/article/details/24183273
2、单文件上传的简单示例:/cheung1021/article/details/7084673
3、springMVC+ajaxfileupload异步上传图片并及时预览
/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.monsMultipartResolver;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;
}
${currentMenuDesc }
class="tableDivTitleButtonDivButton" value="返回" />
${pageTitle }
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;mons.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.monsMultipartResolver;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”。网上搜了一下,有高人通过修改
如果觉得《java实现文件上传预览_jsp+springmvc实现文件上传 图片上传和及时预览图片》对你有帮助,请点赞、收藏,并留下你的观点哦!