input type="file" 多图片上传并且进行预览

直接上代码了，，简单粗暴点。

首先大家需要知道，

accept 属性只能与

<input type="file">

配合使用。它规定能够通过文件上传进行提交的文件类型。

如果不限制图像的格式，可以写为：

accept="image/*

"

html代码

js代码

<script type="text/javascript">
		function imgPreview(preview) {
			// 获取目前上传的文件
			var file = preview.files[0];
			console.log(file);
			

			// 设置上传图片的大小
			if (file.size > 1024 * 1024 * 2) {
				alert('图片大小不能超过 2MB!');
				return false;
			}

			// 获取 window 的 URL    
			var URL = window.URL || window.webkitURL;
			// 通过 file 生成目标 url
			var imgURL = URL.createObjectURL(file);
			// 用这个 URL 产生一个 <img> 将其显示出来
			var img = document.createElement("img");
			img.src = imgURL;
			img.width = 75;
			img.height = 50;
			img.style.display = 'block';
			img.style.float = "left";
			img.style.marginRight = '5px';
			document.getElementById("imgBox").appendChild(img);
			document.getElementById("file").value = "";

		}
	</script>
           

第二种方法 利用html5的FileReader()读取文件，html代码不变

<script type="text/javascript">
		function imgPreview(preview) {
			// 获取目前上传的文件
			var file = preview.files[0];

			// 设置上传图片的大小
			if (file.size > 1024 * 1024 * 2) {
				alert('图片大小不能超过 2MB!');
				return false;
			}

			if (window.FileReader) {
				//通过FileReader构造函数实例化对象
				var fr = new FileReader();
				fr.onloadend = function (e) {
					var img = document.createElement("img");
					img.src = e.target.result;
					img.width = 75;
					img.height = 50;
					img.style.display = 'block';
					img.style.float = "left";
					img.style.marginRight = '5px';
					document.getElementById("imgBox").appendChild(img);
				};
				fr.readAsDataURL(file);
			}

			//FileReader实践中的的一个问题,如果不清空的话上传文件的话如果是相同的文件无法调用  fr.onloadend
			document.getElementById("file").value = "";
		}
	</script>