快捷導(dǎo)航

基于JavaScript實現(xiàn)本地圖片預(yù)覽

更新時間：2017年02月08日 16:59:46 作者：司馬懿字仲達(dá)

這篇文章主要為大家詳細(xì)介紹了基于JavaScript實現(xiàn)本地圖片預(yù)覽的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了js本地圖片預(yù)覽的具體代碼，供大家參考，具體內(nèi)容如下

<!DOCTYPE html>
<!--
<!DOCTYPE html>一定要放在第一行,除非上面都是空行

在HTML規(guī)范中,單獨存在的標(biāo)簽是不需要使用/來自我關(guān)閉的,比如<br>,<input>,<hr>等等這樣的標(biāo)簽都是符合語法的.
在XHTML規(guī)范中,單獨存在的標(biāo)簽要按照XML的語法規(guī)則進(jìn)行自我關(guān)閉,上面三個標(biāo)簽就應(yīng)寫成<br />,<input />,<hr />
-->
<html>
  <head>
    <meta charset="utf8">
    <style>
      input[type=radio] {
        /* 按鈕與文字對齊 */
        vertical-align:middle;
      }
      input[type=file] {
        display: block;
      }
      #img {
        width: 200px;
        height: 200px;
        border: 1px solid black;
        margin-top: 10px;
      }
    </style>
  </head>
  <body>
    <input type="radio" name="previewType" value="fileReader" onChange="onPreviewTypeChange()">fileReader
    <input type="radio" name="previewType" value="createURL" onChange="onPreviewTypeChange()">createURL
    <hr>
    <input type="file" id="imgFile" onChange="imgChange()" value="test.jpg">
    <img id="img">
    <script>
      var previewTypes = document.getElementsByName("previewType");
      var imgFile = document.getElementById("imgFile");
      var img = document.getElementById("img");

      function getPreviewType() {
        for(var i=0; i<previewTypes.length; i++) {
          if(previewTypes[i].checked) {
            return previewTypes[i].value;
          }
        }
      }

      function onPreviewTypeChange() {
        imgChange(event.target.value);
      }

      function imgChange(type) {
        img.src = "";
        var files = imgFile.files;
        console.log(files);
        if(!files || files.length === 0) {
          return;
        }
        var file = files[0];
        if(!type) {
          type = getPreviewType();
          if(!type) {
            return;
          }
        }
        switch(type) {
          case "fileReader":
            var fr = new FileReader();
            fr.onload = function(progressEvent) {
              console.log(progressEvent);
              img.src = progressEvent.target.result;
            }
            fr.readAsDataURL(file);
            break;
          case "createURL":
            img.onload = function() {
              //釋放一個之前通過調(diào)用 URL.createObjectURL() 創(chuàng)建的已經(jīng)存在的 URL 對象。
              URL.revokeObjectURL(img.src);
            }
            img.src = URL.createObjectURL(file);
            break;
        }
      }
    </script>
  </body>
</html>

fileReader.readAsDataURL