File

　　File API在表單中的文件輸入字段的基礎上，又添加了一些直接訪問文件信息的接口。HTML5在DOM中為文件輸入元素添加了一個files集合。在通過文件輸入字段選擇了一或多個文件時，files集合中將包含一組File對象，每個File對象對應著一個文件。每個File對象都有下列只讀屬性

　　name:本地文件系統中的文件名

　　size:文件的字節大小

　　type:字符串，文件的MIME類型

　　lastModifiedDate:字符串，文件上一次被修改的時間

　　通過偵聽change事件並讀取files集合就可以知道選擇的每個文件的信息

<input type="file" id="file1"><div id="result"></div><script>file1.onchange = function(){    var data = file1.files[0];
    result.innerHTML = ‘類型：‘ + data.type  + ‘<br>大小：‘ + data.size + ‘(字節)<br>名稱：‘ + data.name + ‘<br>修改時間：‘ + data.lastModifiedDate;
}</script>

【隱藏文件input】

　　現代瀏覽器支持隱藏掉默認的的文件輸入框<input>元素，使用自定義的界面來充當打開文件選擇對話框的按鈕。實現起來很簡單，只需要使用樣式display:none把原本的文件輸入框隱藏掉，然後在需要的時候調用它的click()方法就行了

　　[註意]IE9-瀏覽器不支持

<input type="file" id="file1" style="display:none"><button id="btn">按鈕</button><div id="result"></div><script>btn.onclick = function(){
    file1.click();
}
file1.onchange = function(){
    result.innerHTML = file1.files[0].name;
}</script>

FileReader

　　File API的功能還不止於此，通過它提供的FileReader類型甚至還可以讀取文件中的數據

【構造函數】

　　使用FileReader()構造函數來創建一個FileReader對象

var reader = new FileReader();

【屬性】

　　error：表示在讀取文件時發生的錯誤(只讀)

　　readyState：表明FileReader對象的當前狀態，值為狀態常量中的一個(只讀)

　　狀態常量有以下三個

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

　　result：表示讀取到的文件內容，這個屬性只在讀取操作完成之後才有效，並且數據的格式取決於讀取操作是由哪個方法發起的(只讀)

【方法】

　　FileReader類型實現的是一種異步文件讀取機制。可以把FileReader想象成XMLHttpRequest，區別只是它讀取的是文件系統，而不是遠程服務器。為了讀取文件中的數據，FileReader提供了如下幾個方法

　　abort()：中止該讀取操作

　　readAsText(file或Blob,encoding)：以純文本形式讀取File或Blob對象的內容，將讀取到的文本保存在result屬性中。第二個參數(可選)用於指定編碼類型，默認為UTF-8

　　readAsDataURL(file或Blob)：讀取File或Blob對象的內容，並將文件以數據URI(進行Base64編碼)的形式保存在result屬性中

　　readAsBinaryString(file或Blob)：讀取File或Blob對象的內容，並將一個字符串保存在result屬性中，字符串中的每個字符表示一字節

　　readAsArrayBuffer(file或Blob)：讀取File或Blob對象的內容，並將一個包含文件內容的ArrayBuffer保存在result屬性中

　　[註意]IE瀏覽器不支持readAsBinaryString()方法

　　這些讀取文件的方法為靈活地處理文件數據提供了極大便利。例如，可以讀取圖像文件並將其保存為數據URI，以便將其顯示給用戶，或者為了解析方便，可以將文件讀取為文本形式

【事件】

　　由於讀取過程是異步的，因此FileReader也提供了幾個事件

　　onabort：當讀取操作被中止時調用

　　onerror：當讀取操作發生錯誤時調用

　　onload：當讀取操作成功完成時調用

　　onloadend：當讀取操作完成時調用，不管是成功還是失敗。該處理程序在onload或者onerror之後調用

　　onloadstart：當讀取操作將要開始之前調用

　　onprogress：在讀取數據過程中周期性調用

　　在正常情況下，讀取文件時，首先觸發loadstart事件，此時的readyState為1，result為空

　　接著，每過50ms左右，就會觸發一次progress事件，通過事件對象可以獲得與XHR的progress事件相同的信息(屬性)：lengthComputable、loaded和total。另外，盡管可能沒有包含全部數據，但每次progress事件中都可以通過FileReader的result屬性讀取到文件內容，readyState仍然是1

