<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<body>
<!--accept可以控制選擇的文件類型-->
<input type="file" hidden multiple accept="image/*">
<button>點擊上傳圖片</button>
<div></div>
</body>
</html>
<script>
$('button').click(function () {
$('input').click() // 通過手動調用input的點擊，可以任意定義UI
})
$('input').change(function (e) { // 通過change事件可以獲取到選中的文件
// 一：第一種獲取地址回顯
// 如果需要回顯功能則可以通過手動創建img標簽的形式或者通過拼接字符串
for(var i = 0; i < e.target.files.length; i++) { // 如果需要對文件大小類型進行驗證，可以將e.target.files[i]打印出來，對其中的鍵值進行邏輯判斷
var img_url = window.URL.createObjectURL(e.target.files[i]) // 通過該方法可以獲取到文件的路徑，可以用於圖片回顯
console.log(img_url) // blob:http://localhost:8080/557d2808-c433-4c2c-aa87-dbe13222a572
var html = '<img src="'+ img_url +'" width="100px" height="100px"/> ';
$('div').append(html)
}
// 如需要添加刪除功能，則點擊對應刪除圖標，獲取其下標，刪除對應img標簽即可
// 二：第二種轉成base64回顯
for (let i = 0; i < e.target.files.length; i++) {
var reader = new FileReader();
var file = e.target.files[i]
reader.readAsDataURL(file); // 轉碼
reader.onload = function (el) { // 在此處可以循環獲取轉成的base64為編碼（異步）
var html = '<img src="'+ el.target.result +'" width="100px" height="100px"/> ';
$('div').append(html)
}
}
})
</script>
