JS中FileReader類實現(xiàn)文件上傳及時預(yù)覽功能
更新時間：2020年03月27日 17:21:50 作者：愛玲姐姐
這篇文章主要為大家詳細(xì)介紹了JS中FileReader類實現(xiàn)文件上傳及時預(yù)覽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
FileReader是H5瀏覽器才支持的JS類，如果不支持H5de瀏覽器可以使用FormData類實現(xiàn)文件的上傳預(yù)覽，使用可以參考我的下一篇博客：JS中FormData類實現(xiàn)文件上傳
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文件及時預(yù)覽功能</title>
</head>
<body>
<input type="file" id="file">
<img src="" id="preview">
<script>
var file = document.querySelector('#file');
var priview = document.querySelector("#preview");
// 監(jiān)聽文件上傳事件
file.onchange = function () {
var reader = new FileReader();
// 讀取文件
reader.readAsDataURL(this.files[0])
reader.onload = function () {
// 將文件讀取結(jié)果顯示到圖片中
priview.src = reader.result;
}
}
</script>
</body>
</html>
更多精彩內(nèi)容請參考專題《ajax上傳技術(shù)匯總》，《javascript文件上傳操作匯總》和《jQuery上傳操作匯總》進(jìn)行學(xué)習(xí)。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本篇文章主要介紹了詳解webpack性能優(yōu)化——DLL，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
js調(diào)用webservice構(gòu)造SOAP進(jìn)行身份驗證
這篇文章主要介紹了js調(diào)用webservice構(gòu)造SOAP進(jìn)行身份驗證的相關(guān)資料,需要的朋友可以參考下2016-04-04
JavaScript中幾種時間格式之間的簡單轉(zhuǎn)換
近期在練習(xí)或?qū)戫椖繒r經(jīng)常會遇到時間格式的轉(zhuǎn)換問題,今天我就來總結(jié)一下,這篇文章主要給大家介紹了關(guān)于JavaScript中幾種時間格式之間的簡單轉(zhuǎn)換,需要的朋友可以參考下2024-01-01
JavaScript 利用StringBuffer類提升+=拼接字符串效率
JavaScript 利用StringBuffer類提升+=拼接字符串效率，需要的朋友可以參考下。2009-11-11
基于Bootstrap模態(tài)對話框只加載一次 remote 數(shù)據(jù)的解決方法
下面小編就為大家?guī)硪黄贐ootstrap模態(tài)對話框只加載一次 remote 數(shù)據(jù)的解決方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
網(wǎng)站被黑的假象--ARP欺騙之頁面中加入一段js
網(wǎng)站被黑的假象--ARP欺騙之頁面中加入一段js...2007-05-05
本文為大家介紹下如何解決js中window.open彈出的是上次的緩存頁面的問題，下面有個不錯的示例，感興趣的額朋友可以參考下2013-12-12
微信小程序?qū)崿F(xiàn)注冊登錄功能(表單校驗、錯誤提示)
這篇文章主要介紹了微信小程序 實現(xiàn)注冊、登錄功能(表單校驗、錯誤提示),本文通過代碼給大家詳細(xì)介紹，需要的朋友可以參考下2019-12-12
這篇文章主要介紹了詳解Typescript里的This的使用方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
項目中常常需要使用到字體圖標(biāo),微信小程序中使用字體圖標(biāo)與在平常的web前端中類似但是又有區(qū)別,下面這篇文章主要給大家介紹了關(guān)于利用微信小程序制作屬于自己的Icon圖標(biāo)的相關(guān)資料,需要的朋友可以參考下2022-04-04