<!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>
