JavaScript使用FileReader實(shí)現(xiàn)圖片上傳預(yù)覽效果
更新時(shí)間：2020年03月27日 16:16:46 作者：\面朝陽光/
這篇文章主要為大家詳細(xì)介紹了JavaScript使用FileReader實(shí)現(xiàn)圖片上傳預(yù)覽效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
FileReader是HTML5 File API的一部分。它實(shí)現(xiàn)了一種異步文件讀取機(jī)制。可以把FileReader想象為XMLHttpRequest，區(qū)別只是它讀取的是文件系統(tǒng)，而不是遠(yuǎn)程服務(wù)器。為了讀取文件中的數(shù)據(jù)，F(xiàn)ileReader提供了如下幾個(gè)方法。
- readAsText(file,encoding)：以純文本的方式讀取文件，將讀取到的文件保存到result屬性中。
- readAsDataURL(file)：讀取文件并將文件以數(shù)據(jù)URI的形式保存在result屬性中。
- readAsBinaryString(file)：讀取文件并將一個(gè)字符串保存在result屬性中，字符串中的每個(gè)字符表示一個(gè)字節(jié)。
- readAsArrayBuffer(file)：讀取文件并將一個(gè)包含文件內(nèi)容的ArrayBuffer保存在result屬性中。
- multiple 屬性表示支持多張圖片
<div id="wrapper"> <input id="fileUpload" type="file" multiple /><br /> <div id="image-holder"> </div> </div>
$("#fileUpload").on('change', function () {
//獲取上傳文件的數(shù)量
var countFiles = $(this)[0].files.length;
var imgPath = $(this)[0].value;
var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
var image_holder = $("#image-holder");
image_holder.empty();
if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") {
if (typeof (FileReader) != "undefined") {
// 循環(huán)所有要上傳的圖片
for (var i = 0; i < countFiles; i++) {
var reader = new FileReader();
reader.onload = function (e) {
$("<img />", {
"src": e.target.result,
"class": "thumb-image"
}).appendTo(image_holder);
}
image_holder.show();
reader.readAsDataURL($(this)[0].files[i]);
}
} else {
alert("你的瀏覽器不支持FileReader！");
}
} else {
alert("請(qǐng)選擇圖像文件。");
}
});
FileReader 可以支持 Internet Explorer 10+、FireFox,、Chrome 和Opera瀏覽器。
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
小程序點(diǎn)擊圖片實(shí)現(xiàn)自動(dòng)播放視頻
這篇文章主要為大家詳細(xì)介紹了小程序點(diǎn)擊圖片實(shí)現(xiàn)自動(dòng)播放視頻，停止上一個(gè)視頻播放，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-11-11
TypeScript聯(lián)合類型,交叉類型和類型保護(hù)
這篇文章主要介紹了TypeScript聯(lián)合類型,交叉類型和類型保護(hù)，聯(lián)合類型就是定義一些類型，定義的變量只需要滿足任意一種類型即可，交叉類型就是需要滿足所有類型，交叉類型使用，更多內(nèi)容我們來看看下面文章詳細(xì)內(nèi)容吧2021-12-12
JavaScript實(shí)現(xiàn)div的鼠標(biāo)拖拽效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)div的鼠標(biāo)拖拽效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11
如何實(shí)現(xiàn)修改密碼時(shí)密碼框顯示保存到cookie的密碼
修改密碼時(shí)密碼框顯示保存到cookie的密碼,只要在input框中加入AUTOCOMPLETE="OFF" 即可，感興趣的朋友可以了解下2013-12-12
微信小程序?qū)崿F(xiàn)提交input信息到后臺(tái)的方法示例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)提交input信息到后臺(tái)的方法,結(jié)合實(shí)例形式分析了微信小程序提交input信息到后臺(tái)相關(guān)事件響應(yīng)與數(shù)據(jù)處理操作技巧,需要的朋友可以參考下2019-01-01
JavaScript中Location.search處理使用方法
本文主要介紹了JavaScript中Location.search處理使用方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
JavaScript實(shí)現(xiàn)簡單計(jì)算器小功能
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡單計(jì)算器小功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
JS實(shí)現(xiàn)秒殺倒計(jì)時(shí)特效
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)秒殺倒計(jì)時(shí)特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-01-01
TypeScript轉(zhuǎn)javaScript的方法示例
本文主要介紹了TypeScript轉(zhuǎn)javaScript的方法示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
JavaScript Array對(duì)象擴(kuò)展indexOf()方法
JavaScript中Array對(duì)象沒有indexOf()方法，可通過下面的代碼擴(kuò)展,需要的朋友可以參考下2014-05-05