溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
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" ><button id="btn">按鈕</button><div id="result"></div><script>btn.onclick = function(){
file1.click();
}
file1.onchange = function(){
result.innerHTML = file1.files[0].name;
}</script>
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:h4{color: #F44336;}
[load]readyState:2;result:h4{color: #F44336;}
[loadend]readyState:2;result:h4{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" src="data:p_w_picpath/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%20p_w_picpath%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" ><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 (/p_w_picpath/.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 p_w_picpath file!");
}
}
}</script>
使用Blob URL，也可以用來顯示縮略圖
<input id="file1" type="file" accept="p_w_picpath/gif,p_w_picpath/jpeg,p_w_picpath/jpg,p_w_picpath/png,p_w_picpath/x-icon" ><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(/p_w_picpath/.test(file.type)){
dataArr.push(id); var img = document.createElement('img');
img.onload = function(){
URL.revokeObjectURL(img.src);
}
img.src= URL.createObjectURL(file);
img.height = 60; var oDiv = document.createElement('div');
oDiv.id = id; var oSpan = document.createElement('span');
oSpan.innerHTML = name + ":" + file.size + " bytes";
oDiv.appendChild(img);
oDiv.appendChild(oSpan);
fileList.appendChild(oDiv);
}
}
}
}</script>
readAsText()可以以字符串形式讀取并顯示文件內容
<input id="file1" type="file" ><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.onload = function(){
fileData.innerHTML = reader.result;
}
}
}</script>
圍繞讀取文件信息，結合使用HTML5拖放API和文件API，能夠創造出令人矚目的用戶界面：在頁面上創建了自定義的放置目標之后，你可以從桌面上把文件拖放到該目標。與拖放一張圖片或者一個鏈接類似，從桌面上把文件拖放到瀏覽器中也會觸發drop事件。而且可以在event.dataTransfer.files中讀取到被放置的文件，當然此時它是一個File對象，與通過文件輸入字段取得的File對象一樣
[注意]IE9-瀏覽器不支持event.dataTransfer
從電腦上選擇一個圖片文件，并拖放到網頁中指定區域，圖片縮略圖將顯示到網頁上
<div id="targetArea" >請將圖片文件拖放到該區域內</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 (/p_w_picpath/.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 p_w_picpath file!");
}
}
}</script>
使用onprogress事件的loaded和total屬性，可以實現文件進度顯示
<input id="file1" type="file" ><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>
好的
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
