MIS2000Lab.的「HTML5 認證考試, 從零開始」#17 / #18 -- HTML5 File API

摘要:MIS2000Lab.的「HTML5 認證考試, 從零開始」#17 / #18 --HTML5 File API





 

上一篇文章:MIS2000Lab.的「HTML5 認證考試,從零開始」#16-- 使用JavaScript建構物件與方法

 

本文內容,將會在2014年底,碁峰出版社推出的HTML5新書裡面

不好意思,因為內容將會出書,所以目前公開的東西都經過大量簡化
日後出書的話,針對每一個方法、屬性都會仔細解說
 
9789863475750

HTML5、CSS、JavaScript 網頁程式設計與 MCSD 70-480 認證教材

MIS2000 Lab. 周棟祥/吳進魯

  • 出版商:碁峰
  • 出版日期:2015-04-09
  • 台幣定價:
  • $480
  • 售價:7.9 折 $379
  • 語言:繁體中文
  • ISBN:9863475750
  • ISBN-13:9789863475750
 
 
 
 
 
 
 
==== 與檔案互動的HTML5 File API ====
 
HTML5 File API(W3C官方網站http://www.w3.org/TR/FileAPI/)可以與使用者的檔案互動、拖拉到網頁上使用。
 
HTML5 File API重點介面(interface)如下:
  • Blob介面是一種不可變的(immutable)原始資料(raw data,或二進位的原始資料),一個Blob是一種定義資料型態的type屬性,例如網頁常見的text/plain代表純文字。
  •  
  • File介面,唯讀的資訊屬性,繼承自Blob,只有兩個屬性:檔名(name)屬性與檔案修改日期(lastModifiedDate)屬性。
  •  
  • FileList介面,可選取多個檔案(File)物件,例如檔案上傳時<input type=”file”>,或是使用drop事件,讓使用者以拖拉(drag-and-drop)的方式與網頁互動。
  •  
  • FileReader介面,應用程式可以讀取一個檔案、或是讀取一個Blob到JavaScript變數裡面。
  •  
  • URL Scheme介面(W3C網站有提到,微軟教材沒提到),使用二進位的資料(例如檔案)並作為網頁程式的參考。
 
 
==== 讀取文字檔 ====
 
由使用者選取一個文字檔,
然後透過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>  

 

 

 
***************************************************************************************************
 
上面的文章提到HTML5 File API
 
 
 
這篇文章會提到<video>與<audio>標籤
 
 
 
HTML5提供新的<video>標籤讓您在網頁裡面就能播放影片,而不需要外掛軟體(pug-in),
這是HTML5的原生功能,對於平板、智慧手機等行動周邊更有效益。
 
播放一段MP4檔案的寫法,
如同<img>請把多媒體檔案的目錄(路徑)與檔名寫在src屬性裡面:
 

<video src="MyVideo.mp4"></video>

 

完整的範例如下:
 

<video src="MyVideo.mp4"
width="300" height="200"
poster="MyPoster.jpg" 註:以這張圖片來表示這段影片。

autoplay="autoplay" 註:自動播放。

muted="muted"
controls="controls"
loop="loop" > 註:重複播放。

</video>

 

==== <video>的<source>標籤可支援多種影片格式 ====
 
 
如果在<video>標籤裡面寫了多個<source>標籤時,
 
瀏覽器遇見無法播放的影片格式就會自動使用下一個影片來取代。
 

<video poster="MyPoster.jpg" autoplay controls>

<source src="MyVideos/MyVideo.mp4" type='video/mp4' />
<source src="MyVideos/MyVideo.webm" type='video/webm' />
<source src="MyVideos/MyVideo.ogv" type='video/ogg' />

<!-- 可以放置flash或silverlight檔案作為備用 -->
<!-- 也可以放一段純文字說明,以免使用者的瀏覽器不支援<vedio>標籤 -->


<a href="MyVideos/MyVideo.webm">
如果不能播放影片,請按此連結</a>

</video>

 

==== 以JavaScript程式碼與影片互動 ====
 

function createVideoElement(nameOfVideoFile) {  
// 創建一個 video物件並為它設定屬性。  
var newVideo = document.createElement("video");  
  
newVideo.src = nameOfVideoFile;  
newVideo.loop = true;  
newVideo.autoplay = true;  
newVideo.controls = true;  
newVideo.poster = "ImageLoading.png";  
  
// 在現有網頁內,加入video物件。  
var hostElem = document.getElementById("videoDir");  
hostElem.appendChild(newVideo);  
} 

 

video的事件(event)如下:

aVideo.addEventListener("loadedmetadata", function() {  
alert("Video duration: " + aVideo.duration);  
}, false);  
  
aVideo.addEventListener("loadeddata", function() {  
aVideo.play();  
}, false);  
  
aVideo.addEventListener("timeupdate", function() {  
alert("Video current time: " + aVideo.currentTime);  
}, false); 

 

 
==== 使用<audio>標籤來播放音樂 ====
 
如同上一節的<video>標籤播放影片,HTML5提供的<audio>標籤可以播放音樂而不需要外掛軟體。
 
src屬性,用法如同<img>與<video>請把多媒體檔案的目錄(路徑)與檔名。
<audio src="MyAudio.mp3"></audio>
 
可以透過JavaScript來播放音樂,本節的<audio>大致與上一節的<video>雷同,使用到
 
controls屬性(播放、暫停)、autoplay屬性、loop屬性(重複播放)。
 
<audio>也可以搭配<source>標籤在內,就連事件也跟<video>雷同。
 
 
 

本文內容,將會在2014年底,碁峰出版社推出的HTML5新書裡面

不好意思,因為內容將會出書,所以目前公開的東西都經過大量簡化
日後出書的話,針對每一個方法、屬性都會仔細解說
 
 
不要走開,馬上回來
 
 
 
 
HTML5、CSS、JavaScript 網頁程式設計與 MCSD 70-480 認證教材
9789863475750

HTML5、CSS、JavaScript 網頁程式設計與 MCSD 70-480 認證教材

MIS2000 Lab. 周棟祥/吳進魯

  • 出版商:碁峰
  • 出版日期:2015-04-09
  • 台幣定價:
  • $480
  • 售價:7.9 折 $379
  • 語言:繁體中文
  • 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

 
 

 
 

我將思想傳授他人, 他人之所得,亦無損於我之所有;

猶如一人以我的燭火點燭,光亮與他同在,我卻不因此身處黑暗。----Thomas Jefferson

寫信給我,不要私訊 --  mis2000lab (at) yahoo.com.台灣  或  school (at) mis2000lab.net



ASP.NET遠距教學、線上課程(Web Form + MVC)。 第二門 課程「四折」-- 以MVC課程 作優惠。
第一天課程, "完整" 試聽。  如不滿意  全額退費!
................   facebook社團   https://www.facebook.com/mis2000lab   ......................

................  YouTube (ASP.NET) 線上教學影片  http://goo.gl/rGLocQ

*********************************************************************************************

*** ASP.NET MVC線上課程 第一天 免費看 (5.5小時) *** 

************************************************************(歡迎索取,免費申請)*****

 

Blog文章 "附的範例" 無法下載,請看 這裡 ...... https://dotblogs.com.tw/mis2000lab/2016/03/14/2008_2015_mis2000lab_sample_download

請看我們的「售後服務」範圍(嚴格認定)

......................................................................................................................................................

...................................................................................................................................................... 

[遠距教學、教學影片] ASP.NET (Web Form) 課程 上線了!MIS2000Lab.主講

事先錄製好的影片,並非上課時側錄!   觀看影片時,有如我「一對一」跟您面對面講課

 

    MIS2000 Lab.  線上教學影片(YouTube) **免費觀賞**