通過代碼示例跟我學(xué)html5相關(guān)技術(shù)——html5文件上傳技術(shù)及應(yīng)用實(shí)例(參考版)
2024-11-11 14:05本頁面
【正文】 } /** 獲得所拖拽的文件（由于是單文件拖拽，因此只需要獲得第 1 個(gè)文件），并緩存在全局變量中 */ fileToUploaded = fileList[0]。 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 16/16 頁 16 /** 獲取文件列表 */ var fileList = 。 */ ()。 }, false)。drop39。 }, false)。 = 39。, function(e) { ()。 */ (39。 }, false)。dragleave39。 }, false)。dragenter39。 代碼示例 script type=text/javascript /** 獲得拖拽的目標(biāo)容器對象，也可以采用 代表拖拽的目標(biāo)容器為當(dāng)前頁面 */ 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 15/16 頁 15 var dragAnddropTargetContainer = (dragAnddropTargetContainerID)。 拖拽上傳的技術(shù)要點(diǎn) （ 1）監(jiān)聽拖拽 監(jiān)聽頁面元素的拖拽事件，包括： dragenter、 dragover、 dragleave 和 drop，一定要將dragover 的默認(rèn)事件取消掉，不然無法觸發(fā) drop 事件。Drop）的事件機(jī)制 File API 可以很方便的讓 Web 應(yīng)用訪問文件對象， File API 包括 FileList、 Blob、 File、 FileReader、URI scheme，本文主要講解拖拽上傳中用到的 FileList 和 FileReader 接口。 （ 9） dataTransfer . files 返回所拖拽的文件列表對象。有點(diǎn)像楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 14/16 頁 14 jquery 里面的 data， setData()方法的第一個(gè)參數(shù)，也是 getData()方法唯一的一個(gè)參數(shù)，是用來保存數(shù)據(jù)類型的字符串，取值是” text”或” URL”。 通常是配合 使用。 （ 3） dataTransfer. setDragImage (element, x, y) 拖拽過程中定義一個(gè)元素替換原有的，可以看到拖拽元素跟隨的效果。） “ uninitialized”。） “ linkMove”（允許值為” link”和” move”的 dropEffect。） “ copyMove”（允許值為” copy”和” move”的 dropEffect。 典型的屬性 （ 1） dataTransfer . dropEffect [ = value ] 拖拽效果，可選值： “ none”（不能把拖動的元素放在這里。 ”語句將要修改為如下的語句： = encodeHTML( )。 }。39。/, 39。39。39。39。39。/g, 39。 但如果要在頁面上預(yù)覽上傳的文本文件，如果直接使用 innerHTML 插入文本的內(nèi)容，則需要對 HTML 中一些特殊字符進(jìn)行實(shí)體編碼，這樣才能保證正常顯示文本?！睂⒖梢詫?shí)現(xiàn)將上傳的文件以文本形式讀入到頁面中并顯示出。 //顯示出文件的內(nèi)容 } 如果將上面“ (fileToUploaded)。 //將文件以二進(jìn)制形式讀入頁面 =function(f){ var result=(showUploadFileResultDivTagID)。 （ 8）以二進(jìn)制方式讀起上傳的文件 下面代碼中的 fileToUploaded 代表上傳的文件 var reader = new FileReader()。 事件 描述 onabort 中斷 onerror 出錯(cuò) onloadstart 開始 onprogress 正在讀取 onload 成功讀取 onloadend 讀取完成，無論成功失敗 （ 7） FileReader 對象中的 result 屬性 方法名 參數(shù) 描述 readAsBinaryString file 將文件讀取為二進(jìn)制編碼 readAsText file,[encoding] 將文件讀取為文本 readAsDataURL file 將文件讀取為 DataURL abort (none) 終端讀取操作 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 12/16 頁 12 上傳的文件一旦開始讀取，無論成功或失敗，實(shí)例的 result 屬性都會被填充。這里的小文件通常是指圖像與 html 等格式的文件。 readAsBinaryString：該方法將文件讀取為二進(jìn)制字符串，通常我們將它傳送到后端，后端可以通過這段字符串存儲文件。 readAsText：該方法有兩個(gè)參數(shù)，其中第二個(gè)參數(shù)是文本的編碼 方式，默認(rèn)值為 UTF8。 （ 5） FileReader 接口的 方法 FileReader 接口有 4 個(gè)方法，其中 3 個(gè)用來讀取文件，另一個(gè)用來中斷讀取。 } 這時(shí) 你如果用 FireBug 等類似調(diào)試工具查看 DOM 的話，會看到 img標(biāo)簽的 src 屬性是一個(gè)超長的文件二進(jìn)制數(shù)據(jù)，所以如果 DOM 有很多這類圖片，那就要當(dāng)心瀏覽器性能了，因?yàn)檫@些數(shù)據(jù)極大地?cái)U(kuò)充的頁面的代碼量，而每次頁面的 reflow 都會對瀏覽器形成很大的負(fù)擔(dān)， （ 4） JS 獲得圖片的原始寬高 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 11/16 頁 11 HTML5 提供了一個(gè)新屬性 naturalWidth/naturalHeight 可以直接獲取圖片的原始寬高。 }。 = previewUploadImageHTMLTagString。 /。 id=39。 maxwidth:160px。+previewImageURL+39。 } /** 獲得預(yù)覽圖片的 URL 地址 */ var previewImageURL = 。 = function (e)
研究報(bào)告相關(guān)推薦
鄂ICP備17016276號-1