成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

js 讀取 input[type=file] 內(nèi)容，直接顯示文本 | 圖片

yacheng / 608人閱讀

摘要：接下來就是讀取并顯示這個文件。只讀表示狀態(tài)的數(shù)字。事件處理處理事件。該事件在讀取操作發(fā)生錯誤時觸發(fā)。開始讀取指定的中的內(nèi)容。一旦完成，屬性中將包含一個字符串以表示所讀取的文件內(nèi)容。

js 讀取 input[type=file] 內(nèi)容，直接顯示文本 | 圖片 
這里面就不用 jquery 了，全用原生方法
1. 開始之前，你需要知道的一些基礎(chǔ)知識

當(dāng)出現(xiàn) 時，該元素的 value 屬性保存了用戶指定的文件的名稱，當(dāng)外層有 form 表單包裹的時候，選中的文件會被添加到表單中一并上傳至服務(wù)器。

通過點擊 input[type=file] 來選取文件的時候，都會觸發(fā)該 input 的 onchange 句柄，想要顯示文件的內(nèi)容，在該句柄添加方法即可

2. 顯示選取的文本文件的內(nèi)容

html

js

照上面的來，就會在 p 標(biāo)簽中顯示出選擇的文本文件的內(nèi)容。

下面說說具體是怎么實現(xiàn)的：

1. onchange="handleFiles(this.files)

在 input 上添加這個的意思是，在用戶選擇文件的時候，調(diào)用 handleFiles() 方法，并把當(dāng)前 input 上已選中的文件傳給 handleFiles() 方法。

傳遞的 this.files 是 input 這個元素上已有的屬性 files, 如下圖（ input 元素的所有屬性部分截圖），這個files 是個 FileList 對象，里面包含已選的文件數(shù)組，所以取的時候需要用索引。

因為我們這里只有一個文件，所以這個文件就是 files[0]，這樣，我們就取到了這個文件。接下來就是讀取并顯示這個文件。

2. 用 FileReader 讀取文件的內(nèi)容 
關(guān)于 FileReader 的詳細(xì)屬性和方法，看這里，特別好的一個網(wǎng)站，所有 js 特性都很詳細(xì)
https://developer.mozilla.org...

我們已經(jīng)取到文件 files[0]，讀取這個文件的內(nèi)容，需要用到 FileReader 這個對象，其方法和屬性可以查看本文最下文。

讀取文本文件 
    let reader = new FileReader();
    // 新建 FileReader 對象
    
    reader.onload = function(){
        // 當(dāng) FileReader 讀取文件時候，讀取的結(jié)果會放在 FileReader.result 屬性中
      document.getElementById("text").innerHTML = this.result;
    };

    reader.readAsText(file);
    // 設(shè)置以什么方式讀取文件，這里以文本方式
讀取圖片并顯示 
let fileReader = new FileReader();
fileReader.onload = () => {
    document.getElementById("preview").src = fileReader.result;
    // 其它跟上面是一樣的，這里只需要指定 img 的 src 到 FileReader.result 就好了
};

fileReader.readAsDataURL(file);
// readAsDataURL 讀取出的是圖片的 base64 格式的數(shù)據(jù)，這種數(shù)據(jù)可以直接賦值到 img 的 src 上

像這樣

參閱 ：FileReader 屬性和方法 屬性

FileReader.error 只讀
一個DOMException，表示在讀取文件時發(fā)生的錯誤 。

FileReader.readyState 只讀
表示FileReader狀態(tài)的數(shù)字。取值如下：

常量名 值 描述
EMPTY 0 還沒有加載任何數(shù)據(jù).
LOADING 1 數(shù)據(jù)正在被加載.
DONE 2 已完成全部的讀取請求.

FileReader.result 只讀
文件的內(nèi)容。該屬性僅在讀取操作完成后才有效，數(shù)據(jù)的格式取決于使用哪個方法來啟動讀取操作。

