首頁 >web前端 >js教程 >input type=file 選擇圖片並且實現預覽效果詳解

input type=file 選擇圖片並且實現預覽效果詳解

小云云原創: 2018-01-02 16:00:294166瀏覽

本文主要為大家帶來一篇input type=file 選擇圖片並且實現預覽效果的實例。小編覺得蠻不錯的，現在就分享給大家，也給大家做個參考。一起跟著小編過來看看吧，希望能幫助大家。

透過標籤，給它指定type類型為file，可提供檔案上傳；

accept：可選擇上傳類型，如：只要傳遞圖片，且不限制圖片格式，為image/*；

multiple：規定是否可以選擇多個檔案；

規定只可上傳圖片，且可以選擇多個檔案

<input type="file" accept="image/*" multiple="multiple"/>

當然，直接一個input type=file 只能選擇上傳的檔案/資源，如果我們需要在選擇圖片之後，在目前頁面實現預覽效果，那麼我們可以如下方式來實作

HTML程式碼

<body>
  <p id="box">
    <img id="imgshow" src="" alt=""/>
  </p>
  <p id="pox">
    <input id="filed" type="file" accept="image/*"/>
  </p>
</body>

css樣式檔

<style>
    #box{
      width: 300px;
      height: 300px;
      border: 2px solid #858585;
    }
    #imgshow{
      width: 100%;
      height: 100%;
    }
    #pox{
      width: 70px;
      height: 24px;
      overflow: hidden;
    }
  </style>

JS程式碼

<script>
    //在input file内容改变的时候触发事件
    $('#filed').change(function(){
    //获取input file的files文件数组;
    //$('#filed')获取的是jQuery对象，.get(0)转为原生对象;
    //这边默认只能选一个，但是存放形式仍然是数组，所以取第一个元素使用[0];
      var file = $('#filed').get(0).files[0];
    //创建用来读取此文件的对象
      var reader = new FileReader();
    //使用该对象读取file文件
      reader.readAsDataURL(file);
    //读取文件成功后执行的方法函数
      reader.onload=function(e){
    //读取成功后返回的一个参数e，整个的一个进度事件
        console.log(e);
    //选择所要显示图片的img，要赋值给img的src就是e中target下result里面
    //的base64编码格式的地址
        $('#imgshow').get(0).src = e.target.result;
      }
    })
</script>

*以上js程式碼中有使用到jQuery，因此要引入jQuery檔案

input type=file 選擇圖片並且實現預覽效果詳解

相關文章