日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
HTML5FileAPI應(yīng)用實(shí)例

關(guān)于HTML 5，已陸續(xù)報(bào)道了幾篇關(guān)于HTML 5應(yīng)用技巧方面的文章，比如《探秘HTML 5鏈接預(yù)取功能》、《HTML 5 Web Sockets應(yīng)用初探》等等，下面我們將介紹一個(gè)簡(jiǎn)單的應(yīng)用，該應(yīng)用主要使用了HTML 5中的FileReader方法，F(xiàn)ileReader就是HTML 5所提供的File API。

為湖北等地區(qū)用戶提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù)，及湖北網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為成都做網(wǎng)站、網(wǎng)站設(shè)計(jì)、外貿(mào)營(yíng)銷網(wǎng)站建設(shè)、湖北網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！

推薦專題： HTML 5  下一代Web開(kāi)發(fā)標(biāo)準(zhǔn)詳解

在HTML 5里，從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ò)調(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è)畫(huà)板，你可以從本地文件系統(tǒng)里拖拽進(jìn)去一個(gè)圖片，或者你也可以用文件選擇框來(lái)選擇圖片。例子中，請(qǐng)只選擇圖片文件，請(qǐng)注意，該例子中并沒(méi)有添加文件過(guò)濾和文件類型檢查。請(qǐng)記住，沒(méi)有一個(gè)瀏覽器完全實(shí)現(xiàn)了HTML 5，這個(gè)例子需要在支持HTML 5的瀏覽器上運(yùn)行，比如Firefox3.5以上。

下面就是這個(gè)例子 (拖拽一個(gè)圖片到畫(huà)板里)：

實(shí)現(xiàn)File API的主要方法非常的簡(jiǎn)單，就像下面：

 
 
 
 
    
  
  
  
  
  1. function imagesSelected(myFiles) {  
    2. 
  
  
  
  
  2.   for (var i = 0, f; f = myFiles[i]; i++) {  
    3. 
  
  
  
  
  3.     var imageReader = new FileReader();  
    4. 
  
  
  
  
  4.     imageReader.onload = (function(aFile) {  
    5. 
  
  
  
  
  5.       return function(e) {  
    6. 
  
  
  
  
  6.         var span = document.createElement(’span‘);  
    7. 
  
  
  
  
  7.         span.innerHTML = [''].join(”);  
    8. 
  
  
  
  
  8.         document.getElementById(‘thumbs’).insertBefore(span, null);  
    9. 
  
  
  
  
  9.       };  
    10. 
  
  
  
  
  10.     })(f);  
    11. 
  
  
  
  
  11.     imageReader.readAsDataURL(f);  
    12. 
  
  
  
  
  12.   }  
    13. 
  
  
  
  
  13. }  
    14. 
  
  
  
  
  14.  
    15. 
  
  
  
  
  15. function dropIt(e) {    
    16. 
  
  
  
  
  16.    imagesSelected(e.dataTransfer.files);   
    17. 
  
  
  
  
  17.    e.stopPropagation();    
    18. 
  
  
  
  
  18.    e.preventDefault();     
    19. 
  
  
  
  
  19. }   
    20.

 選擇在上放置ondrop事件：

 
 
 
 
    
  
  
  
  
  1.       
    2. 
  
  
  
  
  2.       
    3. 
  
  
  
  
  3.  
    4.

這個(gè)例子只是演示了拖拽本地文件到畫(huà)板里，主要是想展示出HTML 5 File API簡(jiǎn)單但又強(qiáng)大的能力。

代碼下載：https://www.ibm.com/developerworks/mydeveloperworks/files/app?lang=en#/person/270000CN12/file/c12b834e-5ec2-457d-80fa-97df433938d7

原文作者：Bob Leah

原文鏈接：https://www.ibm.com/developerworks/mydeveloperworks/blogs/bobleah/entry/
html5_code_example_of_file_api_drag_drop_hard_drive_files_to_a_webpage28?lang=en

【編輯推薦】

  1. HTML 5學(xué)前熱身 實(shí)用技巧及應(yīng)用詳解
  2. 現(xiàn)在如何在你的站點(diǎn)上使用HTML 5
  3. HTML 5視頻標(biāo)簽全屬性詳解
  4. 為網(wǎng)站提速 探秘HTML 5鏈接預(yù)取功能
  5. 從零開(kāi)始構(gòu)建HTML 5 Web頁(yè)面

當(dāng)前標(biāo)題：HTML5FileAPI應(yīng)用實(shí)例
標(biāo)題URL：http://m.5511xx.com/article/dpcgcce.html