HTML 5 使用 FileReader、FormData實現文件上傳

時間 2019-11-19

標籤 html 使用 filereader formdata 實現文件上傳欄目 HTML 简体版

原文原文鏈接

1、FileReaderhtml

FileReader 對象容許Web應用程序異步讀取存儲在用戶計算機中的文件（或緩衝區的原始數據），使用File或Blob對象指定要讀取的文件或數據。web

1.1 實例化數組

var reader = new FileReader()app

1.2 事件類型異步

FileReader.onloadthis
- 每次成功完成讀取操做完成時觸發loading事件 spa
FileReader.onprogressscala
- 讀取Blob 內容時觸發進度 progress 事件code

1.3 方法orm

FileReader.readAsDataURL()
- 開始讀取指定的Blob內容，完成後，result 屬性包含一個用URL表示的文件數據。

FileReader.readAsArrayBuffer()

開始讀取指定的Blob內容，完成後，result 屬性包含一個用 ArrayBuffer 表示的文件數據。

HTML

 
           <input type="file" onchange="previewFile()"><br>
<img src="" height="200" alt="Image preview..."
JavaScript

function previewFile() {
  var preview = document.querySelector('img');
  var file    = document.querySelector('input[type=file]').files[0];
  var reader  = new FileReader();
  reader.addEventListener("load", function () {
    preview.src = reader.result;
  }, false);
  if (file) {
    reader.readAsDataURL(file);
  }
} 
          

FileReader.readAsText()
- 開始讀取指定的Blob內容，完成後，result 將文件的內容做爲一個文本字符串。

2、在Web 應用中使用files對象

2.1 訪問所選文件

 
      <input multiple id="upload_input" type="file" accept="image/*" /> 
     
      使用原生DOM選擇器獲取元素 
     
      var files = document.getElementById('upload_input').files;

files 是一個對象，包含着所選文件列表的信息和一個 length 屬性

 
       > console.log(files);
< FileList {0: File, 1: File, 2: File, length: 3}
<FileList
    0:File
        lastModified:1481789988885
        lastModifiedDate:Thu Dec 15 2016 16:19:48 GMT+0800 (中國標準時間)
        name:"my_order.png"
        size:93453
        type:"image/png"
        webkitRelativePath:""
    1:File
    2:File
    length:3 
      

2.2 經過change 事件訪問所選文件

var inputElement = document.getElementById("input");
inputElement.addEventListener("change", handleFiles, false);
function handleFiles() {
    var fileList = this.files; /* now you can work with the file list */
}

2.3 獲取所選文件的基本信息

訪問files對象的自帶的length屬性，獲得被選擇文件的個數：

var numFiles = files.length;

能夠經過數組列表，檢索出被選擇的單個文件：

 
       for (var i = 0, numFiles = files.length; i < numFiles; i++) {
  var file = files[i];
  ..
} 
      

每一個 file 對象擁有三個屬性，包含着文件的name,size,type

name：文件名，只讀，不包含文件路徑；

size：文件字節數，64-bit 整型；例如92kb 的文件，它的size = 92 * 1024 b;

type：文件的MIME類型，若不肯定則爲「」（空）。

2.4 使用click 方法隱藏 input 元素

<input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)">
<a href="#" id="fileSelect">Select some files</a>

給隱藏的 input 增長事件

 
       var fileSelect = document.getElementById('fileSelect'),
    fileEle = document.getElementById('fileElem');
fileSelect.addEventListener('click', function(e) {
    if(fileEle) {
        fileEle.click();
    }
}, false) 
      

3、實例

3.1 顯示用戶選中圖片的縮略圖

var showThumbnails = function (files) {
    for(var i = 0; i < files.length; i++) {
        var file = files[i];
        var imageType = /^image\//;

        if(!imageType.test(file.type)) {
            continue;
        }
        var img = document.createElement('img');
        img.classList.add('obj');
        img.file = file;
        preview.appendChild(img); // 假設preview是縮略圖的展現位置

        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = (function (aImg) {
            return function (e) {
                aImg.src = e.target.result; // e.target 指向 reader
            }
        })(img)
    }
}

每一個縮略圖都添加了一個 obj 的類名，方便後期查找。還向每一個圖像指定了一個指向文件的file屬性，以供稍後實際上傳，而後用Node.appendChild() 將新的縮略圖添加到預覽區域。

緊接着，咱們實例化了一個 FileReader 來處理異步加載圖像並將其附加到img 元素上。調用readAsDataURL() 在後臺啓動讀取操做，圖像加載完畢，它們將被轉換爲傳遞給onload回調的數據：URL。

 
       <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <title></title>
</head>
<body>
<div class="logo">
    <img src="111.png" />
</div>
<div class="upload">
    <p>上傳圖片</p>
    <form>
        <input multiple id="upload_input" type="file" />
    </form>
</div>
</body>
<script>
    window.onload = function () {
        var Upload = {
            change: function () {
                var oform = document.querySelector('form'),
                    oFiles = document.getElementById('upload_input').files;
                console.log(oFiles)
                for(var key in oFiles) {
                    if(oFiles.hasOwnProperty(key)) {
                        console.log('file_name:'+oFiles[key].name);
                        console.log('file_size:'+oFiles[key].size);
                        console.log('file_type:'+oFiles[key].type);
                    }
                }
            }
        };
        document.getElementById('upload_input').addEventListener('change',Upload.change);
    }
</script>
</html> 
      