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

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

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

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

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

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

<input>

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

HTML程式碼

  

    
  
  

    <input>
  

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内容改变的时候触发事件
    $(&#39;#filed&#39;).change(function(){
    //获取input file的files文件数组;
    //$(&#39;#filed&#39;)获取的是jQuery对象，.get(0)转为原生对象;
    //这边默认只能选一个，但是存放形式仍然是数组，所以取第一个元素使用[0];
      var file = $(&#39;#filed&#39;).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编码格式的地址
        $(&#39;#imgshow&#39;).get(0).src = e.target.result;
      }
    })
</script>

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

相關推薦：

file控制選擇圖片實例教學

HTML5 Plus 實作手機APP拍照或相簿選擇圖片上傳功能的實例代碼

input選擇圖片後不上傳及時顯示

以上是input type=file 選擇圖片並且實現預覽效果詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！