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