多文件上传，并生成缩略图

最新推荐文章于 2019-03-19 16:47:08 发布

weixin_34121304

最新推荐文章于 2019-03-19 16:47:08 发布

阅读量239

点赞数

文章标签： python 前端 javascript ViewUI

原文链接：https://my.oschina.net/liangxiao/blog/1836030

版权

2019独角兽企业重金招聘Python工程师标准>>>

前端代码

<html class="media">
 <head> 
  <meta charset="UTF-8" /> 
  <title></title> 
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> 
  <script type="text/javascript" src="./jquery.min.js"></script> 
 </head> 
 <body> 
  <ul class="thumbnail"></ul> 
  <input type="file" name="file1" class="webuploader" multiple="multiple" accept="" value="" /> 
  <div class="next">
   <a>提交</a>
  </div>
  
  <script>			

    var fileList;

	//上传图片选择文件改变后刷新预览图
	$(".webuploader").change(function(e) {
	   
		fileList = e.target.files || e.dataTransfer.files;
		var len = fileList.length;
		for (var i = 0; i < len ; i++) {            	
			reads(fileList[i]);
		}
	})  	

    /**
	生成缩略图
	*/
	function reads(file) {
		//定义一个文件阅读器     
		var reader = new FileReader();
		reader.readAsDataURL(file);
		reader.onload = function() {
			var oli = $("<li></li>");               
			var img = '<img src="' + reader.result + '" width="200px" height="200px"/>';
			oli.prepend(img);
			$(".thumbnail").prepend(oli);

		}
	}
        	
     //文件上传   	
	$(".next a").click(function() {
		var fordata = new FormData();
		var fileList = $('.webuploader')[0].files;
		var len = fileList.length;
		for (var i = 0; i < len; i++) {
			fordata.append("image" + i, fileList[i]);
		}

		fordata.append("param", "otherParam");
		
		$.ajax({
			type: "post",
			url: "action",
			async: true,
			data: fordata,
			processData: false,
			contentType: false,
			success: function(res) {
				console.log(res);
				return false;

			},
			error: function(res) {
				console.log(res);
				return false;
			}
		});
	})
	</script>  
 </body>
</html>

后端代码

MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;
	Map map = multiRequest.getFileMap();  
	Iterator iter =map.keySet().iterator();
	MultipartFile file = null;
	while (iter.hasNext()) {
		file = (MultipartFile)map.get(iter.next());
	}

转载于:https://my.oschina.net/liangxiao/blog/1836030