JQuery特效多张图片上传

最新推荐文章于 2024-04-14 23:06:29 发布

原创最新推荐文章于 2024-04-14 23:06:29 发布 · 2.3k 阅读

0 ·

CC 4.0 BY-SA版权

本文探讨了使用JQuery实现多张图片上传的技巧，重点在于如何处理多次调用Controller的情况，针对商品保存中遇到的问题进行了分析。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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">      
	<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script> 
	<script src="http://code.jquery.com/jquery-migrate-1.1.1.js"></script> 
    <script src="js/uplo.js"></script>  
    <script>  
        $(function () {  
            //var btn = $("#Button1");  
  
            var btn = $("#Button1").uploadFile({  
                url: "uploadMulPic.action",  
                fileSuffixs: ["jpg", "png", "gif", "txt","jpeg"],  
                maximumFilesUpload: 8,//最大文件上传数  
                onComplete: function (msg) {  
                    $("#testdiv").append(msg + "<br/>");  
                },  
                onAllComplete: function () {  
                    alert("全部上传完成");  
                },  
                isGetFileSize: true,//是否获取上传文件大小，设置此项为true时，将在onChosen回调中返回文件fileSize和获取大小时的错误提示文本errorText  
                onChosen: function (file, obj, fileSize, errorText) {  
                    if (!errorText) {  
                        $("#file_size").text(file + "文件大小为：" + fileSize + "KB");  
                    } else {  
                        alert(errorText);  
                        return false;  
                    }  
                    return true;//返回false将取消当前选择的文件  
                },  
                perviewElementId: "fileList", //设置预览图片的元素id  
                perviewImgStyle: { width: '76px', height: '58px', border: '1px solid #ebebeb' }//设置预览图片的样式  
            });  
  
            var upload = btn.data("uploadFileData");  
  
            $("#files").click(function () {  
                upload.submitUpload();  
            });  
        });  
    </script>  

  </head>  
<body>  
       
        <div style="width: 500px; height: auto;">  
          
            <input id="Button1" type="button" value="选择文件" multiple/>  
            <input id="files" type="button" value="上传" submitPic();/>  
            <!-- <div style="width: 420px; height: 180px; overflow:auto;border:1px solid #C0C0C0;">-->  
            <div id="fileList" style="margin-top: 10px; padding-top:10px; font-size: 13px; width:400px">  
                  
        </div>  
            <!-- </div>-->  
        </div>  
        <br/>
		
	    <div id="file_size" style="width: 400px; border-bottom: 1px solid #C0C0C0;"></div>  
		<br/>
</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;
	}

会访问多次Controller，对于商品保存存在问题。