iT邦幫忙

DAY 17
4

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

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

上一篇文章: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支援拖拉的行為,讓使用者與網頁的互動更為緊密。要讓元素可使用拖拉必須依循下列作法:

  1. 設定draggable屬性為true。
  2. 設定dragstart事件。
  3. 在事件(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. 周棟祥/吳進魯

出版商:碁峰
出版日期:2015-04-09

語言:繁體中文
ISBN:9863475750
ISBN-13:9789863475750

PChome http://24h.pchome.com.tw/books/prod/DJAV0S-A90060ASI
博客來 http://www.books.com.tw/products/0010671214
天瓏書局 https://www.tenlong.com.tw/items/9863475750?item\_id=1003110


上一篇
MIS2000Lab.的「HTML5 認證考試,從零開始」#16--使用JavaScript建構物件與方法
下一篇
MIS2000Lab.的「HTML5 認證考試,從零開始」#18--HTML5與多媒體的整合
系列文
MIS2000Lab.的「HTML5 認證考試,從零開始」--菜鳥的30天馬拉松30

尚未有邦友留言

立即登入留言