您的位置：首页 > 编程语言 > Java开发

jsp+springmvc实现文件上传、图片上传和及时预览图片

2016-05-12 17:55 1031 查看
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中的第二种方法的实现：

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>${pageTitle }</title>
<link href="/Public/media/css/new/page.css" rel="stylesheet"
type="text/css" />
</head>
<body>

<form action="${pageContext.request.contextPath}/workConfig/upload" method="post" enctype="multipart/form-data">
name:<input name="name" type="text" ><br />
<input name="file" type="file" ><br />
<input name="file2" type="file" ><br />
<input name="file3" type="file" ><br />
<input name="file4" type="file" ><br />
<input type="submit" value="提交">
</form>
</body>
</html>


package com.leslie.controller;

import java.io.File;
import java.io.IOException;
import java.util.Iterator;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.validation.Valid;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Controller;
import org.springframework.validation.BindingResult;
import org.springframework.web.bind.WebDataBinder;
import org.springframework.web.bind.annotation.InitBinder;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;
import org.springframework.web.multipart.commons.CommonsMultipartResolver;
import org.springframework.web.servlet.ModelAndView;

import com.leslie.User;

@Controller
@RequestMapping("/workConfig")
public class SJWorkConfigController {

private Logger log = LoggerFactory.getLogger(SJWorkConfigController .class);

@RequestMapping(value = "/upload")
public ModelAndView upload(@Valid @ModelAttribute User user, BindingResult br, HttpServletRequest request,
HttpServletResponse response) throws IllegalStateException, IOException {
// 创建一个通用的多部分解析器
CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver(
request.getSession().getServletContext());
// 判断 request 是否有文件上传,即多部分请求
if (multipartResolver.isMultipart(request)) {
// 转换成多部分request
MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;
// 取得request中的所有文件名
Iterator<String> 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 = new File(path);
file.transferTo(localFile);
}
}
// 记录上传该文件后的时间
// int finaltime = (int) System.currentTimeMillis();
// System.out.println(finaltime - pre);
}

}
ModelAndView mv = new ModelAndView();
mv.addObject("message", request.getParameter("name").toString());
mv.setViewName("hello");
return mv;
}

// @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在后台切图，所以只使用了它的文件上传预览功能。

前台页面代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>${pageTitle }</title>
<link href="/Public/media/css/new/page.css" rel="stylesheet"
type="text/css" />
<style type="text/css">
.errormsg {
font-family: "微软雅黑";
color: #F30;
}
</style>

</head>
<body>
<div class="outer">
<div class="pathdiv">
${currentMenuDesc }
<div class="tableDivTitleButtonDiv">
<a href="${backToURL}"><input type="button"
class="tableDivTitleButtonDivButton" value="返回" /></a>
</div>

</div>
<div class="infoTitle">${pageTitle }</div>

<form:form action="${formActionURL}" method="post" commandName="work">
<div class="formDiv">
<table width="1020" border="0">
<tr>
<form:input path="worksId" type="hidden" />
<form:input path="designerId" type="hidden" />
<form:input path="worksImg1" type="hidden" />
<form:input path="worksImg2" type="hidden" />
<form:input path="worksImg3" type="hidden" />
<td align="right">作品名称：</td>
<td align="left"><form:input path="worksName" /><span
class="errormsg"><form:errors path="worksName" /></span></td>
</tr>
<tr>
<td align="right">作品说明：</td>
<td align="left"><form:textarea path="worksRemark" cols="30"
rows="10" /><span class="errormsg"><form:errors
path="worksRemark" /></span></td>
</tr>
<tr>
<td align="right">作品图1：</td>
<td align="left">
<input name="realPicFile" id="realPicFile" type="file" onchange="ajaxFileUpload()"/>
<img src="/Public/media/image/loading2.gif" id="loading" style="display: none;">
<img id="realPic" src="/Public/showimgbj.jpg"/>
<span class="errormsg">
<form:errors path="worksImg1" />
</span>
</td>
</tr>
<tr>
<td align="right">作品图2：</td>
<td align="left"><input name="" type="file" /><img id="img2"
src="" /><span class="errormsg"><form:errors
path="worksImg2" /></span></td>
</tr>
<tr>
<td align="right">作品图3：</td>
<td align="left"><input name="" type="file" /><img id="img3"
src="" /><span class="errormsg"><form:errors
path="worksImg3" /></span></td>
</tr>
<tr>
<td></td>
<td><input name="" type="submit" value="提交" /></td>
</tr>

