JS中FileReader類實(shí)現(xiàn)文件上傳及時(shí)預(yù)覽功能
更新時(shí)間：2020年03月27日 17:21:50 作者：愛(ài)玲姐姐
這篇文章主要為大家詳細(xì)介紹了JS中FileReader類實(shí)現(xiàn)文件上傳及時(shí)預(yù)覽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
FileReader是H5瀏覽器才支持的JS類，如果不支持H5de瀏覽器可以使用FormData類實(shí)現(xiàn)文件的上傳預(yù)覽，使用可以參考我的下一篇博客：JS中FormData類實(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)參考專題《ajax上傳技術(shù)匯總》，《javascript文件上傳操作匯總》和《jQuery上傳操作匯總》進(jìn)行學(xué)習(xí)。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
正則中的回溯定義與用法分析【JS與java實(shí)現(xiàn)】
這篇文章主要介紹了正則中的回溯定義與用法,結(jié)合實(shí)例形式分析了回溯的概念、功能并提供了JS與java實(shí)現(xiàn)方法,需要的朋友可以參考下2016-12-12
在?JavaScript?中使用變量或常量之前，必須先進(jìn)行聲明，這篇文章主要介紹了JavaScript中的變量聲明與賦值,本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-08-08
uniapp 對(duì)于scroll-view滑動(dòng)和頁(yè)面滑動(dòng)的聯(lián)動(dòng)處理方法
這篇文章主要介紹了uniapp 對(duì)于scroll-view滑動(dòng)和頁(yè)面滑動(dòng)的聯(lián)動(dòng)處理方法,本文通過(guò)示例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2024-08-08
JS監(jiān)聽(tīng)滾動(dòng)和id自動(dòng)定位滾動(dòng)
這篇文章主要為大家詳細(xì)介紹了JS監(jiān)聽(tīng)滾動(dòng)和id自動(dòng)定位滾動(dòng)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-12-12
這篇文章主要介紹了JavaScript事件委托的用法,以實(shí)例形式分析了javascript事件委托的實(shí)現(xiàn)方法,需要的朋友可以參考下2015-05-05
JavaScript常見(jiàn)數(shù)組方法之如何轉(zhuǎn)置矩陣
這篇文章主要給大家介紹了關(guān)于JavaScript常見(jiàn)數(shù)組方法之如何轉(zhuǎn)置矩陣的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-03-03
javascript中call apply 的應(yīng)用場(chǎng)景
call, apply都屬于Function.prototype的一個(gè)方法,它是JavaScript引擎內(nèi)在實(shí)現(xiàn)的,因?yàn)閷儆贔unction.prototype,所以每個(gè)Function對(duì)象實(shí)例,也就是每個(gè)方法都有call, apply屬性.2015-04-04
javascript游戲開(kāi)發(fā)之《三國(guó)志曹操傳》零部件開(kāi)發(fā)(四)用地圖塊拼成大地圖
小時(shí)候我們玩過(guò)拼圖游戲，是用自己的手去拼的。今天我們來(lái)研究研究用javascript來(lái)拼圖感興趣的朋友可以了解下,希望本文對(duì)你有所幫助2013-01-01
JavaScript實(shí)現(xiàn)重力下落與彈性效果的方法分析
這篇文章主要介紹了JavaScript實(shí)現(xiàn)重力下落與彈性效果的方法,結(jié)合實(shí)例形式分析了javascript重力下落及彈性效果的原理與具體實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-12-12
這篇文章主要介紹了JavaScript定時(shí)器原理,setTimeout()方法用于設(shè)置一個(gè)定時(shí)器，該定時(shí)器在定時(shí)器到期后執(zhí)行調(diào)用函數(shù),文章圍繞JavaScript定時(shí)器相關(guān)資料展開(kāi)以下內(nèi)容,需要的朋友可以參考一下2021-12-12