上傳圖片時本地先預覽如何實現
這次帶給大家上傳圖片時本地先預覽如何實現，實現上傳圖片時本地先預覽的注意事項有哪些，下面就是實戰案例，一起來看一下。
FileReader 物件允許Web應用程式非同步讀取儲存在使用者電腦上的檔案（或原始資料緩衝區）的內容,使用 File 或 Blob 物件指定要讀取的檔案或資料。以下透過本文為大家介紹JS中利用FileReader實現上傳圖片前本地預覽功能，需要的朋友參考下
引子
平時做圖片上傳預覽時如果沒有特殊的要求就直接先把圖片傳到後台去，成功之後拿到URL再渲染到頁面上，這樣做在圖片比較小的時候沒什麼問題，大一點的話就會比較慢才能看到預覽了，而且還產生了垃圾文件，所以比較好的是上傳之前先在本地預覽一下。
之前做項找插件的時候就知道純前端可以實現圖片本地預覽，可今天面試的時候被問到時竟然一臉懵逼，然後竟然無意中就在電腦桌面發現了實現的demo，然後根據demo查了一下API，稍微總結一下：
首先得拿到File物件
當用input標籤上傳圖片時event物件中會包含file物件的一個集合
event.target.files
核心是FileReader對象
根據MDN上的說法：
FileReader 物件允許網路應用程式非同步讀取儲存在使用者電腦上的檔案（或原始資料緩衝區）的內容,使用File 或Blob 物件指定要讀取的檔案或資料。
首先要作為建構子得到一個FileReader的實例物件
var freader = new FileReader();
利用readAsDataURL()方法讀取指定的內容
freader.readAsDataURL(file);
最後就是一個事件處理，相當於監控讀取進度，我們這裡是當讀取完成時渲染圖片，所以用onload
freader.onload = function(e) { console.log(e); myImg.setAttribute('src', e.target.result); }這裡架加載完成之後最終得到的是一個base64編碼的src地址，具體為什麼下次查清楚了再專門寫篇關於base64編碼的文章
完整代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form action="">
<input type="file" name="files" id="fileTog" accept="image/*" multiple="multiple" onchange="changImg(event)">
<img alt="暂无图片" id="myImg" src="" height="100px" width="100px">
</form>
<script>
function changImg(e){
var myImg = document.getElementById('myImg');
for (var i = 0; i < e.target.files.length; i++) {
var file = e.target.files[i];
console.log(file);
if (!(/^image\/.*$/i.test(file.type))) {
continue; //不是图片 就跳出这一次循环
}
//实例化FileReader API
var freader = new FileReader();
freader.readAsDataURL(file);
freader.onload = function(e) {
console.log(e);
myImg.setAttribute('src', e.target.result);
}
}
}
</script>
</body>
</html>相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
以上是上傳圖片時本地先預覽如何實現的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
PHP保存遠端圖片到本地後如何添加浮水印並保存？
Jul 11, 2023 pm 11:48 PM
PHP保存遠端圖片到本地後如何添加浮水印並保存？在PHP開發中，經常會遇到需要將遠端圖片儲存到本地的需求。而有時候，我們可能還需要在保存後的圖片上添加浮水印以保護版權或增加額外資訊。本文將介紹如何使用PHP保存遠端圖片到本地，並在儲存後的圖片上添加浮水印。一、儲存遠端圖片到本地首先，我們需要使用PHP的檔案操作函數將遠端圖片儲存到本地。下面是一個簡單的範例程式碼：&
汽水音樂本地音樂怎麼添加
Feb 23, 2024 pm 07:13 PM
汽水音樂本地音樂怎麼添加?汽水音樂APP中可以添加自己喜愛的本地音樂，但是多數的小伙伴不知道如何添加本地音樂，接下來就是小編為用戶帶來的汽水音樂本地音樂添加方法圖文教程，有興趣的用戶快來一起看看吧！汽水音樂使用教學汽水音樂本地音樂怎麼添加1、先打開汽水音樂APP，主頁最下方【音樂】功能專區點擊;2、之後進入到播放頁面，點擊右下角【三個點】圖標;3、最後下方展開功能欄，選擇其中【下載】按鈕即可新增至本機音樂。
Vue中如何實現圖片的滾動和縮圖預覽？
Aug 18, 2023 pm 01:51 PM
Vue中如何實現圖片的滾動和縮圖預覽？在Vue專案中，我們經常需要展示大量的圖片，並希望使用者能夠輕鬆瀏覽和預覽這些圖片。本文將介紹如何使用Vue元件實現圖片的捲動和縮圖預覽功能。首先，我們需要安裝並引入合適的Vue庫，以便於實現圖片的滾動和縮圖預覽。在本例中，我們將使用vue-awesome-swiper和vue-image-preview兩個函式庫來實
未來功能搶先用 Safari 技術預覽 173 版本釋出
Jul 02, 2023 pm 01:37 PM
Apple今日釋出了Safari技術預覽173版本，涵蓋部分可能於Safari17推出的功能。此版本適用於macOSSonoma測試版以及macOSVentura系統，有興趣的使用者可於官方網頁下載。 Safari技術預覽173版於設定中新增了功能標誌區塊，取代原先開發選單的實驗功能。該區塊可讓開發者快速搜尋特定功能，並以不同形式將「穩定」、「可供測試」、「預覽」或「開發人員」等狀態標示出來。重新設計的開發選單可以幫助創作者更容易找到關鍵工具，以便建立網頁、網頁應用程式、其他應用程式中的網頁內容、
Win11 apk安裝指南
Jan 03, 2024 pm 10:24 PM
眾所周知，微軟宣布了win11將能夠運行安卓應用程序，並且可以安裝本地apk，但是在更新win11之後用戶發現自己不知道怎麼安裝本地apk，其實是因為目前微軟還沒有為win11實裝這款功能，需要等待功能實裝才能使用。 win11怎麼安裝本地apk：1.根據微軟的說法，win11在實裝了這個功能之後，直接雙擊下載好的apk檔案就可以直接安裝了。 2.安裝完成後使用者也可以直接在系統中運作了。 3.雖然現在已經是正式版win11了，但微軟目前還沒有為win11實裝這個功能。 4.所以如果使用者想要在win11
如何在Vue表單處理中實現表單的圖片上傳與預覽
Aug 10, 2023 am 11:57 AM
如何在Vue表單處理中實現表單的圖片上傳與預覽引言：在現代Web應用程式中，表單處理是一個非常常見的需求。其中一個常見的需求是，允許使用者上傳圖片並在表單中預覽這些圖片。 Vue.js作為前端框架，為我們提供了豐富的工具和方法來實現這個需求。在本文中，我將向您展示如何在Vue表單處理中實現圖片上傳和預覽的功能。步驟一：定義Vue元件首先，我們要定義一個Vue組
哈醫大臨床藥學就業是否有前途(哈醫大臨床藥學就業前景怎麼樣)
Jan 02, 2024 pm 08:54 PM
哈醫大臨床藥學就業前景如何儘管全國就業情況不容樂觀，但藥科類畢業生仍有著良好的就業前景。整體來看，藥科類畢業生的供給量少於需求量，各醫藥公司和製藥廠是吸收這類畢業生的主要管道，製藥業對人才的需求也穩定成長。據介紹，近幾年藥物製劑、天然藥物化學等專業的研究生供需比甚至達到1∶10。臨床藥學專業就業方向：臨床醫學專業學生畢業後可在醫療衛生單位、醫學科研等部門從事醫療及預防、醫學科研等方面的工作。就業機會：醫藥代表、醫藥銷售代表、銷售代表、銷售經理、區域銷售經理、招募經理、產品經理、產品專員、護
如何透過Vue實現圖片的上傳和預覽？
Aug 19, 2023 pm 09:25 PM
如何透過Vue實現圖片的上傳和預覽？概述:在現代web應用程式中，圖片的上傳和預覽是一項常見的需求。 Vue作為一種流行的JavaScript框架，提供了方便的方式來實現這項功能。本文將介紹如何使用Vue來實現圖片的上傳和預覽，包括前端介面的設計以及後台介面的處理。前端介面設計:首先，我們需要設計一個前端介面來選擇並上傳圖片。在Vue中，我們可以使用<i
