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

線上課程教學,遠距教學 (Web Form 約 51hr)  https://dotblogs.com.tw/mis2000lab/2016/02/01/aspnet_online_learning_distance_education_VS2015

線上課程教學,遠距教學 (ASP.NET MVC 約 135hr)  https://dotblogs.com.tw/mis2000lab/2018/08/14/ASPnet_MVC_Online_Learning_MIS2000Lab

 

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

 (1) 第一天 ASP.NET MVC5 完整影片(5.5小時 / .NET 4.x版)免費試聽。影片 https://youtu.be/9spaHik87-A 

 (2) 第一天 ASP.NET Core MVC 完整影片(3小時 / .NET Core 6.0~8.0)免費試聽。影片 https://youtu.be/TSmwpT-Bx4I 

[學員感言] mis2000lab課程評價 - ASP.NET MVC , WebForm  。 https://mis2000lab.medium.com/%E5%AD%B8%E5%93%A1%E6%84%9F%E8%A8%80-mis2000lab%E8%AA%B2%E7%A8%8B%E8%A9%95%E5%83%B9-asp-net-mvc-webform-77903ce9680b  


ASP.NET遠距教學、線上課程(Web Form + MVC)。 第一天課程, "完整" 試聽。 

.........   facebook社團   https://www.facebook.com/mis2000lab   ......................

.........  YouTube (ASP.NET) 線上教學影片  https://www.youtube.com/channel/UC6IPPf6tvsNG8zX3u1LddvA/

 

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

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

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

ASP.NET MVC  => .NET Core MVC 線上教學  ...... 第一天課程 完整內容 "免費"讓您評估 / 試聽

[遠距教學、教學影片] ASP.NET (Web Form) 課程 上線了!MIS2000Lab.主講   事先錄好的影片,並非上課側錄!   觀看時,有如「一對一」面對面講課