使用SpringMVC配合jQuery文件上传插件ssi-uploader实现多图片可预览上传

颛孙庆

2023-12-01

公司业务中要实现一个带预览功能的多图片上传。在网上找了很多资料，都有或多或少的不足。有的可以实现多图片上传功能，但前台的实际操作为每次选择一张图片，没有预览功能，上传时可以将多个选中的图片保存到一个数组中，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>

前台jsp页面的配置

<%@ 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);

<!--由于业务的需要,需要实现在下拉列表改变事件之后加载图片上传的控件,所以我在此处还追加了script样式.  网上可查询:如何追加script样式  -->$("#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 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 "根据需要返回的页面";
	}
	
}

使用SpringMVC配合jQuery文件上传插件ssi-uploader实现多图片可预览上传

相关阅读

相关文章

相关问答

相关文档