公司业务中要实现一个带预览功能的多图片上传。在网上找了很多资料，都有或多或少的不足。有的可以实现多图片上传功能，但前台的实际操作为每次选择一张图片，没有预览功能，上传时可以将多个选中的图片保存到一个数组中，java后台使用CommonsMultipartFile files[] 或MultipartFile files[]数组接受.这样的案例网上有很多,这里就不详细介绍了。也有一些前台用基于jquery框架实现多图片预览上传的文档,但是很可惜的没有后台java接受方式的介绍.我在这里就卡住了很久.很是纠结。
好了，废话不多说。上代码。
我的这个可预览的多图片上传，借用了前台的jquery框架ssi-uploader,可在http://www.jq22.com/jquery-info9613 jquery插件库这个网站上免费下载.后台使用springMVC控制层框架对上传来的图片进行相应的处理.
spring-mvc.xml控制层要配置接受文件的设置
<!-- 图片上传的相关配置 -->
<!-- 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>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!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">
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/jquery-easyui-1.5.1/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/jquery-easyui-1.5.1/themes/icon.css">
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/jquery-easyui-1.5.1/demo.css">
<script type="text/javascript" src="<%=request.getContextPath() %>/jquery-easyui-1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/jquery-easyui-1.5.1/jquery.easyui.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery-1.8.2.min.js"></script>
<!--下面为jquery框架的代码样式引入-->
<script src="<%=request.getContextPath() %>/ImgInput/js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="<%=request.getContextPath() %>/ImgInput/js/ssi-uploader.js"></script>
<link rel="stylesheet" href="<%=request.getContextPath() %>/ImgInput/css/ssi-uploader.css"/>
<title>图片上传功能</title>
<script type="text/javascript">
$(function(){
//初始化加载空间
$.ajax({
url:"<%=request.getContextPath() %>/project/getSpaceList.action",//追加所有的空间
type:"post",
dataType:"json",
data:{},
success:function(data){
for(var i=0;i<data.length;i++){
$("#space").append("<option id='"+data[i].space_id+"'>"+data[i].space_name+"</option>");
}
}
})
//选择空间后的改变事件
$("#space").change(function(){
$.ajax({
//方法的借用.获取单一空间的相关信息
url:"<%=request.getContextPath() %>/project/getSpace.action",
type:"post",
dataType:"json",
data:{
"space_id":$("select[name='space']").find('option:selected').attr("id")
},
success:function(data){
$("#space_name").empty();
$("#space_id").empty();
$("#space_name").append(data.space_name);
$("#space_id").val(data.space_id);$("#testHtml").html("<script type='text/javascript'>var space_id=$('#space_id').val(); var pf_id=$('#pf_id').val(); var addr_code=$('#addr_code').val(); $('#ssi-upload').ssi_uploader({url:'<%=request.getContextPath() %>/upload/filesUpload.action?space_id='+space_id+'&pf_id='+pf_id+'&addr_code='+addr_code,dropZone:false,allowed:['jpg','gif','png','pdf']})<\/script>");}})}) //点击保存,页面跳转 $("#commit").click(function(){ location.href="<%=request.getContextPath() %>/customer/toCustomer_addrCL.action?cus_code="+$("#cus_code").val()+"&cus_name="+encodeURI(encodeURI($("#cus_name").text())); }) //返回$("#back").click(function(){location.href="<%=request.getContextPath() %>/work/toWork.action?cus_code="+$("#cus_code").val();}) })</script></head><body id="body"><div class="easyui-panel" title="图片上传" style="width:100%;"><div style="margin-bottom:20px"><div>客户姓名:<input type="hidden" value="${bs.cus_code }" id="cus_code" name="cus_code"><span id="cus_name">${cus_name}</span></div></div><div style="margin-bottom:20px"><div>客户地址:<input type="hidden" value="${bs.addr_code }" id="addr_code" name="addr_code"><span id="address">${bs.address }</span></div></div><div style="margin-bottom:20px" ><div><select id="space" style="width: 70%;text-align: center;" name="space"><option>请选择上传图片的空间</option></select></div><div id="space_name"></div><div class="row"> <div class="col-md-12"> <input type="file" multiple id="ssi-upload"/> <input type="text" id="space_id" > <input type="hidden" value="1" id="pf_id"> <input type="hidden" value="${bs.addr_code }" id="addr_code"> </div> </div></div><div style="margin-bottom:20px"><input type="button" value="保存" id="commit"><input type="button" value="返回" id="back"></div></div><div id="testHtml"></div><!--由于业务的需要,需要实现在下拉列表改变事件之后加载图片上传的控件,所以我在此处还追加了script样式. 网上可查询:如何追加script样式 --><!-- 如果只是引入样式,此处为初始化加载框架，script代码必须在最后面,不然样式就不能正常显示 --> <%-- <script type="text/javascript"> //下一行的url即为你后台所走的action路径,框架的初始化加载,不加载就不会有理想的显示效果 $('#ssi-upload').ssi_uploader({url:'<%=request.getContextPath() %>/upload/filesUpload.action?space_id='+space_id+"&pf_id="+$("#pf_id").val()+"&addr_code="+$("#addr_code").val(),dropZone:false,allowed:['jpg','gif','png','pdf']}); </script> --%> </body> </html>
后台java接收上传值:** * 功能:文件和图片的上传工具类 * */ @Controller @RequestMapping("upload") public class FileUploadUntil { @Autowired private FileUploadUntilService service; @RequestMapping("filesUpload") @ResponseBody public String filesUpload(String space_id,String addr_code,int pf_id,HttpServletRequest request,HttpServletResponse response,Map<String, Object> model){ MultipartHttpServletRequest Murequest = (MultipartHttpServletRequest)request; Map<String, MultipartFile> files = Murequest.getFileMap();//得到文件map对象 String upaloadUrl ="D:/upload/photo/";//得到当前工程路径拼接上文件名 File dir = new File(upaloadUrl); if(!dir.exists())//目录不存在则创建 dir.mkdirs(); for(MultipartFile file :files.values()){ String fileName=file.getOriginalFilename();//相片的名字 File tagetFile = new File(upaloadUrl+fileName);//创建文件对象 long size = file.getSize(); SimpleDateFormat form = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"); Date date = new Date(); String format = form.format(date); // 新文件名 String newFileName = fileName; //创建图片的对象,将图片的有关信息保存到数据库中 Picture pic = new Picture(); pic.setPic_name(fileName); pic.setPic_date(format); pic.setPic_size(size); pic.setAddr_code(addr_code); pic.setPf_id(pf_id); pic.setSpace_id(Integer.parseInt(space_id)); pic.setPic_used(0); pic.setNotes((upaloadUrl + newFileName)); if(!file.isEmpty()){//文件名不存在 则新建文件，并将文件复制到新建文件中 try { //把图片的有关信息保存到数据库中 service.addPic(pic); file.transferTo(tagetFile);//到这里就可以上传了，以下是处理图片及允许gif的上传 } catch (Exception e) { e.printStackTrace(); } } } return "根据需要返回的页面"; } }
1553
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
