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