MIS2000Lab.的「HTML5 認證考試，從零開始」#17--與檔案互動的HTML5 File API

DAY 17

MIS2000Lab.的「HTML5 認證考試，從零開始」--菜鳥的30天馬拉松系列第 17 篇

javascript html 網頁設計 asp.net 網頁鐵人賽網頁程式 html5 pi mis2000lab html

mis2000lab

2014-10-12 20:47:00

4167 瀏覽

分享至

上一篇文章：http://ithelp.ithome.com.tw/question/10159336

==== 與檔案互動的HTML5 File API ====

HTML5 File API（W3C官方網站http://www.w3.org/TR/FileAPI/）可以與使用者的檔案互動、拖拉到網頁上使用。HTML5 File API重點介面（interface）如下：

[ul] [li]Blob介面是一種不可變的（immutable）原始資料（raw data，或二進位的原始資料），一個Blob是一種定義資料型態的type屬性，例如網頁常見的text/plain代表純文字。[/li] [li]File介面，唯讀的資訊屬性，繼承自Blob，只有兩個屬性：檔名（name）屬性與檔案修改日期（lastModifiedDate）屬性。[/li] [li]FileList介面，可選取多個檔案（File）物件，例如檔案上傳時<input type=”file”>，或是使用drop事件，讓使用者以拖拉（drag-and-drop）的方式與網頁互動。[/li] [li]FileReader介面，應用程式可以讀取一個檔案、或是讀取一個Blob到JavaScript變數裡面。[/li] [li]URL Scheme介面（W3C網站有提到，微軟教材沒提到），使用二進位的資料（例如檔案）並作為網頁程式的參考。[/li][/ul]

==== 讀取文字檔 ====

由使用者選取一個文字檔，然後透過onLoadTextFile函式將文字檔的內容，呈現在多列的文字方塊（TextArea）裡面。

<input type="file" id="theTextFile" onchange="onLoadTextFile()" />

<textarea id="theMessageArea" rows="30" cols="40"></textarea>

<script type="text/javascript">
function onLoadTextFile() {
var theFile = document.getElementById("theTextFile");

// 確定選取了一個文字檔案，而非其他格式。
if (theFile.files.length != 0 && theFile.files[0].type.match(/text.*/)) 
{
var reader = new FileReader();
reader.onload = function(e){
var MessageArea = document.getElementById("theMessageArea");
MessageArea.value = e.target.result;
};
reader.onerror = function(e){
alert("例外狀況，無法讀取文字檔");
};

// 讀取文字檔案，第二個參數預設是UTF-8。
reader.readAsText(theFile.files[0], "ISO-8859-1");
} 
else {
alert("請選取一個文字檔");
}
}
</script>

==== 讀取二進位檔（如：圖片）====

跟上面的程式幾乎雷同，唯一修改的部分只有：

// 確定選取了一個二進位檔案，而非其他格式。
if (theFile.files.length != 0 && theFile.files[0].type.match(/image.*/)) 
{
var reader = new FileReader();
reader.onload = function(e){
var theImg = document.getElementById("theImage");
theImg.src = e.target.result;
};

本範例搭配ASP.NET網頁專用的ASP.NET Web控制項也可以正常運作，

只要在JavaScript裡面，把最上方的兩個HTML表單的id，改成ASP.NET Web控制項的ID即可。

==== 整合拖拉（drag-and-drop）的行為 ====

HTML5支援拖拉的行為，讓使用者與網頁的互動更為緊密。要讓元素可使用拖拉必須依循下列作法：

設定draggable屬性為true。
設定dragstart事件。
在事件（Event）物件的dadaTransfer屬性設定拖拉的時候，資料傳遞的資訊給DataTransfer物件。

下面範例，展示<div>裡面的文字可以被拖拉，請試試看。

<div draggable="true" ondrag="handleDrag(event)">
<b>Some content</b> to be dragged.
</div>

<script type="text/javascript">
function handleDrag(event) {
event.dataTransfer.effectAllowed = "copy";
event.dataTransfer.setData("text/plain", event.target.innerHTML);
}
</script>

下一篇文章將會介紹 -- 與多媒體的整合，<video>標籤

http://ithelp.ithome.com.tw/question/10159592

===============================================
本系列文章已經集結出書
HTML5、CSS、JavaScript 網頁程式設計與 MCSD 70-480 認證教材

MIS2000 Lab. 周棟祥/吳進魯