前端读取文件图片信息流；js读取图片不同信息流；js读取图片；前端就js读取二进制数据；前端js读取文件流使用FileReader对象的readAsDataURL方法来读取图像文件；
生活随笔
收集整理的這篇文章主要介紹了
前端读取文件图片信息流；js读取图片不同信息流；js读取图片；前端就js读取二进制数据；前端js读取文件流使用FileReader对象的readAsDataURL方法来读取图像文件；
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
原文鏈接
FileReader來把文件讀入內(nèi)存，并且讀取文件中的數(shù)據(jù)。
readAsDataURL方法可以在瀏覽器主線程中異步訪問文件系統(tǒng)，讀取文件中的數(shù)據(jù)，且讀取后 result 為 DataURL,
DataURL 可直接 賦值給 img.src。
FileReader 的 result 可以有 3 種形式, 它取決于具體調(diào)用讀取的方法：
–1.1調(diào)用 reader. readAsArrayBuffer, 則 result 為 ArrayBuffer 對象 調(diào)用 reader.
–1.2 readAsText, 則 result 為 字符串 調(diào)用reader. readAsDataURL, 則 result 為
–1.3DataURL, DataURL 可直接 賦值給 img.src 調(diào)試發(fā)現(xiàn) DataURL 是帶頭信息(/image) 的
base64(可能是) 編碼的字符串
以下代碼可直接復制：
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>Title</title> </head><body><p><label>請選擇一個文件：</label><input type="file" id="file" /><input type="button" value="讀取圖像" onclick="readAsDataURL()" /><input type="button" value="讀取二進制數(shù)據(jù)" onclick="readAsBinaryString()" /><input type="button" value="讀取文本文件" onclick="readAsText()" /></p><div id="result" name="result"></div><script type="text/javascript">var result = document.getElementById("result");var file = document.getElementById("file");//判斷瀏覽器是否支持FileReader接口if (typeof FileReader == 'undefined') {result.InnerHTML = "<p>你的瀏覽器不支持FileReader接口！</p>";//使選擇控件不可操作file.setAttribute("disabled", "disabled");}function readAsDataURL() {//檢驗是否為圖像文件var file = document.getElementById("file").files[0];if (!/image\/\w+/.test(file.type)) {alert("看清楚，這個需要圖片！");return false;}var reader = new FileReader();//將文件以Data URL形式讀入頁面reader.readAsDataURL(file);// reader.onload = function (e) {// var result = document.getElementById("result");// //顯示文件// result.innerHTML = '<img src="' + this.result + '" alt="" />';// }reader.onload = function (e) {result.innerHTML = '' //清除其他內(nèi)容var txt = e.target.result;var img = document.createElement("img");img.src = txt; //將圖片base64字符串賦值給img的srcdocument.getElementById("result").appendChild(img);console.log(document.getElementById("result"), img);};}function readAsBinaryString() {var file = document.getElementById("file").files[0];var reader = new FileReader();//將文件以二進制形式讀入頁面reader.readAsBinaryString(file);reader.onload = function (f) {var result = document.getElementById("result");//顯示文件result.innerHTML = this.result;}}function readAsText() {var file = document.getElementById("file").files[0];var reader = new FileReader();//將文件以文本形式讀入頁面reader.readAsText(file);reader.onload = function (f) {var result = document.getElementById("result");//顯示文件console.log(this);result.innerHTML = this.result;}}</script></body></html> 創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎總結(jié)
以上是生活随笔為你收集整理的前端读取文件图片信息流；js读取图片不同信息流；js读取图片；前端就js读取二进制数据；前端js读取文件流使用FileReader对象的readAsDataURL方法来读取图像文件；的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Linux配置手册（二）配置DHCP服务
- 下一篇： pc浏览器内核详解