這篇文章主要講解了javascript如何實(shí)現(xiàn)移動(dòng)端HTML5圖片上傳預(yù)覽和壓縮功能,內(nèi)容清晰明了,對(duì)此有興趣的小伙伴可以學(xué)習(xí)一下,相信大家閱讀完之后會(huì)有幫助。
在開(kāi)發(fā)移動(dòng)端web網(wǎng)頁(yè)中,我們不可避免的會(huì)遇到文件上傳的功能,但由于手機(jī)圖片尺寸太大,上傳時(shí)間過(guò)長(zhǎng)導(dǎo)致用戶(hù)體驗(yàn)太差,就需要在上傳前對(duì)圖片進(jìn)行一定的壓縮。
在代碼之前,有必要先了解我們即將使用到的幾個(gè)API
file 和 FileList 對(duì)象file對(duì)象可以用來(lái)獲取某個(gè)文件的信息,還可以用來(lái)讀取這個(gè)文件的內(nèi)容.通常情況下,File對(duì)象是來(lái)自用戶(hù)在一個(gè) input 元素上選擇文件后返回的FileList對(duì)象,也可以是來(lái)自由拖放操作生成的 DataTransfer對(duì)象。
通常情況我們這樣使用它:
// FileList 對(duì)象 var fs = document.getElementById("text").files console.log(fs) >>FileList 0:File lastModified:1487309111498 lastModifiedDate:Fri Feb 17 2017 13:25:11 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間) name:"1.png" size:22177 type:"image/png" webkitRelativePath:""