H5新特性-----type=file文件上傳

1、語法

單文件上傳：<input type="file" id="file1"/>
多文件上傳：<input type="file" id="file2" multiple/>

2、屬性（以下三個僅HTML5支持，因此存在兼容性問題）

（1）multiple ：表示用戶是否可以選擇多個值。multiple只能用於type=file和type=email。

（2）accept：服務器接受的文件類型，否則將被忽略。

音頻/ *代表聲音文件。僅HTML5支持
視頻/ *代表視頻文件。僅HTML5支持
圖像/ *表示圖像文件。僅HTML5支持

（3）required：此屬性指定用戶在提交表單之前必須填寫一個值。

3、獲取上傳的文件信息

Input.onchange = function (event) {
    if(!window.FileReader){
        console.log("瀏覽器不支持HTML5");
        return false;                 
    }
    var a = event.target;
    var b = event.target.files;
    var c = event.target.files[0];
    console.log(a);//input對象
    console.log(b);//files數組對象
    console.log(c);//第一張圖片的file對象           
}

 

可以發現input.files是一個數組，由傳入的file對象組成。每個file對象包含以下屬性：

lastModified：數值，表示最近一次修改時間的毫秒數；

lastModifiedDate：對象，表示最后一次表示最近一次修改時間的Date對象（高程中說是字符串，根據上圖可看出應該為對象，為了層級清晰未對其展開，大家可自行查看，其可調用Date對象的有關方法，例如getDay方法）；

name：本地文件系統中的文件名；

size：文件的字節大小；

type：字符串，文件的MIME類型；

weblitRelativePath：此處為空；當在input上加上webkitdirectory屬性時，用戶可選擇文件夾，此時weblitRelativePath表示文件夾中文件的相對路徑。

FileReader

以上file對象只獲取到了對文件的描述信息，但沒有獲得文件中的數據，而event.target.value也只是保存的是文件的絕對路徑，如圖：

我們可以通過html5提供的FileReader讀取到文件中的數據。

首先創建一個FileReader實例：

var reader = new FileReader();

方法

FileReader提供了如下方法：

readAsArrayBuffer(file)	按字節讀取文件內容，結果用ArrayBuffer對象表示
readAsBinaryString(file)	按字節讀取文件內容，結果為文件的二進制串
readAsDataURL(file)	讀取文件內容，結果用data:url的字符串形式表示
readAsText(file,encoding)	按字符讀取文件內容，結果用字符串形式表示
abort()	終止文件讀取操作

readAsDataURL和readAsText較為常用，這里只對這兩者進行說明。

readAsDataURL會將文件內容進行base64編碼后輸出：

var Input = document.querySelector("#file1");
Input.onchange = function (event) {
    if(!window.FileReader){
        console.log("瀏覽器不支持HTML5");
        return false;                 
    }
    var files = event.target.files[0];
    var reader = new FileReader();
    reader.readAsDataURL(files);//發起異步請求
    reader.onload = function(e){
        //讀取完成后，數據保存在對象的result屬性中
        console.log(this.result);
    }
}

事件

onabort	當讀取操作被中止時調用
onerror	當讀取操作發生錯誤時調用
onload	當讀取操作成功完成時調用
onloadend	當讀取操作完成時調用，無論成功或失敗
onloadstart	當讀取操作開始時調用
onprogress	在讀取數據過程中周期性調用

var Input = document.querySelector("#file1");
var count=0;
Input.addEventListener("change",function(){
  var reader = new FileReader();
  reader.readAsText(inputBox.files[0],"utf-8");//發起異步請求
  reader.onload = function(){
    console.log("加載成功")
  }
  reader.onloadstart = function(){
    console.log("開始加載")
  }
  reader.onloadend= function(){
    console.log("加載結束")
  }
  reader.onprogress = function(){
    count++;
    console.log("加載中"+count)
  }
})