隐藏input,使用div可以自定义点击按钮的样式,在div的click事件中出发文件选择input的click事件选择文件,然后在input的change事件中拿到e.target.files[0],是File对象,其中file.name就是文件名,然后使用FileReader.readAsDataURL(File|Blob),在其onload事件中通过reader.result获取到dataUrl
<input type="file" name="" accpet="image/*" id="file" class="hide" />
<div class="add-btn" id="add-btn">+</div>
<img id="img" src="" alt="" class="img-placeholrder" />
<script>
const btnDom = document.getElementById("btn");
const fileDom = document.getElementById("file");
const addBtnDom = document.getElementById("add-btn");
const filenameDom = document.querySelector("#filename");
const imgDom = document.querySelector("#img");
let file = null;
// 文件选择后
fileDom.addEventListener("change", onFileChange);
addBtnDom.addEventListener("click", () => {
fileDom.click();
});
btnDom.addEventListener("click", () => {
download(file);
});
async function onFileChange(e) {
console.log(e.target.files);
filenameDom.innerHTML = e.target.files[0].name;
// 获取到文件对象file
file = e.target.files[0];
const url = await fileToDataUrl(file);
imgDom.src = url;
}
// 将file对象转成DataURL,DataURL可以作为img.src的值
function fileToDataUrl(file) {
return new Promise(resolve => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function () {
resolve(reader.result);
};
});
}
// 通过file对象(Blob对象)所选择的文件
function download(file) {
// 创建objectURL
const url = URL.createObjectURL(file);
// 创建a标签,设置download(文件名),设置a.href=objectURl,调用a.click()
const a = document.createElement("a");
a.download = file.name;
a.href = url;
a.click();
URL.revokeObjectURL(url);
}
</script>