通過(guò)代碼示例跟我學(xué)html5相關(guān)技術(shù)——html5文件上傳技術(shù)及應(yīng)用實(shí)例-全文預(yù)覽
【正文】 據(jù)，所以如果 DOM 有很多這類圖片，那就要當(dāng)心瀏覽器性能了，因?yàn)檫@些數(shù)據(jù)極大地?cái)U(kuò)充的頁(yè)面的代碼量，而每次頁(yè)面的 reflow 都會(huì)對(duì)瀏覽器形成很大的負(fù)擔(dān)， （ 4） JS 獲得圖片的原始寬高 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 11/16 頁(yè) 11 HTML5 提供了一個(gè)新屬性 naturalWidth/naturalHeight 可以直接獲取圖片的原始寬高。 = previewUploadImageHTMLTagString。 id=39。+previewImageURL+39。 = function (e) { /** 首先清除動(dòng)態(tài)添加的 img標(biāo)簽 */ var previewImageNode = (previewImageImageTagID)。 (fileToUploaded)。 (39。 } var previewImageURL= 。 var imageType = /image.*/。 （ 2）主要的事件和方法 FileReader 對(duì)象 提供 很 多事 件， onload 、 onError 以 及四 種讀 取數(shù) 據(jù)的 函 數(shù)readAsBinaryString()、 readAsText()、 readAsArrayBuffer()、 readAsDataURL(),result 屬性表示文件內(nèi)容。).innerHTML = 39。).innerHTML = () + 39。在該文件上傳進(jìn)度相關(guān)的事件處理方法，在該事件處理方法中可以檢驗(yàn)上傳文件的尺寸、上傳進(jìn)度是否可計(jì)算，并使用 和 等屬性可計(jì)算出已上傳百分之多少的數(shù)據(jù)。 var oFileBody = a id=ab id=bhey!/b/a。 （ 2） 應(yīng)用帶表單參數(shù)的 FormData 對(duì)象的構(gòu)造函數(shù)創(chuàng)建 FormData 對(duì)象 取得 form 對(duì)象，作為參數(shù)傳入到 FormData 對(duì)象。獲得（獲得的是 null 空值），而必須要采用如下的示例代碼獲得： String fieldName=()。 // 數(shù)字 32 被立即轉(zhuǎn)換成字符串 32 (fileToUpload, (39。我們通過(guò)輾轉(zhuǎn)這個(gè)對(duì)象，來(lái)向服務(wù)器提交數(shù)據(jù) —— 與普通的 Ajax 相比，使用 FormData 的最大優(yōu)點(diǎn)就是我們可以異步上傳二進(jìn)制文件。 size – 文件的尺寸（單位為字節(jié)） lastModified lastModifiedDate 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 6/16 頁(yè) 6 （ 2） 可以通過(guò) input type=file或拖拽呈現(xiàn) 在用戶界面供用戶選擇 FileList 接口可以通過(guò)兩個(gè)途徑獲取本地文件列表，一是 input type=” file” 的表單形式，另一種則是 拖拽事件傳遞的文件信息 —— 將會(huì)獲取到拖拽文件的數(shù)組形勢(shì)的數(shù)據(jù)，每個(gè)文件占用一個(gè)數(shù)組的索引，如果該索引不存在文件數(shù)據(jù)，將返回 null值。 input type=file accept=image/* multiple （ 2） 錄制視頻數(shù)據(jù)與音頻數(shù)據(jù)的代碼與之類似 input type=file accept=video/*。 （ 1）選擇“拍照”或者“文件” 在手機(jī)瀏覽器下，在上傳文件的同時(shí)，可以選擇“拍照”或者“文件”。file139。).innerHTML = (39。/p39。 39。(39。 i++) { var f = files[i]。最終可以得到文件名，文件類型等信息。不過(guò)注意，input 標(biāo)簽關(guān)聯(lián)了一個(gè) JavaScript 函數(shù)在 onchange 上。 （ 2）應(yīng)用 HTML5 實(shí)現(xiàn)文件上傳可以達(dá)到的主要效果 1）顯示上傳的文件信息，比如文件名、類型、尺寸 2）一個(gè)能夠顯示真實(shí)進(jìn)度的進(jìn)度條 3）上傳的速度 4）剩余時(shí) 間的估算 5）已上傳的數(shù)據(jù)量 6）上傳結(jié)束后服務(wù)器返回的響應(yīng) 另外，憑借 XMLHttpRequest，我們的上傳過(guò)程整個(gè)都是異步的，因此用戶在上傳文件楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 3/16 頁(yè) 3 的時(shí)候，依然可以操作網(wǎng)頁(yè)當(dāng)中的其它元素，并不需要專門等待上傳的完成。但在 HTML 5 的概念形成后， W3C 開始考慮標(biāo)準(zhǔn)化 XMLHttpRequest Level 接口，配合 FormData 即可實(shí)現(xiàn) ajax 文件上傳。Drop）的事件機(jī)制 .............................................. 14 代碼示例 ............................................................................................................ 14 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 2/16 頁(yè) 2 跟我學(xué) Html5 相關(guān)技術(shù) —— HTML5 文件上傳技術(shù)及應(yīng)用實(shí)例 XMLHttpRequest Level 2 XMLHttpRequest 對(duì)象被重新定義 在 HTML4 的時(shí)代，文件上傳只能使用表單 POST 提交方式，無(wú)法使用 AJAX（ XMLHttpRequest）直接進(jìn)行表單提交。通過(guò)指定 HTML5input標(biāo)簽的 type 屬性為“ file”建立一個(gè)文件上傳入口，可以訪問(wèn)相冊(cè)和相機(jī)。 HTML5 的進(jìn)度事件 HTML5 當(dāng)中新增了一個(gè)進(jìn)度事件（ Progress Events） 這個(gè)事件為我們提供了以下屬性信息： （ 1） total – 整型值，用于指定傳輸數(shù)據(jù)的總字節(jié)數(shù)（文件大?。? （ 2） loaded – 整型值，用于指 定上傳的字節(jié)（已上傳的大小） （ 3） lengthComputable – 布爾類型值，用于檢測(cè)上傳文件大小是否可計(jì)算（進(jìn)度是否可計(jì)算） HTML5 文件上傳的 input標(biāo)簽 增加了 onchange 事件 HTML5 文件上傳的 input標(biāo)簽與普通的文件上傳代碼并沒有太大差異。/ 在用戶選擇和修改文件時(shí)都會(huì)觸發(fā)此 onchange 事件，在該事件方法中 ，可以選擇輸入文件元素和訪問(wèn) FileList 的文件對(duì)象，選擇第一個(gè)文件 files[0]。 i len。,
研究報(bào)告相關(guān)推薦
鄂ICP備17016276號(hào)-1