效果預覽：
每一行都有註釋，宛如媽媽的嘮叨，再也不怕看不懂代碼了~~~~
想知道URL.createObjectURL()詳細內容點這裏
js部分：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>圖片上傳功能</title>
</head>
<body>
<!-- accept 爲設置當前選取文件類型 若不限制圖片文件類型可設置爲 accept="image/*"-->
<input type="file" id="fileUpload" accept="image/png,image/jpeg,image/jpg" />
<div id="list-view"></div>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script>
//建立空數組，用於存放獲取的文件路徑及相關的判斷操作
var arr = [];
//當input的值發生變化就觸發事件（利用值的變化判斷是否選取了文件）
$('#fileUpload').change(function() {
//限制選取文件的最大數量爲4
if (arr.length > 3) {
//將input設置爲禁用狀態
$('#fileUpload').attr('disabled','disabled');
}
//獲取選取的文件路徑並解析爲可渲染的路徑
var imgSrc = URL.createObjectURL(this.files[0]);
//將路徑添加至img標籤中
var template = '<img src="' + imgSrc + '" style="width: 50px">';
//將img標籤插入元素中，在頁面顯示
$('#list-view').append(template);
//將路徑插入數組中，用於已選取文件數量判斷
arr.push(imgSrc);
});
//爲防止ajax動態添加數據無法綁定事件，故用body添加on事件給子元素添加，避開這個問題
$('body').on('click','img',function(){
//獲取當前點擊的元素下標（其下標與數組下標是一致的）
var i = $(this).index();
//判斷如果當前選取文件數量未超過4張而設置input爲非禁用狀態
if (arr.length < 5) {
//清除input禁用狀態
$('#fileUpload').removeAttr("disabled");
}
//根據點擊刪除元素的下標，刪除數組下標（img標籤只是負責渲染，但數據源是arr數組，判斷都是依靠他，所以必須刪除數組裏面的數據）
arr.splice(i,i);
//當前點擊元素下標爲0（即第一個時，清空數組）
if (i == 0) {
arr.splice(0,1);
}
//刪除當前點擊元素
$(this).remove();
});
</script>
</body>
</html>