</table>
</div>
</form:form>
</div>
<div id="errorMsgDiv"></div>
<script src="/Public/media/js/jquery-1.10.1.min.js"
type="text/javascript"></script>
<script src="/Public/media/js/jquery-migrate-1.2.1.min.js"
type="text/javascript"></script>
<script src="/Public/media/js/bootstrap.min.js" type="text/javascript"></script>
<script src="/Public/media/js/jquery.gritter.js" type="text/javascript"></script>
<script src="/Public/media/js/app.js" type="text/javascript"></script>
<script src="/Public/media/css/new/ajaxfileupload.js"
type="text/javascript"></script>
<script>
jQuery(document).ready(function() {
App.init(); // initlayout and core plugins
});
</script>
<script>
function ajaxFileUpload() {
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;
}
</script>
</body>
</html>


后台controller代码（不包括切图）：

package com.leslie.controller;

import java.io.File;
import java.io.IOException;
import java.util.Iterator;
import java.util.List;

import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.validation.Valid;

import org.apache.commons.lang3.exception.ExceptionUtils;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Controller;
import org.springframework.validation.BindingResult;
import org.springframework.web.bind.WebDataBinder;
import org.springframework.web.bind.annotation.InitBinder;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;
import org.springframework.web.multipart.commons.CommonsMultipartResolver;
import org.springframework.web.servlet.ModelAndView;

import com.leslie.model.DesignerWorks;
import com.leslie.model.MemberDesigner;
import com.leslie.model.User;
import com.leslie.service.DesignerService;
import com.leslie.util.ConstantsUtil;
import com.leslie.validator.DesignerWorksValidator;

@Controller
@RequestMapping("/workConfig")
public class SJWorkConfigController {
@RequestMapping("/uploadOnePic")
@ResponseBody
public String 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 = new File(path);
realPicFile.transferTo(localFile);
return pathReturn;
}
}
} 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”。网上搜了一下，有高人通过修改

ajaxfileupload源码解决了问题（原文地址：http://liwx2000.iteye.com/blog/1540321），但我在实践中按它的办法修改问题依然存在，于是我将类型改为content就搞定了，正确返回了文件的路径

并走入了success分支。

3、在保存文件时定义了两个文件路径，path指的是图片在服务器本地保存的绝对路径，pathReturn指的是用户在浏览器上看到的图片的src路径，此处需要注意，如果将path直接返回，

页面上是看不到图片的。

4、ajaxfileupload.js的下载：http://www.cnblogs.com/kissdodog/archive/2012/12/15/2819025.html

三、后记

按照二中的办法，似乎一切顺风顺水波澜不惊，但却有一个问题无法解决：虽然使用ajaxfileupload成功完成了图片的上传和及时预览，但文件选择器（<input type="file"）在选中了图片以后却始终无法显示

图片的url，一直显示“未选择文件”，这似乎是ajaxfileupload的一个bug。最后我使用了一个折中的办法，将文件选择器隐藏，使用一个普通的按钮，当它被点击时触发文件选择器的onclick事件。下面重新给出整理以后的代码。

jsp代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>${pageTitle }</title>
<link href="/Public/media/css/new/page.css" rel="stylesheet"
type="text/css" />
<style type="text/css">
.errormsg {
font-family: "微软雅黑";
color: #F30;
}
</style>

</head>
<body>
<div class="outer">
<div class="pathdiv">
${currentMenuDesc }
<div class="tableDivTitleButtonDiv">
<a href="${backToURL}"><input type="button"
class="tableDivTitleButtonDivButton" value="返回" /></a>
</div>

</div>
<div class="infoTitle">${pageTitle }</div>

