Herman 的个人博客
<input type="file" accept="image/png,image/jpeg,image/jpg,image/svg,image/gif"> <!--这里不使用image/*是因为其在部分浏览器中响应缓慢-->
<!--多张图片-->
<input type="file" accept="image/png,image/jpeg,image/jpg,image/svg,image/gif" multiple>
// 假定input元素id为inputFile
document.getElementById('inputFile').addEventListener('change', changeHandler, false);
function changeHandler (e) {
const files = e.target.files // 这就是用户上传的图片了，是个类数组对象
}
2种方式任你选择，最终是拿到图片的地址src
FileReader 实现了一种异步的读取机制。先通过 FileReader() 构造函数创建出一个 fileReader 实例，然后使用readerAsDataURL 读取文件并以数据URI形式保存中result属性中
Array.from(files).forEach(file => {
const reader = new FileReader()
reader.readAsDataURL(file)
reader.onload = function (e) {
const src = e.target.result // 这里就是图片的地址了
}
})
对象 URL 指的是引用保存在 File 或 Blob 中的数据 URL。使用对象 URL 的时候不用像 FIleReader 一样要先把数据读取到 JavaScript 中，他可以引用 内存中 URL 地址而使用
核心方法是 createObjectURL, 兼容写法：
function creatObjectURL(file) {
if (window.URL) {
return window.URL.createObjectURL(file);
} else if (window.webkitURL) {
return window.webkitURL.createObjectURL(file);
} else {
return null
}
}
Array.from(files).forEach(function(file) {
const src = createObjectURL(file) // 这里就是图片的地址了
})
blob:http://127.0.0.1:5500/aa2eacb2-de43-4287-a2a4-01e715178fbe)，但只有当你的页面关闭或者手动调用 revokeObejctURL 的时候才能释放内存，如果图片较多最好手动释放内存