[JS進階] HTML5 之文件操作(file)
前言
在 HTML 文檔中 <input type="file"> 標簽每出現一次，一個 FileUpload 對象就會被創建。
該元素包括一個文本輸入字段，用來輸入文件名稱。另一個button，用來打開文件選擇對話框以便圖形化選擇文件。
該元素的 value 屬性保存了用戶指定的文件的名稱。可是當包括一個 file-upload 元素的表單被提交的時候。瀏覽器會向server發送選中的文件的內容而不不過發送文件名稱。
當用戶選擇或編輯一個文件名稱，file-upload 元素觸發 onchange 事件句柄。看個簡單樣例：
這裏讀取一個文件， 顯示在div 中。<!-- oscar999 --> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta name="author" content="oscar999"> <title></title> <script> function handleFiles(files) { if(files.length) { var file = files[0]; var reader = new FileReader(); reader.onload = function() { document.getElementById("filecontent").innerHTML = this.result; }; reader.readAsText(file); } } </script> </head> <body> <input type="file" id="file" onchange="handleFiles(this.files)"/> <div id="filecontent"></div> </body> </html>
(在IE8 中 無效。 this.files 無法讀取文件。
這個屬於html5 的特性)
當選擇了一個文件時，就會把包括這個文件的列表（一個FileList對象）作為參數傳給handleFiles()函數了。
這個FileList對象相似一個數組，能夠知道文件的數目，而它的元素就是File對象了。
從這個File對象能夠獲取name、size、lastModifiedDate和type等屬性。
把這個File對象傳給FileReader對象的讀取方法，就能讀取文件了。
HTML5 Drag and Drop File
HTML5 支持的File 的操作不不過文件的選擇，
在HTML5 之前須要使用 Applet 和 SilverLight 才幹達到的文件拖拽功能，在HTML5 中也能輕松的實現，
看代碼：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="author" content="oscar999">
<title></title>
</head>
<body>
<div id="dropbox"> Drop Here </div>
<div id="filecontent"></div>
<script>
var dropbox = document.getElementById("dropbox");
dropbox.addEventListener("dragenter", dragenter, false);
dropbox.addEventListener("dragover", dragover, false);
dropbox.addEventListener("drop", drop, false);
function dragenter(e) {
e.stopPropagation();
e.preventDefault();
}
function dragover(e) {
e.stopPropagation();
e.preventDefault();
}
function drop(e) {
e.stopPropagation();
e.preventDefault();
var dt = e.dataTransfer;
var files = dt.files;
if(files.length)
{
var file = files[0];
var reader = new FileReader();
reader.onload = function()
{
document.getElementById("filecontent").innerHTML = this.result;
};
reader.readAsText(file);
}
}
</script>
</body>
</html>
讀取文件內容
在第一個樣例中。 我們使用 FileReader類來讀取文件的內容，
在 W3C 草案中，File 對象只包括文件名稱。文件類型等只讀屬性;FileReader用於內容讀取和監控讀取狀態。
（在firefox 中， 能夠直接使用 var fileBinary = file.getAsBinary();? 讀取文件的二進制源代碼）
FileReader提供的方法包括：
1. readAsBinaryString
2. readAsDataURL
3. readAsText
4. abort
.........
下面，舉一個 使用 FileReader 將用戶選擇的圖片不通過後臺即時顯示出來的樣例。
function handleFiles(files){
for (var i = 0; i < files.length; i++) {
var file = files[i];
var imageType = /image.*/;
if (!file.type.match(imageType)) {
continue;
}
var img = document.createElement("img");
img.classList.add("obj");
img.file = file;
preview.appendChild(img);
var reader = new FileReader();
reader.onload = (function(aImg){
return function(e){
aImg.src = e.target.result;
};
})(img);
reader.readAsDataURL(file);
}
}同後端的交互
在一般的HTML? 中，使用方式是把file input 放在form 中， 以POST 方式把文件傳遞到後端。在 HTML5 中， 也能夠通過 FileReader 的 readAsBinaryString 方法讀取到文件的二進制碼。然後通過 XMLHttpRequest 的 sendAsBinary 方法將其發送出去。
var xhr = new XMLHttpRequest();
xhr.open("POST", "url");
xhr.overrideMimeType(‘text/plain; charset=x-user-defined-binary‘);
xhr.sendAsBinary(binaryString);參考
- W3C File API
- MDC File
瀏覽器支持
適用於 Firefox 3.6+ ，Chrome 。部分適用於其它支持 HTML 5 接口的瀏覽器，全然不適用於 IE8 及下面版本號[JS進階] HTML5 之文件操作(file)