freemarker+springMVC+ajaxfileupload实现异步图片上传（多张）

最新推荐文章于 2024-05-29 09:07:42 发布

rosedoria0

最新推荐文章于 2024-05-29 09:07:42 发布

阅读量4.2k

点赞数

本文链接：https://blog.csdn.net/u013111003/article/details/52107448

版权

freemarker

<!DOCTYPE html>
<html lang="zh-cn" class="hb-loaded">

    <head>  
    <meta http-equiv="pragma" content="no-cache">  
    <meta http-equiv="cache-control" content="no-cache">  
    <meta http-equiv="expires" content="0">      
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
    <meta http-equiv="description" content="This is my page">  
    <!-- 
    -->  
    <script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
    <script language="javascript" src="js/ajaxfileupload.js" > </script>   
    <script type="text/javascript">    
	 	function preview(file,previewid){
	 		var prevDivId = previewid.toString();
	 		var prevDiv = document.getElementById(prevDivId);  
	 		if (file.files && file.files[0]){  
	 			var reader = new FileReader();  
	 			reader.onload = function(evt){  
					prevDiv.innerHTML = '<img width="80" height="80" src="' + evt.target.result + '" />';  
				}    
				reader.readAsDataURL(file.files[0]);  
			}else{  
				prevDiv.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>';  
			}  
	 	}  
	</script> 
    <script>
 	    //新建或编辑 保存提交  
		function submitPic(){  
		    var type="1";//展示图片  
		    var f = $("#file").val();  
		    if(f==null||f==""){  
		        $("#picTip").html("<span style='color:Red'>错误提示:上传文件不能为空,请重新选择文件</span>");  
		        return false;  
		      }else{  
		       var extname = f.substring(f.lastIndexOf(".")+1,f.length);  
		       extname = extname.toLowerCase();//处理了大小写  
		       if(extname!= "jpeg"&&extname!= "jpg"&&extname!= "gif"&&extname!= "png"){  
		         $("#picTip").html("<span style='color:Red'>错误提示:格式不正确,支持的图片格式为：JPEG、GIF、PNG！</span>");  
		         return false;  
		        }  
		      }  
		     var file = document.getElementById("file").files;    
		     var size = file[0].size;  
		     if(size>2097152){  
		          $("#picTip").html("<span style='color:Red'>错误提示:所选择的图片太大，图片大小最多支持2M!</span>");   
		          return false;  
		      }  
		    ajaxFileUploadPic(name,type);  
		}  
  
		function ajaxFileUploadPic(name,type,id) {  
		    $.ajaxFileUpload({  
		        url : 'uploadMulPic.action?type=1', //用于文件上传的服务器端请求地址  
		        secureuri : false, //一般设置为false  
		        fileElementId : id, //文件上传空间的id属性  <input type="file" id="file" name="file" />  
		        type : 'post',  
		        dataType : 'json', //返回值类型 一般设置为json  
		        success : function(data, status) //服务器成功响应处理函数  
		        {  
		        	 var path = data.Path;
		        	 //alert(data.filePath);
		             $("#picTip").html("<span style='color:Red'>图片全部上传成功!</span>");
		        },  
		        error : function(data, status, e)//服务器响应失败处理函数  
		        {  
		             //alert(data.filePath);
		             $("#picTip").html("<span style='color:Red'>图片上传成功!</span>");
		        }  
		    });  
		    return false;  
	}      
	function showFile(){
		var files = $('input[type="file"]');
		for(var i=0;i<files.length;i++){
			alert(files[i].id);
			ajaxFileUploadPic(1,1,files[i].id);
		}
	}
</script>
  </head>  