　　當文件讀取完成時，觸發load事件，此時的readyState為2，result為文件內容；如果發生了error事件，就不會發生load事件

<input type="file" id="file1"><div id="result"></div><script>/*[loadstart]readyState:1;result:
[progress]readyState:1;result:h3{color: #F44336;}
[load]readyState:2;result:h3{color: #F44336;}
[loadend]readyState:2;result:h3{color: #F44336;}*/file1.onchange = function(){    var reader = new FileReader();
    reader.readAsText(file1.files[0]);
    reader.onloadstart = function(e){
        console.log(‘[loadstart]readyState:‘ + reader.readyState + ‘;result:‘ + reader.result);
    }
    reader.onload = function(e){
        console.log(‘[load]readyState:‘ + reader.readyState + ‘;result:‘ + reader.result);
    }
    reader.onloadend = function(e){
        console.log(‘[loadend]readyState:‘ + reader.readyState + ‘;result:‘ + reader.result);
    }
    reader.onprogress = function(e){
        console.log(‘[progress]readyState:‘ + reader.readyState + ‘;result:‘ + reader.result);
    }
}</script>

　　由於種種原因無法讀取文件，就會觸發error事件。觸發error事件時，相關的信息將保存到FileReader的error屬性中。這個屬性中將保存一個對象，該對象只有一個屬性code，即錯誤碼。這個錯誤碼是1表示未找到文件，是2表示安全性錯誤，是3表示讀取中斷，是4表示文件不可讀，是5表示編碼錯誤

reader.onerror = function(){
    output.innerHTML = "Could not read file, error code is " + reader.error.code;
};

　　如果想中斷讀取過程，可以調用abort()方法，這樣就會觸發abort事件

　　在觸發load、error或abort事件後，會觸發另一個事件loadend。loadend事件發生就意味著已經讀取完整個文件，或者讀取時發生了錯誤，或者讀取過程被中斷

縮略圖

　　使用FileReader對象的readAsDataURL()方法完成對文件的讀取，再通過File對象的type屬性篩選出圖片

<img id="uploadPreview" style="width: 100px; height: 100px;" src="data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%3F%3E%0A%3Csvg%20width%3D%22153%22%20height%3D%22153%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%20%3Cg%3E%0A%20%20%3Ctitle%3ENo%20image%3C/title%3E%0A%20%20%3Crect%20id%3D%22externRect%22%20height%3D%22150%22%20width%3D%22150%22%20y%3D%221.5%22%20x%3D%221.500024%22%20stroke-width%3D%223%22%20stroke%3D%22%23666666%22%20fill%3D%22%23e1e1e1%22/%3E%0A%20%20%3Ctext%20transform%3D%22matrix%286.66667%2C%200%2C%200%2C%206.66667%2C%20-960.5%2C%20-1099.33%29%22%20xml%3Aspace%3D%22preserve%22%20text-anchor%3D%22middle%22%20font-family%3D%22Fantasy%22%20font-size%3D%2214%22%20id%3D%22questionMark%22%20y%3D%22181.249569%22%20x%3D%22155.549819%22%20stroke-width%3D%220%22%20stroke%3D%22%23666666%22%20fill%3D%22%23000000%22%3E%3F%3C/text%3E%0A%20%3C/g%3E%0A%3C/svg%3E" alt="Image preview" /><input type="file" id="file1" style="display:none"><button id="btn">選擇圖片</button><span id="msgName"></span><script>btn.onclick = function(){
    file1.click();
}
file1.onchange = function(){    var file = file1.files[0];    //如果一個文件被選中
    if(file){        //一張圖片被選中
        if (/image/.test(file.type)){            var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function(){
                uploadPreview.src = reader.result;
                msgName.innerHTML = file.name;
            }        //其他格式文件被選中        } else {
            alert("You must select a valid image file!");
        }                
    }    
}</script>

Blob URL

　　使用Blob URL，也可以用來顯示縮略圖

