HTML5 實(shí)現(xiàn)一個(gè)訪問(wèn)本地文件的實(shí)例_HTML5教程
推薦:html5 桌面提醒:Notifycations應(yīng)用介紹HTML5中的桌面提醒(web notifications)可以在當(dāng)前頁(yè)面窗口彈出一個(gè)消息框,這個(gè)消息框是跨Tab 窗口的,這在用戶打開(kāi)多個(gè) tab 瀏覽網(wǎng)頁(yè)時(shí),提醒比較方便,容易讓用戶看到
在前面的幾篇文章里,我向大家共享了幾個(gè)HTML5的例子,分別是拖拽功能演示,頁(yè)面內(nèi)容可編輯化演示 和 本地存儲(chǔ)功能演示。 今天,我將向大家分享一個(gè)簡(jiǎn)單的應(yīng)用,用來(lái)演示使用FileReader的方法, FileReader是HTML5里提供的一個(gè)文件操作API。當(dāng)你在看我前面所寫的HTML 5例子時(shí),我正在思考創(chuàng)建一個(gè)簡(jiǎn)單但又適用的例子、以一種更新奇的方式來(lái)演練這些HTML5新特性。我的目標(biāo)并不是想單純的展示這些HTML 5 API,而是想用例子來(lái)告訴開(kāi)發(fā)人員如何真正的以一種實(shí)用的和創(chuàng)新的方式實(shí)現(xiàn)這些API。
在HTML5里,從Web網(wǎng)頁(yè)上訪問(wèn)本地文件系統(tǒng)變的十分的簡(jiǎn)單,那就是使用File API。這個(gè)File規(guī)范說(shuō)明里提供了一個(gè)API來(lái)表現(xiàn)Web應(yīng)用里的文件對(duì)象,你可以通過(guò)編程來(lái)選擇它們,訪問(wèn)它們的信息。這個(gè)File API包括:
一個(gè)FileList序列,代表著由本地系統(tǒng)里選中的單個(gè)的文件組成的數(shù)組。用來(lái)選擇文件的用戶接口可以通過(guò)<input type=”file”>調(diào)用實(shí)現(xiàn)。
一個(gè)Blob接口,它代表原始二進(jìn)制數(shù)據(jù),通過(guò)Blob對(duì)象你可以訪問(wèn)里面的字節(jié)數(shù)據(jù)。
一個(gè)File接口,它里面存有文件的只讀屬性信息,像文件名,文件類型,文件數(shù)據(jù)訪問(wèn)的地址。
一個(gè)FileReader接口,它提供了讀取一個(gè)文件的方法,和一個(gè)獲取文件讀取結(jié)果的事件模型。
一個(gè)FileError接口和一個(gè)FileException對(duì)象,它們用來(lái)定義這個(gè)規(guī)范中的錯(cuò)誤產(chǎn)生條件。
如何使用這個(gè)例子:在這個(gè)例子中,我給出了一個(gè)畫板,你可以從本地文件系統(tǒng)里拖拽進(jìn)去一個(gè)圖片,或者你也可以用文件選擇框來(lái)選擇圖片。例子中,請(qǐng)只選擇圖片文件,我并沒(méi)有添加文件過(guò)濾和文件類型檢查。請(qǐng)記住,沒(méi)有一個(gè)瀏覽器完全實(shí)現(xiàn)了HTML5,這個(gè)例子需要在支持HTML5的瀏覽器上運(yùn)行,比如Firefox3.5以上。
實(shí)現(xiàn)File API的主要方法非常的簡(jiǎn)單,就像下面:
復(fù)制代碼 代碼如下:www.hl5o.cn
function imagesSelected(myFiles) {
for (var i = 0, f; f = myFiles[i]; i++) {
var imageReader = new FileReader();
imageReader.onload = (function(aFile) {
return function(e) {
var span = document.createElement(‘span‘);
span.innerHTML = ['<img class="images" src="', e.target.result,'" title="', aFile.name, '"/>'].join(”);
document.getElementById(‘thumbs’).insertBefore(span, null);
};
})(f);
imageReader.readAsDataURL(f);
}
}
function dropIt(e) {
imagesSelected(e.dataTransfer.files);
e.stopPropagation();
e.preventDefault();
}
我選擇在<td>上放置我的ondrop事件:
復(fù)制代碼 代碼如下:www.hl5o.cn
<td align=”left” height=”105″ ondragenter=”return false” ondragover=”return false” ondrop=”dropIt(event)”>
<output id=”thumbs”></output>
</td>
這個(gè)例子中,我只是拖拽本地文件到畫板里。然而我想它能向你表明File API的簡(jiǎn)單但強(qiáng)大的能力
分享:HTML5教程之html 5 本地?cái)?shù)據(jù)庫(kù)(Web Sql Database)HTML5的Web SQL Databases(html5 本地?cái)?shù)據(jù)庫(kù))的確很誘惑人,當(dāng)你發(fā)現(xiàn)可以用與mysql查詢一樣的查詢語(yǔ)句來(lái)操作本地?cái)?shù)據(jù)庫(kù)時(shí),你會(huì)發(fā)現(xiàn)這東西挺有趣的。今天,我們一起來(lái)了解HTML 5的Web SQL Database API:openDatabase、transaction、executeSql。
相關(guān)HTML5教程:
- 只要五步 就可以用HTML5/CSS3快速制作便簽貼特效(圖)
- 網(wǎng)易微博Web App用HTML5開(kāi)發(fā)的過(guò)程介紹
- HTML5 對(duì)各個(gè)標(biāo)簽的定義與規(guī)定:body的介紹
- 關(guān)于HTML5的安全問(wèn)題開(kāi)發(fā)人員需要牢記的
- 關(guān)于HTML5的22個(gè)初級(jí)技巧(圖文教程)
- 開(kāi)發(fā)人員所需要知道的HTML5性能分析面面觀
- HTML5 Web Database 數(shù)據(jù)庫(kù)的SQL語(yǔ)句的使用方法
- HTML5實(shí)踐-圖片設(shè)置成灰度圖
- HTML5安全介紹之內(nèi)容安全策略(CSP)簡(jiǎn)介
- HTML5 Web存儲(chǔ)方式的localStorage和sessionStorage進(jìn)行數(shù)據(jù)本地存儲(chǔ)案例應(yīng)用
- Bootstrap 學(xué)習(xí)分享
- input元素的url類型和email類型簡(jiǎn)介
HTML5教程Rss訂閱Div+Css教程搜索
HTML5教程推薦
- 網(wǎng)易微博Web App用HTML5開(kāi)發(fā)的過(guò)程介紹
- 淺談three.js中的needsUpdate的應(yīng)用
- html5配合css3實(shí)現(xiàn)帶提示文字的輸入框(擺脫js)
- html5指南-4.使用Geolocation實(shí)現(xiàn)定位功能
- 用HTML5實(shí)現(xiàn)網(wǎng)站在windows8中貼靠的方法
- HTML5之WebGL 3D概述(上)—WebGL原生開(kāi)發(fā)開(kāi)啟網(wǎng)頁(yè)3D渲染新時(shí)代
- HTML5之SVG 2D入門12—SVG DOM及DOM操作介紹
- HTML5 Canvas像素處理使用接口介紹
- HTML5 實(shí)現(xiàn)一個(gè)訪問(wèn)本地文件的實(shí)例
- 關(guān)于HTML5的22個(gè)初級(jí)技巧(圖文教程)
- 相關(guān)鏈接:
復(fù)制本頁(yè)鏈接| 搜索HTML5 實(shí)現(xiàn)一個(gè)訪問(wèn)本地文件的實(shí)例
- 教程說(shuō)明:
HTML5教程-HTML5 實(shí)現(xiàn)一個(gè)訪問(wèn)本地文件的實(shí)例
。