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

資訊專欄INFORMATION COLUMN

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

caspar / 3486人閱讀

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

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

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

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

2. 顯示選取的文本文件的內容

html

js

照上面的來，就會在 p 標簽中顯示出選擇的文本文件的內容。

下面說說具體是怎么實現的：

1. onchange="handleFiles(this.files)

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

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

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

2. 用 FileReader 讀取文件的內容 
關于 FileReader 的詳細屬性和方法，看這里，特別好的一個網站，所有 js 特性都很詳細
https://developer.mozilla.org...

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

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

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

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

像這樣

參閱 ：FileReader 屬性和方法 屬性

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

FileReader.readyState 只讀
表示FileReader狀態的數字。取值如下：

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

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

事件處理

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

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

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

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

FileReader.onloadend
處理loadend事件。該事件在讀取操作結束時（要么成功，要么失敗）觸發。

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

方法

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

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

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

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

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/53753.html

相關文章

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

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

    yacheng 評論0 收藏0

  • 上傳圖片本地預覽效果實現（兼容IE8）

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

    avwu 評論0 收藏0

  • 少俠，留步，圖片預覽術

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

    岳光 評論0 收藏0

發表評論

0條評論

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