使用方法：

1、head引入css文件

<link rel="stylesheet" type="text/css" href="css/main.css" />

2、head引入js文件

<script src="js/jquery.min.js"></script>
<script src="js/m.js"></script>

3、body引入HTML代碼

<div class="inner">

	<div class="problem">
		<div class="custom_img">
			<div class="custom_img_top">
				<p>圖片說明</p>
				<p><span class="upload_img_length">0</span>/3</p>
			</div>
			
			<!--點擊上傳圖片 觸發下面的div 點擊事件-->
			<div class="upload_img_wrap">
				<div id="imgBox"></div>
				<img class="upload_img" data-id="1" src="img/upload_img.png" />
				<img style="display:none" class="upload_img" data-id="2" src="img/upload_img.png" />
				<img style="display:none" class="upload_img" data-id="3" src="img/upload_img.png" />
			</div>
			<div style="display: none;width: 100%;height: 100vh;position: relative;">
				<form id="upBox" class="upload_form" action="" method="post" enctype="multipart/form-data">
					<div style="display: none;" id="inputBox">
						<input type="file" name="image[]" data-id="1" title="請選擇圖片" id="file1" accept="image/png,image/jpg,image/gif,image/JPEG" />
						<input type="file" name="image[]" data-id="2" title="請選擇圖片" id="file2" accept="image/png,image/jpg,image/gif,image/JPEG" />
						<input type="file" name="image[]" data-id="3" title="請選擇圖片" id="file3" accept="image/png,image/jpg,image/gif,image/JPEG" /> 點擊選擇圖片
					</div>
					<input style="display:none" type="submit" id="sub" />
				</form>
			</div>
		</div>
		<button class="custom_sub" id="btn">意見反饋</button>
	</div>
</div>

<script>

var imgNum = 0;
$(".upload_img_wrap .upload_img").bind("click", function(ev) {
	//console.log(ev.currentTarget.dataset.id)
	var index = ev.currentTarget.dataset.id;
	var that = this;
	if(index == 1) {
		$("#file1").click();
		$("#file1").unbind().change(function(e) {
			var index = e.currentTarget.dataset.id;
			if($('#file').val() == '') {
				return false;
			}
			$(that).hide();
			var filePath = $(this).val();
			changeImg(e, filePath, index);
			
			imgNum++;
			if(imgNum<3){
				$(".upload_img").eq(1).show();
			}
			$(".upload_img_length").html(imgNum);
		})
	} else if(index == 2) {
		$("#file2").click();
		$("#file2").unbind().change(function(e) {
			var index = e.currentTarget.dataset.id;
			if($('#file').val() == '') {
				return false;
			}
			$(that).hide();
			var filePath = $(this).val();
			changeImg(e, filePath, index);
			
			imgNum++;
			if(imgNum<3){
				$(".upload_img").eq(2).show();
			}
			$(".upload_img_length").html(imgNum);
		})
	} else if(index == 3) {
		$("#file3").click();
		$("#file3").unbind().change(function(e) {
			var index = e.currentTarget.dataset.id;
			if($('#file').val() == '') {
				return false;
			}
			var filePath = $(this).val();
			changeImg(e, filePath, index);
			$(that).hide();
			imgNum++;
			$(".upload_img_length").html(imgNum);
		})
	}
})

function changeImg(e, filePath, index) {
	fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase();
	//檢查后綴名
	if(!fileFormat.match(/.png|.jpg|.jpeg/)) {
		showError('文件格式必須為：png/jpg/jpeg');
		return;
	}
	//獲取并記錄圖片的base64編碼
	var reader = new FileReader();
	reader.readAsDataURL(e.target.files[0]);
	reader.onloadend = function() {
		// 圖片的 base64 格式, 可以直接當成 img 的 src 屬性值        
		var dataURL = reader.result;
		// console.log(dataURL)
		// 顯示圖片
		$("#imgBox").html($("#imgBox").html() + '<div class="imgContainer" data-index=' + index + '><img   src=' + dataURL + ' onclick="imgDisplay(this)"><img onclick="removeImg(this,' + index + ')"  class="imgDelete" src="img/del_img.png" /></div>');
	};

}

function removeImg(obj, index) {
	for(var i = 0; i < $(".imgContainer").length; i++) {
		if($(".imgContainer").eq(i).attr("data-index") == index) {
			$(".imgContainer").eq(i).remove();
		}
	}
	for(var i = 0; i < $(".upload_img").length; i++) {
		$(".upload_img").eq(i).hide();
		if($(".upload_img").eq(i).attr("data-id") == index) {
			console.log($(".upload_img").eq(i).attr("data-id"))
			$(".upload_img").eq(i).show();
		}
	}
	imgNum--;
	$(".upload_img_length").html(imgNum);
}


function imgDisplay(obj) {
	var src = $(obj).attr("src");
	var imgHtml = '<div style="width: 100%;height: 100vh;overflow: auto;background: rgba(0,0,0,0.5);text-align: center;position: fixed;top: 0;left: 0;z-index: 1000;display: flex;justify-content: center;    align-items: center;"><img src=' + src + ' style="margin-top: 100px;width: 96%;margin-bottom: 100px;"/><p style="font-size: 50px;position: fixed;top: 30px;right: 30px;color: white;cursor: pointer;" onclick="closePicture(this)">×</p></div>'
	$('body').append(imgHtml);
}

function closePicture(obj) {
	$(obj).parent("div").remove();
}
</script>