示例代码
<!-- multiple 多选参数 -->
<!-- accept='.png,.jpeg 限制上传类型' -->
<input type="file" id="file" />
<img src="" alt="" id="img" />
<h4 id="h4"></h4>
<script>
const img = document.getElementById("img");
const h4 = document.getElementById("h4");
const inp = document.getElementById("file");
inp.addEventListener("change", (e) => {
// 获取文件File对象数组
const { files } = e.target;
console.log("files", files);
const file = files[0];
const { type } = file;
// 图片类型，获取路径
if (type == "image/png" || type == "image/jpeg") {
getImgUrl(file);
} else if (
type == "text/x-sh" ||
type == "text/plain" ||
type == "text/html"
) {
// sh 脚本
// text 文本
// html
getTextData(file);
}
// 获取文件路径
getFileUrl(file);
});
// 获取 上传图片的 data：xxx 路径
const getImgUrl = (file) => {
// 创建 FileReader 对象
const fileReader = new FileReader();
// 转换为 data:xxx格式的url
fileReader.readAsDataURL(file);
fileReader.onload = () => {
const result = fileReader.result;
img.src = result;
};
};
// 获取文本的内容
const getTextData = (file) => {
const fileReader = new FileReader();
fileReader.readAsText(file);
fileReader.onload = () => {
const result = fileReader.result;
h4.innerHTML = result;
};
};
// 创建文件路径
const getFileUrl = (blob) => {
//blob参数是一个File对象或者Blob对象. =====>常用来下载文件
const url = window.URL.createObjectURL(blob);
// 代码会对二进制数据生成一个 URL ，这个 URL 可以放置于任何通常可以放置 URL 的地方，比如 img 标签的 src 属性。需要注意的是，即使是同样的二进制数据，每调用一次 URL.createObjectURL 方法，就会得到一个不一样的 URL。
// 这个 URL 的存在时间，等同于网页的存在时间，一旦网页刷新或卸载，这个 URL 就失效。（File 和 Blob 又何尝不是这样呢）除此之外，也可以手动调用 URL.revokeObjectURL 方法，使 URL 失效。
console.log("url", url);
// 释放URL对象资源
window.URL.revokeObjectURL(url);
// 当不再需要这些 URL 对象时，每个对象必须通过调用 URL.revokeObjectURL() 方法来释放。浏览器会在文档退出的时候自动释放它们，但是为了获得最佳性能和内存使用状况，你应该在安全的时机主动释放掉它们。
};
</script>
参考：
