使用input的file進行上傳進行預覽

時間 2019-12-13

標籤使用 input file 進行上傳預覽简体版

原文原文鏈接

在使用file上傳文件的時候，想到了圖片預覽的功能，而後查詢了一些資料，一種是須要後端配合，將數據變成base64或者buff等數據傳給後端而後調取接口進行顯示，可是這種須要後端的配合和網絡請求，感受不如在純前端操做方便的多，前端

話很少說，上代碼：web

<body>
<input type="file" class="inputFile">
<img class="showImg" alt="show-img"/>
</body>
<script>
  //改變上傳圖片的路徑以便本地能夠進行使用
  function getFileURL(file) {
    let getUrl = null;
    if (window.createObjectURL !== undefined) { // basic
      getUrl = window.createObjectURL(file);
    } else if (window.URL !== undefined) { // mozilla(firefox)
      getUrl = window.URL.createObjectURL(file);
    } else if (window.webkitURL !== undefined) { // webkit or chrome
      getUrl = window.webkitURL.createObjectURL(file);
    }
    return getUrl;
  }

  let fileElement = document.querySelector(".inputFile");//得到file的dom;
  let imgElement = document.querySelector(".showImg");//得到img的dom
  fileElement.onchange = function () {
    let url = getFileURL(fileElement.files[0]);//吧當前的files[0]傳遞進函數
    imgElement.setAttribute("src", url);//設置圖片的src
  };

</script>

效果如圖所示：chrome

相關標籤/搜索