file Input文件选择框,选择图片后展示在占位区

隐藏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>