<input id="file1" type="file" accept="image/gif,image/jpeg,image/jpg,image/png,image/x-icon"  style="display:none"><button id="btn">選擇圖片</button><div id="fileList"></div><script>btn.onclick = function(){file1.click();}//保存圖片的名稱var dataArr = [];
file1.onchange = function(){    var file = file1.files[0];    //如果一個文件被選中
    if(file){        var name = file.name;        var id = name.split(‘.‘).join(‘_‘);        //檢測圖片是否已經被存儲過
        if(dataArr.indexOf(id) > -1){            //將保存過的圖片轉移到最下方            fileList.appendChild(document.getElementById(id));
        }else{            if(/image/.test(file.type)){
                dataArr.push(id);                var img = document.createElement(‘img‘);
                img.onload = function(){
                    URL.revokeObjectURL(img.src);
                }
                img.src=\‘#\‘" /script>

文件內容

　　readAsText()可以以字符串形式讀取並顯示文件內容

<input id="file1" type="file"  style="display:none"><button id="btn">選擇文件</button><div id="fileData" style="border:1px solid black;width:300px;overflow:auto"></div><script>btn.onclick = function(){file1.click();}
file1.onchange = function(){    var file = file1.files[0];    //如果一個文件被選中
    if(file){        var reader = new FileReader();
        reader.readAsText(file);
        reader.onload = function(){
            fileData.innerHTML = reader.result;
        }
    }         
}</script>

拖放選擇

　　圍繞讀取文件信息，結合使用HTML5拖放API和文件API，能夠創造出令人矚目的用戶界面：在頁面上創建了自定義的放置目標之後，你可以從桌面上把文件拖放到該目標。與拖放一張圖片或者一個鏈接類似，從桌面上把文件拖放到瀏覽器中也會觸發drop事件。而且可以在event.dataTransfer.files中讀取到被放置的文件，當然此時它是一個File對象，與通過文件輸入字段取得的File對象一樣

　　[註意]IE9-瀏覽器不支持event.dataTransfer

　　從電腦上選擇一個圖片文件，並拖放到網頁中指定區域，圖片縮略圖將顯示到網頁上

<div id="targetArea" style="height:50px;line-height:50px;width:210px;background:lightblue;">請將圖片文件拖放到該區域內</div><div id="result"></div><script>function addEvent(target,type,handler){    if(target.addEventListener){
        target.addEventListener(type,handler,false);
    }else{
        target.attachEvent(‘on‘+type,function(event){            return handler.call(target,event);
        });
    }
}function preventDefault(e){
    e = e || event;    if(e.preventDefault){
        e.preventDefault();
    }else{
        e.returnValue = false;
    }
}
addEvent(document,‘dragover‘,preventDefault);
addEvent(document,‘drop‘,preventDefault);
addEvent(targetArea,‘dragenter‘,preventDefault);
addEvent(targetArea,‘dragover‘,preventDefault);
addEvent(targetArea,‘dragleave‘,preventDefault);
addEvent(targetArea,‘drop‘,preventDefault);
targetArea.ondragenter = function(e){this.style.outline = "1px solid black";}
targetArea.ondragleave = function(e){this.style.outline = "";}
targetArea.ondrop = function(e){
    e = e || event;    this.style.outline = "";    var file = e.dataTransfer.files[0];    if(file){        //一張圖片被選中
        if (/image/.test(file.type)){            var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function(){                var oDiv = document.createElement(‘div‘);
                oDiv.id = file.name.split(‘.‘).join(‘_‘)                var img = new Image();
                img.src = reader.result;
                img.height = 60;                var oName = document.createElement(‘span‘);
                oName.innerHTML = file.name;                var oDel = document.createElement(‘button‘);
                oDel.innerHTML = ‘刪除‘;
                oDel.onclick = function(){
                    result.removeChild(oDiv);
                }               
                oDiv.appendChild(img);
                oDiv.appendChild(oName);
                oDiv.appendChild(oDel);
                result.appendChild(oDiv);
            }        //其他格式文件被選中        } else {
            alert("You must select a valid image file!");
        }          
    }
}</script>

文件進度

　　使用onprogress事件的loaded和total屬性，可以實現文件進度顯示

<input id="file1" type="file"  style="display:none"><button id="btn">選擇文件</button><div id="fileData"></div><script>btn.onclick = function(){file1.click();}
file1.onchange = function(){    var file = file1.files[0];    //如果一個文件被選中
    if(file){        var reader = new FileReader();
        reader.readAsText(file);
        reader.onprogress = function(e){
            e = e || event;
            fileData.innerHTML = ‘文件進度為：‘ + e.loaded + ‘/‘ + e.total;
        }
    }         
}</script>

文件上傳

方法一：使用表單提交實現文件上傳

　　文件上傳最基本的方法是使用HTML表單選擇本地文件進行上傳，在form表單中通過<input type="file">標記選擇本地文件。並且，必須在<form>元素中將enctype設置為"multipart/form-data"，將method設置為"post"

　　另外，需要在<form>表單中設置一個hidden類型的input框，其中name值為MAX_FILE_SIZE的隱藏值域，通過設置其value值限制上傳文件的大小

<form action="pp.php" method="post" enctype="multipart/form-data">
    <input type="hidden" name="MAX_FILE_SIZE" value="1000000">
    <input type="file" name="file1">
    <button>上傳文件</button></form>

方法二：使用FormData實現文件上傳

　　創建一個FormData()對象，通過它調用append()方法並傳入相應的File對象作為參數。然後，再把FormData對象傳遞給XHR的send()方法

　　[註意]IE9-瀏覽器不支持使用FormData()上傳文件

<input type="file" name="file1" id="file1"><div id="result"></div><script>var oFile = document.getElementById(‘file1‘);
oFile.onchange = function(e){    //創建xhr對象
    var xhr;    if(window.XMLHttpRequest){
        xhr = new XMLHttpRequest();
    }else{
        xhr = new ActiveXObject(‘Microsoft.XMLHTTP‘);
    };    var data = new FormData();
    data.append(‘file‘,oFile.files[0])    //異步接受響應    xhr.onreadystatechange = function(){        if(xhr.readyState == 4){            if(xhr.status == 200){                //實際操作                result.innerHTML = xhr.responseText;
            }
        }
    }    //發送請求    xhr.open(‘post‘,‘pp.php‘,true);
    xhr.send(data);
}</script>

方法三：使用File API實現文件上傳

　　通過File API傳送二進制文件

　　[註意]IE9-瀏覽器不支持

<input type="file" name="file1" id="file1"><div id="result"></div><script>var oFile = document.getElementById(‘file1‘);
oFile.onchange = function(e){    //創建xhr對象
    var xhr;    if(window.XMLHttpRequest){
        xhr = new XMLHttpRequest();
    }else{
        xhr = new ActiveXObject(‘Microsoft.XMLHTTP‘);
    };    var data = oFile.files[0];    //異步接受響應    xhr.onreadystatechange = function(){        if(xhr.readyState == 4){            if(xhr.status == 200){                //實際操作                result.innerHTML = xhr.responseText;
            }
        }
    }    //發送請求    xhr.open(‘post‘,‘pp.php‘,true);
    xhr.setRequestHeader("content-type",data.type);
    xhr.send(data);
}</script>

<?php$file = ‘photo/test1.jpg‘;touch($file);function binary_to_file($file){    $content = $GLOBALS[‘HTTP_RAW_POST_DATA‘];  // 需要php.ini設置
    if(empty($content)){        $content = file_get_contents(‘php://input‘); //不需要php.ini設置，內存壓力小    }    $ret = file_put_contents($file, $content, true);    return $ret;
};echo ‘文件上傳成功!‘;?>

刪除文件

　　最後，提一個小知識點，使用<input type="file>控件選擇文件後，如何刪除文件呢？一般地，有兩種方法。一種是使用form表單的reset()方法，重置表單；另一種是將<input type="file>控件的value值置空，但第二種方法IE10-瀏覽器不支持

<form id="myForm">
  <input type="file" id="myFile"></form><button id="btn1">刪除文件方法1</button><button id="btn2">刪除文件方法2</button><script>var myFile = document.getElementById(‘myFile‘);var myForm = document.getElementById(‘myForm‘);
btn1.onclick = function(){
  myFile.value = ‘‘;
}
btn2.onclick = function(){
  myForm.reset();
}</script>

好的

文件File