单图片文件上传预览与多图片文件上传预览

单图片文件上传预览与多图片文件上传预览

html部分

	<!-- 单选 -->
	<!-- <input id="edit_img" value="图片选择" accept="image/*" capture="camera" style="" type="file" class="sr-only"> -->
	<!-- 多选 -->
	<input id="edit_img" value="图片选择" multiple="multiple" accept="image/*" style="" type="file" class="sr-only">
	<div id="pirview">
		
	</div>

因为仔细想想有的时候多选也不好，比如图片量太大的时候，浏览器可能会崩溃，所以我之前一直用的单选，直到我闲下来，准备研究一下多选时才遇到了一个问题

上面是一部分代码，我在上面代码中在两个地方都打印一次图片文件的名称，在浏览器中是下面的样子

可以看到，三个图片的文件都是最后一个图片文件的名称，研究了几个小时，发现不用for循环，用jQuery的$.each循环可以解决这个问题
下面是完整js代码：

		var src
		var imgName_s = []
		//  这一块是 图片压缩上传
		function compress(ipt_id){
			var fileObj = document.getElementById(ipt_id).files;  // 图片文件对象
			// 判断是否是图像文件
			if(fileObj == undefined){
				
			}else{
				// 使用$.each循环
				$.each(fileObj,function(i,val){
					var type = val.type;
					var imgName = val.name;
					console.log(val)
					if (/^image\/\w+$/.test(val.type)) {
						var reader = new FileReader()
						reader.onload = function(e){
							baseSize(e.target.result,type,imgName)
						}
						reader.readAsDataURL(val)
					} else {
						window.alert('请选择一个图像文件！');
					}
				})
			}
		}
		function baseSize(tag_base,type,imgName){
			var image = new Image() 
			image.src = tag_base    
			image.onload = function() {    
				var  canvas = document.createElement('canvas'),
				context = canvas.getContext('2d'),   
				imageWidth = image.width / 2,    
				imageHeight = image.height / 2,  
				data = ''    
				canvas.width = imageWidth    
				canvas.height = imageHeight   
				context.drawImage(image, 0, 0, imageWidth, imageHeight)
				
				data = canvas.toDataURL(type)
				// console.log(data)
				// 压缩后的图片最大只能为500k
				var tag="base64,";
				var baseStr = data.substring(data.indexOf(tag)+tag.length);
				var eqTagIndex = baseStr.indexOf('=')
				baseStr = eqTagIndex != -1 ? baseStr.substring(0,eqTagIndex) : baseStr;
				var strLen = baseStr.length
				var filesz = strLen - (strLen / 8) * 2
				// console.log(data,filesz)
				// alert(filesz)
				if(filesz > 512000){
					baseSize(data)
				}else{
					//将压缩后的图片显示到页面上的img标签
					src = data
					imgView(src,imgName)
				}
			}
		}
		
		function imgView(src,imgName){
			var html = $('#pirview').html()
			// console.log(src)
			html = html + '<div><a href="javascript:;">删除&times;</a><strong>'+imgName+'</strong><img style="width: 100px; height: 100px;" src="'+src+'" ><input class="hid" type="hidden" name="img[]" value="'+src+'" /><div>'
			$('#pirview').html(html)
			delet()
		}
		// 删除图片
		function delet(){
			$('a').click(function(){
				$(this).parent().remove()
				$('#edit_img').val('')
			})
		}
		$(function(){
			$('#edit_img').change(function(){
				var ipt_id = $('#edit_img').attr('id')
				compress(ipt_id)
			})
		})

修改代码后再去浏览器看如下

可以看到三个图片的名称已经不重复了