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

一、語法

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

二、屬性（如下三個僅HTML5支持，所以存在兼容性問題）

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

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

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

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

三、獲取上傳的文件信息

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)
  }
})