文件File
File
File API在表單中的文件輸入字段的基礎(chǔ)上，又添加了一些直接訪問文件信息的接口。HTML5在DOM中為文件輸入元素添加了一個files集合。在通過文件輸入字段選擇了一或多個文件時，files集合中將包含一組File對象，每個File對象對應(yīng)著一個文件。每個File對象都有下列只讀屬性
我們提供的服務(wù)有：網(wǎng)站建設(shè)、成都網(wǎng)站制作、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、華坪ssl等。為上千企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的華坪網(wǎng)站制作公司
name:本地文件系統(tǒng)中的文件名
size:文件的字節(jié)大小
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 + '(字節(jié))<br>名稱：' + data.name + '<br>修改時間：' + data.lastModifiedDate;
}</script>
【隱藏文件input】
現(xiàn)代瀏覽器支持隱藏掉默認(rèn)的的文件輸入框<input>元素，使用自定義的界面來充當(dāng)打開文件選擇對話框的按鈕。實現(xiàn)起來很簡單，只需要使用樣式display:none把原本的文件輸入框隱藏掉，然后在需要的時候調(diào)用它的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>
FileReader
File API的功能還不止于此，通過它提供的FileReader類型甚至還可以讀取文件中的數(shù)據(jù)
【構(gòu)造函數(shù)】
使用FileReader()構(gòu)造函數(shù)來創(chuàng)建一個FileReader對象
var reader = new FileReader();
【屬性】
error：表示在讀取文件時發(fā)生的錯誤(只讀)
readyState：表明FileReader對象的當(dāng)前狀態(tài)，值為狀態(tài)常量中的一個(只讀)
狀態(tài)常量有以下三個
常量名 值 描述 EMPTY 0 還沒有加載任何數(shù)據(jù) LOADING 1 數(shù)據(jù)正在被加載 DONE 2 已完成全部的讀取請求
result：表示讀取到的文件內(nèi)容，這個屬性只在讀取操作完成之后才有效，并且數(shù)據(jù)的格式取決于讀取操作是由哪個方法發(fā)起的(只讀)
【方法】
FileReader類型實現(xiàn)的是一種異步文件讀取機制。可以把FileReader想象成XMLHttpRequest，區(qū)別只是它讀取的是文件系統(tǒng)，而不是遠(yuǎn)程服務(wù)器。為了讀取文件中的數(shù)據(jù)，F(xiàn)ileReader提供了如下幾個方法
abort()：中止該讀取操作
readAsText(file或Blob,encoding)：以純文本形式讀取File或Blob對象的內(nèi)容，將讀取到的文本保存在result屬性中。第二個參數(shù)(可選)用于指定編碼類型，默認(rèn)為UTF-8
readAsDataURL(file或Blob)：讀取File或Blob對象的內(nèi)容，并將文件以數(shù)據(jù)URI(進行Base64編碼)的形式保存在result屬性中
readAsBinaryString(file或Blob)：讀取File或Blob對象的內(nèi)容，并將一個字符串保存在result屬性中，字符串中的每個字符表示一字節(jié)
readAsArrayBuffer(file或Blob)：讀取File或Blob對象的內(nèi)容，并將一個包含文件內(nèi)容的ArrayBuffer保存在result屬性中
[注意]IE瀏覽器不支持readAsBinaryString()方法
這些讀取文件的方法為靈活地處理文件數(shù)據(jù)提供了極大便利。例如，可以讀取圖像文件并將其保存為數(shù)據(jù)URI，以便將其顯示給用戶，或者為了解析方便，可以將文件讀取為文本形式
【事件】
由于讀取過程是異步的，因此FileReader也提供了幾個事件
onabort：當(dāng)讀取操作被中止時調(diào)用
onerror：當(dāng)讀取操作發(fā)生錯誤時調(diào)用
onload：當(dāng)讀取操作成功完成時調(diào)用
onloadend：當(dāng)讀取操作完成時調(diào)用，不管是成功還是失敗。該處理程序在onload或者onerror之后調(diào)用
onloadstart：當(dāng)讀取操作將要開始之前調(diào)用
onprogress：在讀取數(shù)據(jù)過程中周期性調(diào)用
在正常情況下，讀取文件時，首先觸發(fā)loadstart事件，此時的readyState為1，result為空
接著，每過50ms左右，就會觸發(fā)一次progress事件，通過事件對象可以獲得與XHR的progress事件相同的信息(屬性)：lengthComputable、loaded和total。另外，盡管可能沒有包含全部數(shù)據(jù)，但每次progress事件中都可以通過FileReader的result屬性讀取到文件內(nèi)容，readyState仍然是1
當(dāng)文件讀取完成時，觸發(fā)load事件，此時的readyState為2，result為文件內(nèi)容；如果發(fā)生了error事件，就不會發(fā)生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>
由于種種原因無法讀取文件，就會觸發(fā)error事件。觸發(fā)error事件時，相關(guān)的信息將保存到FileReader的error屬性中。這個屬性中將保存一個對象，該對象只有一個屬性code，即錯誤碼。這個錯誤碼是1表示未找到文件，是2表示安全性錯誤，是3表示讀取中斷，是4表示文件不可讀，是5表示編碼錯誤
reader.onerror = function(){
output.innerHTML = "Could not read file, error code is " + reader.error.code;
};如果想中斷讀取過程，可以調(diào)用abort()方法，這樣就會觸發(fā)abort事件
在觸發(fā)load、error或abort事件后，會觸發(fā)另一個事件loadend。loadend事件發(fā)生就意味著已經(jīng)讀取完整個文件，或者讀取時發(fā)生了錯誤，或者讀取過程被中斷
縮略圖
使用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
使用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('_'); //檢測圖片是否已經(jīng)被存儲過
if(dataArr.indexOf(id) > -1){ //將保存過的圖片轉(zhuǎn)移到最下方 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>
文件內(nèi)容
readAsText()可以以字符串形式讀取并顯示文件內(nèi)容
<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>
拖放選擇
圍繞讀取文件信息，結(jié)合使用HTML5拖放API和文件API，能夠創(chuàng)造出令人矚目的用戶界面：在頁面上創(chuàng)建了自定義的放置目標(biāo)之后，你可以從桌面上把文件拖放到該目標(biāo)。與拖放一張圖片或者一個鏈接類似，從桌面上把文件拖放到瀏覽器中也會觸發(fā)drop事件。而且可以在event.dataTransfer.files中讀取到被放置的文件，當(dāng)然此時它是一個File對象，與通過文件輸入字段取得的File對象一樣
[注意]IE9-瀏覽器不支持event.dataTransfer
從電腦上選擇一個圖片文件，并拖放到網(wǎng)頁中指定區(qū)域，圖片縮略圖將顯示到網(wǎng)頁上
<div id="targetArea" >請將圖片文件拖放到該區(qū)域內(nèi)</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屬性，可以實現(xiàn)文件進度顯示
<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>
文件上傳
方法一：使用表單提交實現(xiàn)文件上傳
文件上傳最基本的方法是使用HTML表單選擇本地文件進行上傳，在form表單中通過<input type="file">標(biāo)記選擇本地文件。并且，必須在<form>元素中將enctype設(shè)置為"multipart/form-data"，將method設(shè)置為"post"
另外，需要在<form>表單中設(shè)置一個hidden類型的input框，其中name值為MAX_FILE_SIZE的隱藏值域，通過設(shè)置其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實現(xiàn)文件上傳
創(chuàng)建一個FormData()對象，通過它調(diào)用append()方法并傳入相應(yīng)的File對象作為參數(shù)。然后，再把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){ //創(chuàng)建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]) //異步接受響應(yīng) xhr.onreadystatechange = function(){ if(xhr.readyState == 4){ if(xhr.status == 200){ //實際操作 result.innerHTML = xhr.responseText;
}
}
} //發(fā)送請求 xhr.open('post','pp.php',true);
xhr.send(data);
}</script>
方法三：使用File API實現(xiàn)文件上傳
通過File API傳送二進制文件
[注意]IE9-瀏覽器不支持
<input type="file" name="file1" id="file1"><div id="result"></div><script>var oFile = document.getElementById('file1');
oFile.onchange = function(e){ //創(chuàng)建xhr對象
var xhr; if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}; var data = oFile.files[0]; //異步接受響應(yīng) xhr.onreadystatechange = function(){ if(xhr.readyState == 4){ if(xhr.status == 200){ //實際操作 result.innerHTML = xhr.responseText;
}
}
} //發(fā)送請求 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設(shè)置
if(empty($content)){ $content = file_get_contents('php://input'); //不需要php.ini設(shè)置，內(nèi)存壓力小 } $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>
好的
標(biāo)題名稱：文件File
標(biāo)題URL：http://bm7419.com/article48/pceiep.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)建站、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站策劃、面包屑導(dǎo)航、App設(shè)計、標(biāo)簽優(yōu)化
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)
- 做網(wǎng)站面對網(wǎng)站異常應(yīng)如何處理 2022-10-01
- 企業(yè)做網(wǎng)站建設(shè)推廣中的常見問題及解決方法 2021-06-28
- 在做網(wǎng)站時這三方面的內(nèi)容一定要重視 2023-02-03
- 做網(wǎng)站空間變動一般要碰到哪些情況？ 2022-10-14
- 選擇專業(yè)做網(wǎng)站公司的相關(guān)注意事項 2021-08-25
- 完全不懂SEO的新手小白該怎么做網(wǎng)站優(yōu)化？可從哪里下手？ 2022-06-02
- 企業(yè)如何做網(wǎng)站推廣優(yōu)化！ 2013-08-08
- 做網(wǎng)站優(yōu)化哪家公司好？ 2016-08-27
- 做網(wǎng)站需要提供哪些資料？ 2022-06-07
- 企業(yè)做網(wǎng)站的作用 2016-11-03
- 如何建設(shè)響應(yīng)式網(wǎng)站？ 2016-09-30
- 深圳企業(yè)做網(wǎng)站的側(cè)重點在哪里？ 2022-05-02