HTML5中的File API

時間 2019-12-12

標籤 html5 html file api 欄目 HTML5 简体版

原文原文鏈接

file　提供文件有關的信息

1. file對象

file對象的來源通常分爲３種：javascript

（１）在<input type='file'>元素上選擇上傳文件後返回的Filelist對象；
（２）由拖放操做產生的DataTransfer對象；
（３）HTMLCanvasElement的mozGetAsFile() API；

此處討論的是第一種，獲取file對象：html

let file = e.target.files[0];//獲取file 對象，當上傳多個文件（圖片）時，０表示第一個

屬性：java

lastModified:　1496803445926;//所引用文件最後修改時間
lastModifiedDate: Wed Jun 07 2017 10:44:05 GMT+0800 (CST) {};//所引用文件最後修改時間的 Date 對象
name: "多Y圖.svg";//所引用文件的名字
size: 1384;//返回文件的大小
type: "image/svg+xml";//返回文件的 多用途互聯網郵件擴展類型
webkitRelativePath: "";//返回 File 相關的 path 或 URL

另，多張圖片的上傳原理相似，需注意如下三點：web

1.設置multiple
2.經過循環取出每張圖片，放到指定地方
3.每次循環的時候從新new FileReader()對象

2. FileReader()對象

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

let reader = new FileReader();//建立新對象

屬性:svg

error: 讀取文件時發生的錯誤；
    readyState: 代表FileReader對象的當前狀態；
    result: 讀取到的文件內容，只在讀取操做完成後纔有效，數據格式取決於採用的讀取操做；

方法:ui

abort()：停止該讀取操做。
readAsText(file, encoding)：以純文本的形式讀取，result中的數據爲字符串。
readAsDataURL(file)：result屬性中將包含一個data:url格式的字符串。
readAsArrayBuffer(file): result屬性中將包含一個ArrayBuffer對象。
readAsBinaryString(file)：讀取文件的二進制源碼。

事件處理程序this

onabort: 當讀取操做被停止時調用
onerror：當讀取操做發生錯誤時調用
onload: 當讀取操做成功完成時調用
onloadend: 當讀取操做完成時（無論成功仍是失敗），在onload或者onerror以後調用
onloadstart: 當讀取操做將要開始時調用
onprogress: 在讀取數據過程當中週期性調用

3.示例

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="author" content="oscar999">
    <title>read</title>
  </head>
  <body>
    <input type="file" id="file" onchange="handleFiles(this.files)"/>
    <div id="filecontent"></div>

    <script>
      function handleFiles(files){
        if(files.length) {
          var file = files[0];
          var reader = new FileReader();
          reader.onload = function(e) {
          document.getElementById("filecontent").innerHTML = e.target.result;
          };
          reader.readAsText(file);
        }
      }
    </script>
  </body>
</html>