国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

yacheng / 605人閱讀

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

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

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

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

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

html

js

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

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

1. onchange="handleFiles(this.files)

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

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

因?yàn)槲覀冞@里只有一個(gè)文件，所以這個(gè)文件就是 files[0]，這樣，我們就取到了這個(gè)文件。接下來(lái)就是讀取并顯示這個(gè)文件。

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

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

讀取文本文件 
    let reader = new FileReader();
    // 新建 FileReader 對(duì)象
    
    reader.onload = function(){
        // 當(dāng) FileReader 讀取文件時(shí)候，讀取的結(jié)果會(huì)放在 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 只讀
一個(gè)DOMException，表示在讀取文件時(shí)發(fā)生的錯(cuò)誤 。

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

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

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

事件處理

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

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

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

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

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

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

方法

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

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

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

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/102152.html

相關(guān)文章

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

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

    caspar 評(píng)論0 收藏0

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

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

    avwu 評(píng)論0 收藏0

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

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

    岳光 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<