通過(guò)代碼示例跟我學(xué)html5相關(guān)技術(shù)——html5文件上傳技術(shù)及應(yīng)用實(shí)例-資料下載頁(yè)
2024-11-07 14:05本頁(yè)面
【導(dǎo)讀】直接進(jìn)行表單提交。但在HTML5的概念形成后，W3C開(kāi)始考慮標(biāo)準(zhǔn)。幸運(yùn)的是iOS6中放開(kāi)了上傳限制。標(biāo)簽的type屬性為“file”建立一個(gè)文件上傳入口，可以訪問(wèn)相冊(cè)和相機(jī)。的時(shí)候，依然可以操作網(wǎng)頁(yè)當(dāng)中的其它元素，并不需要專(zhuān)門(mén)等待上傳的完成。束后，我們能夠獲取服務(wù)器發(fā)回的響應(yīng)，因此整個(gè)上傳過(guò)程都顯得相當(dāng)順理成章。使用FlashPlayer、外部插件或html的<form>標(biāo)簽就可以完成，根據(jù)服務(wù)器端就可以顯示上。HTML5文件上傳的<input>標(biāo)簽與普通的文件上傳代碼并沒(méi)有太大差異。input標(biāo)簽關(guān)聯(lián)了一個(gè)JavaScript函數(shù)在onchange上。文件元素和訪問(wèn)FileList的文件對(duì)象，選擇第一個(gè)文件files[0]。
【正文】 ”（允許任意 dropEffect。） “ uninitialized”。 （ 2） dataTransfer . items 拖拽的數(shù)據(jù)集合，是一個(gè)數(shù)組。 （ 3） dataTransfer. setDragImage (element, x, y) 拖拽過(guò)程中定義一個(gè)元素替換原有的，可以看到拖拽元素跟隨的效果。 （ 4） dataTransfer . addElement (element) Adds the given element to the list of elements used to render the drag feedback. （ 5） dataTransfer . types Returns a DOMStringList listing the formats that were set in the dragstart event. In addition, if any files are being dragged, then one of the types will be the string “ Files” . （ 6） data = dataTransfer . getData (format) Returns the specified data. If there is no such data, returns the empty string. 獲 取 自 定 義 的 數(shù) 據(jù) 格 式 ， 如 (text)。 通常是配合 使用。 （ 7） dataTransfer . setData (format, data) 添加自定義數(shù)據(jù)格式，如 (text, )。有點(diǎn)像楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 14/16 頁(yè) 14 jquery 里面的 data， setData()方法的第一個(gè)參數(shù)，也是 getData()方法唯一的一個(gè)參數(shù)，是用來(lái)保存數(shù)據(jù)類(lèi)型的字符串，取值是” text”或” URL”。 （ 8） dataTransfer . clearData ( [ format ] ) 清除自定義的數(shù)據(jù)格式及其數(shù)據(jù)。 （ 9） dataTransfer . files 返回所拖拽的文件列表對(duì)象。 拖拽上傳應(yīng)用主要使用了以下 HTML5 技術(shù)： HTML5 基于拖拽（ Dragamp。Drop）的事件機(jī)制 File API 可以很方便的讓 Web 應(yīng)用訪問(wèn)文件對(duì)象， File API 包括 FileList、 Blob、 File、 FileReader、URI scheme，本文主要講解拖拽上傳中用到的 FileList 和 FileReader 接口。 FormData FormData 是基于 XMLHttpRequest Level 2 的新接口，可以方便 web 應(yīng)用模擬 Form 表單數(shù)據(jù)，最重要的是它支持文件的二進(jìn)制流數(shù)據(jù)，這樣我們就能夠通過(guò)它來(lái)實(shí)現(xiàn) AJAX 向后端發(fā)送文件數(shù)據(jù)了。 拖拽上傳的技術(shù)要點(diǎn) （ 1）監(jiān)聽(tīng)拖拽 監(jiān)聽(tīng)頁(yè)面元素的拖拽事件，包括： dragenter、 dragover、 dragleave 和 drop，一定要將dragover 的默認(rèn)事件取消掉，不然無(wú)法觸發(fā) drop 事件。如需拖拽頁(yè)面里的元素，需要給其添加屬性 draggable=” true”； （ 2） 獲取拖拽文件 在 drop 事件觸發(fā)后通過(guò) 獲取拖拽文件列表， .length 屬性獲取文件數(shù)量， .type 屬性獲取文件類(lèi)型。 代碼示例 script type=text/javascript /** 獲得拖拽的目標(biāo)容器對(duì)象，也可以采用 代表拖拽的目標(biāo)容器為當(dāng)前頁(yè)面 */ 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 15/16 頁(yè) 15 var dragAnddropTargetContainer = (dragAnddropTargetContainerID)。 /** 為拖拽的目標(biāo)容器對(duì)象綁定拖進(jìn)事件 */ (39。dragenter39。, function(e) { ()。 }, false)。 /** 為拖拽的目標(biāo)容器對(duì)象綁定拖離事件 */ (39。dragleave39。, function(e) { dragleaveHandler(e)。 }, false)。 /** 為拖拽的目標(biāo)容器對(duì)象綁定拖來(lái)拖去事件 , 一定要注意的是：在 dragover 事件中一定要清除默 認(rèn)事件，不然會(huì)無(wú)法觸發(fā)后面的 drop 事件。 */ (39。dragover39。, function(e) { ()。 ()。 = 39。copy39。 }, false)。 /** 為拖拽的目標(biāo)容器對(duì)象綁定扔事件，在該事件中獲得所拖拽的文件信息 */ (39。drop39。, function(e) { dropUploadFileEventFunction(e)。 }, false)。 /** 將本地圖片拖拽到頁(yè)面中后要進(jìn)行的處理都在這 */ var dropUploadFileEventFunction = function(e) { /** 拖拽有個(gè)特別需要注意的事情就是，阻止事件冒泡和事件默認(rèn)行為，防止瀏覽器自動(dòng)打開(kāi)文件等行為，比如拖拽一個(gè) pdf，瀏覽器可能會(huì)打 開(kāi) pdf。 */ ()。 ()。 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 16/16 頁(yè) 16 /** 獲取文件列表 */ var fileList = 。 /** 檢測(cè)是否是拖拽文件到頁(yè)面中的目標(biāo)容器中的操作，也就是是否有有效的文件 */ if( == 0) { /** 如果沒(méi)有拖拽文件，則直接退出當(dāng)前的處理流程 */ return。 } /** 獲得所拖拽的文件（由于是單文件拖拽，因此只需要獲得第 1 個(gè)文件），并緩存在全局變量中 */ fileToUploaded = fileList[0]。 } /script
研究報(bào)告相關(guān)推薦
鄂ICP備17016276號(hào)-1