<body>
    <div id="uploadPicWindow" title="上传图片"  style="width:720px;height:220px;padding:20px;background:#fffff0;">  
        <form id="picForm" action="" method="post">
        	<table width="200">
        	<tr width="200" align="center">
        		<td width="100px" height="100px" align="center"><span id="preview1"><img src="images/common/selectPic.jpg" /></span></td>
        		<td width="100px" height="100px" align="center"><span id="preview2"><img src="images/common/selectPic.jpg" /></span></td>
        		<td width="100px" height="100px" align="center"><span id="preview3"><img src="images/common/selectPic.jpg" /></span></td>
        		<td width="100px" height="100px" align="center"><span id="preview4"><img src="images/common/selectPic.jpg" /></span></td>
        		<td width="100px" height="100px" align="center"><span id="preview5"><img src="images/common/selectPic.jpg" /></span></td>
        	</tr>
        	<tr>
        		<td width="100px" height="20px" align="center"><span align="center"><input type="button" value="上传图片" οnclick="file.click();"></input></span></td>
        		<td width="100px" height="20px" align="center"><span align="center"><input type="button" value="上传图片" οnclick="file1.click();"></input></span></td>
        		<td width="100px" height="20px" align="center"><span align="center"><input type="button" value="上传图片" οnclick="file2.click();"></input></span></td>
        		<td width="100px" height="20px" align="center"><span align="center"><input type="button" value="上传图片" οnclick="file3.click();"></input></span></td>
        		<td width="100px" height="20px" align="center"><span align="center"><input type="button" value="上传图片" οnclick="file4.click();"></input></span></td>
        	</tr>
        	</table>  
              	 <input type="file" name="file" id="file" style="width:80%;display:none" οnchange="preview(this,'preview1');" dis/>
            	 <input type="file" name="file1" id="file1" style="width:80%;display:none" οnchange="preview(this,'preview2');"/>  
            	 <input type="file" name="file2" id="file2" style="width:80%;display:none" οnchange="preview(this,'preview3');"/> 
            	 <input type="file" name="file3" id="file3" style="width:80%;display:none" οnchange="preview(this,'preview4');"/> 
            	 <input type="file" name="file4" id="file4" style="width:80%;display:none" οnchange="preview(this,'preview5');"/>   
            <div id="picTip"></div>  
            <div id="formWindowfooterPic1" style="padding:5px;text-align:right;">   
                <a href="#" οnclick="showFile();" class="easyui-linkbutton" data-options="iconCls:'icon-save'">提交</a>  
            </div>  
        </form>  
    </div>  
</body>

</html>

Controller

	@RequestMapping(value="uploadMulPic",method = RequestMethod.POST)
	@ResponseBody  
	public String uploadMulPic(HttpServletRequest request) throws Exception {
		MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;    
        MultipartFile file = null;    
        MultiValueMap<String, MultipartFile> multiFileMap = multipartRequest.getMultiFileMap();
        List<String> uploadUrl = uploadService.uploadMulFile(multiFileMap, request);  
        return "{\"filePath\":\""+uploadUrl+"\"}";    
	}

Service

/**
	 * 上传多个文件
	 * @param file	文件
	 * @param folder	文件夹名称
	 * @param request
	 * @return
	 * @throws IOException
	 */
	public List<String> uploadMulFile(MultiValueMap<String, MultipartFile> multiFileMap, HttpServletRequest request) throws IOException {
		List<String> paths = new ArrayList<>();
		for (String key : multiFileMap.keySet()) {
			List<MultipartFile> MultipartFiles = multiFileMap.get(key);
			for(MultipartFile file :MultipartFiles){
				SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd");
				String rootPath = request.getRealPath("/");
				String prefix = uploadUrlsConfigurer.getContextProperty(request);
				String datePath = format.format(new Date());
				String appPath = prefix+"/"+datePath;
				FileUtils.createFilePath(request.getRealPath("/"), appPath);
				String fileName = Identities.uuid2() + file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf("."));
				/*
				 * /upload/other/2015-04-15/cea78319e0ea4756b29de05b2cc431ab.pdf
				 * */
				FileCopyUtils.copy(file.getBytes(), new File(request.getRealPath("/") + appPath+"/"+fileName));
				paths.add("/" + appPath+"/"+fileName);
			}
		}
		
		return paths;
	}

rosedoria0

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
freemarker+springMVC+ajaxfileupload实现异步图片上传（多张）

freemarker  function preview(file,previewid){ var prevDivId = previewid.toString(); var prevDiv =
复制链接

扫一扫