Javascript使用HTML5 File Api進行文件讀取
javascript 使用Html File Api進行文件讀取，注意“讀取”是只讀不寫，不可以主動獲取瀏覽器所在主機的文件列表。
Html5 中 FileApi主要有 FileUpload, File,FileList,FileError，Blob，FileReader,DataTransfer。
這里主要測試File.因此有必要給一個 test target
<form action="javascript:void(0)" method="post" enctype="mutipart/form-data">
<input type="file" name="upfile" id="upfile" accept="image/*" multiple="multiple" />
</form>
一. FileUpload是本質是file input 的封裝，也是 html4.01 和 xhtml 1.0 的api 這里不在多講
二. File 是文件對象html5的對象，在html5中，每一個被加入到file input中的文件都是一個對象，注意，這個對象一般無法手動生成（安全性考慮）。
var upfile = document.querySelector('#upfile');
upfile.onchange = function(evt)
{
var e = evt || window.event;
if(upfile.files.length>0)
{
alert((upfile.files[0] instanceOf File));
}
}</pre>
File的公開Api有（文件路徑無法看見吧）
lastModified
lastModifiedDate
name
type
三.FileList是一個文件列表 List，這個api很少
var upfile = document.querySelector('#upfile');
upfile.onchange = function(evt)
{
var e = evt || window.event;
if(upfile.files) // upfile.files，一般來說這個對象也是由系統提供的，不可以自己生成
{
alert(upfile.files);
}
}</pre>
主要api屬性
length
item(index)
四.FileError這個類可以自己生成，主要用來提示文件操作中的錯誤，以下基本為常量，可直接使用【類名.屬性】
ABORT_ERR: 3
ENCODING_ERR: 5
INVALID_MODIFICATION_ERR: 9
INVALID_STATE_ERR: 7
NOT_FOUND_ERR: 1
NOT_READABLE_ERR: 4
NO_MODIFICATION_ALLOWED_ERR: 6
PATH_EXISTS_ERR: 12
QUOTA_EXCEEDED_ERR: 10
SECURITY_ERR: 2
SYNTAX_ERR: 8
TYPE_MISMATCH_ERR: 11
五.Blob是二進制數據，在某些時候，為了讓數據庫能夠存儲各類數據，手寫需要把數據轉為Blob數據才行，在H5中有如下例子
var htmlParts = ["<a id=\"a\"><b id=\"b\">hey!<\/b><\/a>"];
var myBlob = new Blob(htmlParts, { "type" : "text\/xml" }); //2個參數都是可選，第一個是數組，第二個是 mine-type
//下面是一個利用Blob對象，生成可下載文件的例子。
var blob = new Blob(["Hello World"]);
var a = document.createElement("a");
a.href = window.URL.createObjectURL(blob);
a.download = "hello-world.txt";
a.textContent = "Download Hello World!";
body.appendChild(a);
//也可以和FormData配合使用來上傳文件
var formData = new FormData();
// Files formData.append(field, file, filename);
// Blobs formData.append(field, blob, filename);
//當然也可以使用ajax直接發送數據
xhr.send(blob); //目前未見到如何使用，希望讀者自行檢索網絡相關信息</pre>
六.FileReader文件讀物器，用于讀取客戶端文件到，注意，文件讀取完畢后并不會載入緩存
var upfile = document.querySelector('#upfile');
var fileReader = new FileReader();
fileReader.onload = function(evt)
{
if(FileReader.DONE==fileReader.readyState)
{
var img = document.createElement('img');
img.src = this.result; //是Base64的data url數據
document.body.appendChild(img);
console.log(fileReader);
}
}
fileReader.readAsDataURL(upfile.files[0]);
相關api
error: null
onabort: null
onerror: null
onload: null
onloadend: null
onloadstart: null
onprogress: null
readyState:
result:
DONE: 2
EMPTY: 0
LOADING: 1
abort:
function abort()
function readAsBinaryString:
function readAsBinaryString(File Object)
function readAsDataURL(File Object)
function readAsDataURL(File Object)
function readAsText(File Object);
七.DataTransfer 與DataTransferItemList數據傳輸對象，這類API主要應用于頁面數據的交互，如拖拽上傳，拖拽選擇等方面
注意：這個對象時事件由對象來生成，所以一般和拖拽搭配使用
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
div1, #div2
{float:left; width:100px; height:35px; margin:10px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src=";
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</body>
</html></pre>
或者拖拽外部文件進行數據復制和傳輸
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>www.meiweimimi.com/fqa/</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta http-equiv="imagetoolbar" content="no"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta http-equiv="X-UA-Compatible" content="IE=7">
</head>
<body>
<div id="drag" style="font-size:20px;padding:25px;border:1px dashed #666;text-align:center;color:#bbb;margin-bottom:10px">
將文件拖到此處
</div>
<script type="text/javascript" >
function dropHandler(e)
{
e.stopPropagation();
e.preventDefault();
var files = e.dataTransfer.files;
for(var i = 0, len = files.length; i < len; i++)
{
var f = files[i];
console.log(f);
}
}
function dragOverHandler(e)
{
e.stopPropagation();
e.preventDefault();
e.dataTransfer.dragEffect = 'copy'; //設置當拖拽到指定區域時，讓文件可被復制
}
function dragStartHandler(e)
{
}
var drag = document.getElementById('drag');
drag.addEventListener('drop', dropHandler, false);
drag.addEventListener('dragover', dragOverHandler, false);
drag.addEventListener('dragover', dragStartHandler, false);
</script>
</body>
</html></pre>
這些DataTransfer的是主要api
其中 setDragImage是拖拽時要顯示的效果圖，evt.dataTransfer.setDragImage(imageObject,x,y);
if (event.dataTransfer.setDragImage) {
var rainbow = document.getElementsByTagName('img')[0];
event.dataTransfer.setDragImage (rainbow, 0, 0);
}
try doing it