總結JS實現圖片預覽的方式介紹

這篇文章主要介紹了JS實現圖片預覽的兩種方式,非常不錯，具有參考借鑒價值，需要的朋友可以參考下

考慮到用戶體驗， 網頁的圖片上傳資料庫前，先預覽是很有必要的一個步驟，第一可以給用戶帶來安全感，第二防止圖片檔案有問題而提交到資料庫，佔用儲存資源。

那麼要實現預覽有兩種方式：一種是用window.URL.createObjectURl方法對選擇的圖片資料（可以勉強理解為input的value）產生一個blob物件路徑，第二種是用取得FileReader讀取器。

那麼無論那種方法，首先都得得到文件數據，得到文件數據是從files集合中獲取。

方式一：

程式碼如下：

##

<input type=file id="inp">
<script>
 inp.onchange=function(){
 var file=this.files[0] // 获取input上传的图片数据;
 var img=new Image() ;
 url=window.URL.createObjectURL(file) // 得到bolb对象路径，可当成普通的文件路径一样使用，赋值给src;
 img.src=url;
 //其实也可一句代码搞定，不需要声明那么多变量；img.scr=window.URL.cteateObejectURL(this.files[0]) ;
 然后把img添加到页面就实现预览了
 }
<script>

方式二：

用FileRader物件

讀取檔案.可分為四個步驟；1、建立FileReader物件；2、呼叫readAsDataURL方法讀取檔案；3、呼叫onload事件監聽，我們一需要拿到完整的數據，但我們又不知道檔案何時讀完？ ，所以需要第三步驟監聽；4、透過FileRader物件r的result屬性拿到讀取結果。

程式碼如下：

<input type=file id="inp">
<input type=file id="inp">
<script>
inp.onchange=function(){
 var read=new FileReader() // 创建FileReader对像;
 read.readAsDataURL(this.files[0]) // 调用readAsDataURL方法读取文件;
  read.onload=function(){
   url=read.result // 拿到读取结果;
   var img=new Image();
   img.src=url;
   p.appendChild(img);
 }
 }

以上是總結JS實現圖片預覽的方式介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！