java实现多图片上传功能
人气:0开发环境：jdk1.7，MyEclipse10
框架用的是spring。用到了maven工具（maven的包百度下就可以）。
四步完成，全部复制改参数就可以
第一步：先在Spring中对图片进行限制
<!-- SpringMVC上传文件时，需要配置MultipartResolver处理器 -->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="defaultEncoding" value="UTF-8"/>
<!-- 指定所上传文件的总大小不能超过500KB。注意maxUploadSize属性的限制不是针对单个文件，而是所有文件的容量之和。
这个的大小是以字节为单位的，要多大自己算好了再设置-->
<property name="maxUploadSize" value="500000"/>
<!-- 最大内存大小 (10240)-->
<property name="maxInMemorySize" value="40960" />
</bean>
第二步：写jsp页面
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <script type="text/javascript" src="../js/jquery-1.7.1.min.js"></script> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>上传图片</title> </head> <body> <form action="filesUpload" method="POST" name="xiangmu" id="xiangmu" enctype="multipart/form-data"> <table> <tr> <td>SFZ图片上传：</td> <td><input type=file name="myfiles" id="doc" onchange="showImage();"> </td> <div id="localImag"> <img id="preview" width=-1 height=-1 style="diplay:none" /> </div> </tr> <tr> <td>公司运营情况:</td> <!-- 为了实现张图片上传，上传框这个name要都一样 --> <td><input type="file" name="myfiles" id="doc1"></td> <td> </td> </tr> <tr> <td><input type="submit" value="提交" /> </td> </tr> </table> </form> </body> </html>
注意：
多图上传，上传框的name要都一样，等于发送了一个MultipartFile[]数组。
不仅支持上传图片，还支持多文件上传。
form的enctype=“multipart/form-data”，这个是上传文件必须的。
第三步：如果你要实现页面展现图片的功能，就在jsp页面添加下面的方法：
<script type="text/javascript">
function showImage() {
var docObj = document.getElementById("doc");
var imgObjPreview = document.getElementById("preview");
if (docObj.files && docObj.files[0]) {
//火狐下，直接设img属性
imgObjPreview.style.display = 'block';
imgObjPreview.style.width = '300px';
imgObjPreview.style.height = '120px';
//imgObjPreview.src = docObj.files[0].getAsDataURL();
//火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式
imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
} else {
//IE下，使用滤镜
docObj.select();
var imgSrc = document.selection.createRange().text;
var localImagId = document.getElementById("localImag");
//必须设置初始大小
localImagId.style.width = "250px";
localImagId.style.height = "200px";
//图片异常的捕捉，防止用户修改后缀来伪造图片
try {
localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
localImagId.filters
.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
} catch (e) {
alert("您上传的图片格式不正确，请重新选择!");
return false;
}
imgObjPreview.style.display = 'none';
document.selection.empty();
}
return true;
}
</script>
注意：这个方法只能上传一张来显示，除非你设置多个div。或者：展示多个图片可以找找其他方法。
第四步：后台接收
@RequestMapping("/filesUpload")
//requestParam要写才知道是前台的那个数组
public String filesUpload(@RequestParam("myfiles") MultipartFile[] files,
HttpServletRequest request) {
List<String> list = new ArrayList<String>();
if (files != null && files.length > 0) {
for (int i = 0; i < files.length; i++) {
MultipartFile file = files[i];
// 保存文件
list = saveFile(request, file, list);
}
}
//写着测试，删了就可以
for (int i = 0; i < list.size(); i++) {
System.out.println("集合里面的数据" + list.get(i));
}
return "index";//跳转的页面
}
private List<String> saveFile(HttpServletRequest request,
MultipartFile file, List<String> list) {
// 判断文件是否为空
if (!file.isEmpty()) {
try {
// 保存的文件路径(如果用的是Tomcat服务器，文件会上传到\\%TOMCAT_HOME%\\webapps\\YourWebProject\\upload\\文件夹中
// )
String filePath = request.getSession().getServletContext()
.getRealPath("/")
+ "upload/" + file.getOriginalFilename();
list.add(file.getOriginalFilename());
File saveDir = new File(filePath);
if (!saveDir.getParentFile().exists())
saveDir.getParentFile().mkdirs();
// 转存文件
file.transferTo(saveDir);
return list;
} catch (Exception e) {
e.printStackTrace();
}
}
return list;
}
注意：upload是文件夹，自己新建下再运行，免得出错。
结束，全部复制就可以实现了。
您可能感兴趣的文章:
加载全部内容