FileReader上傳文件

時間 2019-11-15

標籤 filereader 上傳文件简体版

原文原文鏈接

　　FileReader對象容許web應用程序異步讀取存儲在計算機上的文件的內容，使用File或Bolb對象指定要讀取的文件或數據。其中File對象能夠是來自用戶在一個<input>元素上選擇文件後返回的FileList對象，也能夠是來自拖放操做生成的DataTransfer對象，還能夠是來自在一個HTMLCanvasElement上執行的mozGetAsFile()方法後返回結果。html

屬性

　　FileReader.error

　　在讀取文件時發生錯誤web

　　FileReader.readyState

常量名	值	描述
EMPTY	0	尚未加載任何數據
LOADING	1	數據正在被加載
DONE	2	已完成所有的讀取請求

　　FileReader.result

　　該屬性僅在讀取操做完成後纔有效，數據格式取決於使用哪一種方式來進行讀取操做。返回文件內容。異步

事件處理

　　FileReader.onabort

　　處理abort事件，該事件在讀取操做被中斷時觸發。ide

　　FileReader.onerror

　　處理error事件，該事件在讀取發生錯誤時觸發。ui

　　FileReader.onload

　　處理load事件，該事件在讀取操做完成時觸發。spa

　　FileReader.onloadstart

　　處理loadstart事件，該事件在讀取操做開始時觸發。code

　　FileReader.onloadend

　　處理loadend事件，該事件在讀取操做結束時觸發（要麼成功，要麼失敗）。htm

　　FileReader,onprogress

　　處理progress事件，在讀取Bolb時觸發。對象

方法

　　FileReader.abort()

　　停止讀取操做，在返回時，readyState的屬性爲DONEblog

　　FileReader.readAsArrayBuffer()

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

　　FileReader.readAsBinaryString()

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

　　FileReader.readAsDataURL()

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

　　FileReader.readAsText()

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

文件上傳

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
        <input type="text" name="name" value="1234">
        <input type="text" name="pwd" value="5678">
        <input type="file" name="file" id="file" onchange="change()">
        <input type="button" value="提交" onclick="submit()">
    
        <img width="300" id="img" alt="">
    <script>
        
        var fileInp = document.getElementById('file');
        var reader = new FileReader();
        var img = document.getElementById('img');
        function change(){
            var file = fileInp.files[0];
            if(file.size > 0){
                reader.readAsDataURL(file);
            }
        }
        reader.onload = function(){
            img.src = reader.result;
        }
        function submit(){
            var http = new XMLHttpRequest();
            http.open('POST', '/file', true);
            http.onload = function(res) {
                console.log(res)
            };
            http.send()
        }
    </script>
</body>
</html>