<form:form action="${formActionURL}" method="post" commandName="work">
<div class="formDiv">
<table width="1020" border="0">
<tr>
<form:input path="worksId" type="hidden" />
<form:input path="designerId" type="hidden" />
<form:input id = "hiddenImgValue1" path="worksImg1" type="hidden" />
<form:input id = "hiddenImgValue2" path="worksImg2" type="hidden" />
<form:input id = "hiddenImgValue3" path="worksImg3" type="hidden" />
<td align="right">作品名称：</td>
<td align="left"><form:input path="worksName" /><span
class="errormsg"><form:errors path="worksName" /></span></td>
</tr>
<tr>
<td align="right">作品说明：</td>
<td align="left"><form:textarea path="worksRemark" cols="30"
rows="10" /><span class="errormsg"><form:errors
path="worksRemark" /></span></td>
</tr>
<tr>
<td align="right">作品图1：</td>
<td align="left">
<img src="/Public/media/image/loading2.gif" id="loading" style="display: none;">
<img id="realPic1" src="/Public/showimgbj.jpg"/>
<input name="realPicFile1" id="realPicFile1" type="file" onchange="ajaxFileUpload('realPicFile1','realPic1','hiddenImgValue1')" style='display:none'/>
<input type=button onclick="upImg('realPicFile1')" value="上传" />
<span class="errormsg">
<form:errors path="worksImg1" />
</span>
</td>
</tr>
<tr>
<td align="right">作品图2：</td>
<td align="left">
<img src="/Public/media/image/loading2.gif" id="loading" style="display: none;">
<img id="realPic2" src="/Public/showimgbj.jpg"/>
<input name="realPicFile2" id="realPicFile2" type="file" onchange="ajaxFileUpload('realPicFile2','realPic2','hiddenImgValue2')" style='display:none'/>
<input type=button onclick="upImg('realPicFile2')" value="上传" />
<span class="errormsg">
<form:errors path="worksImg2" />
</span>
</td>
</tr>
<tr>
<td align="right">作品图3：</td>
<td align="left">
<img src="/Public/media/image/loading2.gif" id="loading" style="display: none;">
<img id="realPic3" src="/Public/showimgbj.jpg"/>
<input name="realPicFile3" id="realPicFile3" type="file" onchange="ajaxFileUpload('realPicFile3','realPic3','hiddenImgValue3')" style='display:none'/>
<input type=button onclick="upImg('realPicFile3')" value="上传" />
<span class="errormsg"><form:errors
path="worksImg3" />
</span>
</td>
</tr>
<tr>
<td></td>
<td><input name="" type="submit" value="提交" /></td>
</tr>

</table>
</div>
</form:form>
</div>
<div id="errorMsgDiv"></div>
<script src="/Public/media/js/jquery-1.10.1.min.js"
type="text/javascript"></script>
<script src="/Public/media/js/jquery-migrate-1.2.1.min.js"
type="text/javascript"></script>
<script src="/Public/media/js/bootstrap.min.js" type="text/javascript"></script>
<script src="/Public/media/js/jquery.gritter.js" type="text/javascript"></script>
<script src="/Public/media/js/app.js" type="text/javascript"></script>
<script src="/Public/media/css/new/ajaxfileupload.js"
type="text/javascript"></script>
<script>
jQuery(document).ready(function() {
App.init(); // initlayout and core plugins
});
</script>
<script>
function upImg(fileID){
$("#"+fileID).click();
}
function ajaxFileUpload(fileID,imgID,hiddenImgValue) {
/*var file = $("#"+hiddenImgValue).val();
if(!/\.(jpg|png|JPG|PNG)$/.test(file)){
Error("不支持的图片格式.图片类型必须是.jpg,png格式.");
return false;
}*/
$.ajaxFileUpload({
url : '${pageContext.request.contextPath}/workConfig/uploadOnePic?inputId='+fileID,
secureuri : false,
fileElementId : fileID,
dataType : 'json',
success : function(data, status){
$("#"+imgID).attr("src", data.result);
$("#"+hiddenImgValue).val(data.result);
//$(this).val(data.result);
//console.log($('#realPicFile'));
},
error : function(data, status, e){
alert(e);
//Error(e);
}
});
return true;
}
</script>
</body>
</html>


controller代码

@RequestMapping("/uploadOnePic")
@ResponseBody
public AjaxResultDomain fileUpload(String inputId, MultipartHttpServletRequest request) {
try {
// 拿到文件
MultipartFile realPicFile = request.getFile(inputId);

// 准备好路径参数
String uploadImagesSavePath = pathUtil.getYgbhUploadImagesDiskFolderPath(request);
String urlRootPath = pathUtil.getYgbhUploadImagesUrlFolderPath();
List<MultipartFile> files = new ArrayList<MultipartFile>();
files.add(realPicFile);

// 保存+压缩
String fileName = MultipartFileUtil.saveAndConstrictMultipartFiles(files, uploadImagesSavePath, urlRootPath)
.get(0);
String fileUrl = urlRootPath + fileName;
AjaxResultDomain d = new AjaxResultDomain();
d.setResult(fileUrl);
return d;
} catch (Exception e) {
e.printStackTrace();
}
return null;
}


注意，ajax拿到后台返回的值data以后，使用data.result给图片地址赋值而不是直接用data赋值。原因是，如果后台直接将图片地址作为String字符串返回给前台的话，js会将图片地址辨认为是一个正则表达式并报错。

所以，对付js这么灵活的东西，能绕开就绕开，否则坑很深。不跟它纠结，直接用一个object返回来，然后取object的属性。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航