事件處理

FileReader.onabort
處理abort事件。該事件在讀取操作被中斷時觸發(fā)。

FileReader.onerror
處理error事件。該事件在讀取操作發(fā)生錯誤時觸發(fā)。

FileReader.onload
處理load事件。該事件在讀取操作完成時觸發(fā)。

FileReader.onloadstart
處理loadstart事件。該事件在讀取操作開始時觸發(fā)。

FileReader.onloadend
處理loadend事件。該事件在讀取操作結(jié)束時（要么成功，要么失?。┯|發(fā)。

FileReader.onprogress
處理progress事件。該事件在讀取Blob時觸發(fā)。
因為 FileReader 繼承自EventTarget，所以所有這些事件也可以通過addEventListener方法使用。

方法

FileReader.abort()
中止讀取操作。在返回時，readyState屬性為DONE。

FileReader.readAsArrayBuffer()
開始讀取指定的 Blob中的內(nèi)容, 一旦完成, result 屬性中保存的將是被讀取文件的 ArrayBuffer 數(shù)據(jù)對象.

FileReader.readAsBinaryString()
開始讀取指定的Blob中的內(nèi)容。一旦完成，result屬性中將包含所讀取文件的原始二進(jìn)制數(shù)據(jù)。

FileReader.readAsDataURL()
開始讀取指定的Blob中的內(nèi)容。一旦完成，result屬性中將包含一個data: URL格式的字符串以表示所讀取文件的內(nèi)容。

FileReader.readAsText()
開始讀取指定的Blob中的內(nèi)容。一旦完成，result屬性中將包含一個字符串以表示所讀取的文件內(nèi)容。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/102152.html

相關(guān)文章

  • js 讀取 input[type=file] 內(nèi)容，直接顯示文本 | 圖片

    摘要：接下來就是讀取并顯示這個文件。只讀表示狀態(tài)的數(shù)字。事件處理處理事件。該事件在讀取操作發(fā)生錯誤時觸發(fā)。開始讀取指定的中的內(nèi)容。一旦完成，屬性中將包含一個字符串以表示所讀取的文件內(nèi)容。 js 讀取 input[type=file] 內(nèi)容，直接顯示文本 | 圖片 這里面就不用 jquery 了，全用原生方法 1. 開始之前，你需要知道的一些基礎(chǔ)知識 當(dāng)出現(xiàn) 時，該元素的 value 屬性...

    caspar 評論0 收藏0

  • 上傳圖片本地預(yù)覽效果實現(xiàn)（兼容IE8）

    摘要：以上傳圖片為例。我們可以通過獲取上傳的圖片相關(guān)信息，但是想要實現(xiàn)本地預(yù)覽還需要借助來實現(xiàn)可以讀取本地圖片，并將圖片數(shù)據(jù)轉(zhuǎn)換成編碼的字符串形式嵌入到頁面中。在我們實現(xiàn)上傳圖片的效果里，就有用到。圖片預(yù)覽兼容處理及以下版本不支持和。 最近項目里需要用到上傳圖片并預(yù)覽的功能，于是寫了個jQuery預(yù)覽圖片插件，下載地址。如果有需要的，可以直接下載。第一次寫jQuery插件，如有不對之處，歡迎...

    avwu 評論0 收藏0

  • 少俠，留步，圖片預(yù)覽術(shù)

    摘要：少年，我看你骨骼精奇，是萬中無一的武學(xué)奇才，我這有本圖片流秘籍，見與你有緣，就送于你了。文件大小，單位為字節(jié)，該屬性只讀。用來讀取或文件數(shù)據(jù)，基于文件大小不同，讀取的過程為異步。 showImg(https://segmentfault.com/img/remote/1460000016276887); 少年，我看你骨骼精奇，是萬中無一的武學(xué)奇才，我這有本《圖片流》秘籍，見與你有緣，就...

    岳光 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<