成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

上傳圖片實(shí)時(shí)預(yù)覽

happyfish / 1288人閱讀

摘要：引入當(dāng)使用上傳圖片文件時(shí)，如何在上傳到服務(wù)器之前，在本地進(jìn)行預(yù)覽對(duì)象對(duì)象允許應(yīng)用程序異步讀取用戶(hù)計(jì)算機(jī)上的文件。

引入

當(dāng)使用上傳圖片文件時(shí)，如何在上傳到服務(wù)器之前，在本地進(jìn)行預(yù)覽？

FileReader 對(duì)象

FileReader對(duì)象允許Web應(yīng)用程序異步讀取用戶(hù)計(jì)算機(jī)上的文件。使用new創(chuàng)建一個(gè)FileReader實(shí)例對(duì)象：

let fileReader = new FileReader();
屬性

error：在讀取時(shí)發(fā)生的錯(cuò)誤

readyState：fileReader當(dāng)前狀態(tài)

result：讀取到的文件內(nèi)容，只有在讀取操作完成后有效

方法

abort()：終止讀取操作

readAsDateURL()：讀取文件中的內(nèi)容，讀取完成后調(diào)用onloadend方法，結(jié)果result中包含一個(gè)data:URL格式的字符串表示文件內(nèi)容（針對(duì)圖片就是base64格式的字符串）

事件處理程序

onabort：讀取被終止時(shí)被調(diào)用

onerror：讀取錯(cuò)誤時(shí)調(diào)用

onload：讀取成功時(shí)調(diào)用

onloadend：讀取完成時(shí)調(diào)用，無(wú)論成功失敗， 在onload或onerror后調(diào)用

onloadstart：讀取開(kāi)始前調(diào)用

onprogress：讀取過(guò)程中周期調(diào)用、

兼容性

使用FileReader對(duì)象預(yù)覽圖片

在的onchange事件中獲取上傳的圖片對(duì)象

使用的event.target.files獲取上傳對(duì)象的類(lèi)數(shù)組對(duì)象，每一項(xiàng)的name屬性對(duì)應(yīng)文件名

中增加multiple屬性，上傳多個(gè)文件

創(chuàng)建FileReader對(duì)象，并通過(guò)readAsDateURL()方法，傳入要預(yù)覽的文件對(duì)象，在onload回調(diào)函數(shù)中對(duì)FileReader對(duì)象的result進(jìn)行處理

代碼：

預(yù)覽多張圖片
拖拽預(yù)覽

不通過(guò)點(diǎn)擊事件而是通過(guò)將圖片拖拽到指定區(qū)域?qū)崿F(xiàn)預(yù)覽。

在拖放過(guò)程中會(huì)觸發(fā)的事件：

在源元素上觸發(fā)的事件（需要設(shè)置 draggable 屬性）

ondragstart：開(kāi)始拖動(dòng)時(shí)觸發(fā)

ondrag：拖動(dòng)時(shí)觸發(fā)

ondragend：拖動(dòng)完成時(shí)觸發(fā)

釋放時(shí)觸發(fā)的事件

ondragenter：進(jìn)入容器范圍時(shí)觸發(fā)

ondragover：拖動(dòng)時(shí)觸發(fā)（觸發(fā)間隔350毫秒）

ondragleave：離開(kāi)容器范圍時(shí)觸發(fā)

ondrop：拖動(dòng)過(guò)程中，釋放鼠標(biāo)按鍵時(shí)觸發(fā)

顯然這里需要使用的是 ondrop 事件，但是需要注意，使用ondrop 事件需要阻止瀏覽器默認(rèn)行為，否則不會(huì)觸發(fā)

document.addEventListener("drop", function(e) { //釋放
  e.preventDefault();
});
document.addEventListener("dragenter", function(e) { //拖進(jìn)
  e.preventDefault();
});
document.addEventListener("dragleave", function(e) { //拖離
  e.preventDefault();
});
document.addEventListener("dragover", function(e) { //拖來(lái)拖去
  e.preventDefault();
});

然后在 ondrop 事件中觸發(fā)上面的函數(shù)就可以實(shí)現(xiàn)圖片預(yù)覽了。注意，`input 的 onchange 事件獲取文件對(duì)象是 e.target.files，而 drop 事件則是 e.dataTransfer.files

window.URL.createObjectURL()

也可以通過(guò)這個(gè)方法來(lái)實(shí)現(xiàn)圖片的預(yù)覽

URL.createObjectURL() 靜態(tài)方法會(huì)創(chuàng)建一個(gè) DOMString，這個(gè)新的URL 對(duì)象表示指定的 File 對(duì)象或 Blob 對(duì)象。

在每次調(diào)用 createObjectURL() 方法時(shí)，都會(huì)創(chuàng)建一個(gè)新的 URL 對(duì)象，即使你已經(jīng)用相同的對(duì)象作為參數(shù)創(chuàng)建過(guò)。當(dāng)不再需要這些 URL 對(duì)象時(shí)，每個(gè)對(duì)象必須通過(guò)調(diào)用 URL.revokeObjectURL() 方法來(lái)釋放。瀏覽器會(huì)在文檔退出的時(shí)候自動(dòng)釋放它們，但是為了獲得最佳性能和內(nèi)存使用狀況，你應(yīng)該在安全的時(shí)機(jī)主動(dòng)釋放掉它們。
// 使用 createObjectURL
function preview2(files) {
  Object.keys(files).forEach(function(file) {
    img.src = window.URL.createObjectURL(files[file]);
  })
}
區(qū)別

由于 URL.createObjectURL() 是瀏覽器自身的接口，貌似性能會(huì)更好一點(diǎn)

并且可能比f(wàn)ileReader對(duì)IE的兼容性好一些，問(wèn)題少一些？

不過(guò)可以二者選擇使用吧，多一個(gè)選擇不是壞事

參考

MDN FileReader

js圖片前端預(yù)覽之 filereader 和 window.URL.createObjectURL

圖片上傳預(yù)覽 （URL.createObjectURL）

chrome拖拽不響應(yīng)ondrop和dataTransfer.setData事件

JavaScript實(shí)現(xiàn)拖拽預(yù)覽，AJAX小文件上傳

菜鳥(niǎo)教程 ondrop 事件

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/52124.html

相關(guān)文章

  • 上傳圖片實(shí)時(shí)預(yù)覽

    摘要：引入當(dāng)使用上傳圖片文件時(shí)，如何在上傳到服務(wù)器之前，在本地進(jìn)行預(yù)覽對(duì)象對(duì)象允許應(yīng)用程序異步讀取用戶(hù)計(jì)算機(jī)上的文件。 引入 當(dāng)使用上傳圖片文件時(shí)，如何在上傳到服務(wù)器之前，在本地進(jìn)行預(yù)覽？ FileReader 對(duì)象 FileReader對(duì)象允許Web應(yīng)用程序異步讀取用戶(hù)計(jì)算機(jī)上的文件。使用new創(chuàng)建一個(gè)FileReader實(shí)例對(duì)象： let fileReader = new FileRea...

    sourcenode 評(píng)論0 收藏0

  • 移動(dòng)端上傳圖片翻轉(zhuǎn)的解決方案

    摘要：后續(xù)過(guò)了幾天，公司購(gòu)置了幾臺(tái)全新的測(cè)試機(jī)，測(cè)試同學(xué)將系統(tǒng)在一臺(tái)三星的機(jī)子上一測(cè)，又發(fā)現(xiàn)新問(wèn)題了選擇完圖片進(jìn)行本地預(yù)覽時(shí)，發(fā)現(xiàn)圖片翻轉(zhuǎn)了但上傳后再展示又是正常的。 最近在處理移動(dòng)端選擇圖片實(shí)時(shí)預(yù)覽并上傳時(shí)遇到一個(gè)問(wèn)題：上傳前圖片預(yù)覽正常，但上傳到服務(wù)器上的圖片展示到頁(yè)面上時(shí)，有時(shí)會(huì)出現(xiàn)圖片翻轉(zhuǎn)的問(wèn)題，一般是翻轉(zhuǎn) 90 度。后經(jīng)一翻研究找到了問(wèn)題所在，特在此記錄一下。 問(wèn)題描述 接上面提到...

    shinezejian 評(píng)論0 收藏0

  • vue-avatar-tailor，vue頭像裁剪組件

    摘要：實(shí)現(xiàn)原理簡(jiǎn)單，純技術(shù)處理圖片，幾乎不需要用到相關(guān)知識(shí)面向人群急于使用頭像裁剪組件的同學(xué)。裁剪框初始寬高上傳圖片后，裁剪區(qū)將預(yù)設(shè)為最大裁剪范圍。支持矩形裁剪目前九宮僅支持將圖片裁剪為正方形，不能裁剪為矩形，該功能將在后續(xù)優(yōu)化。 項(xiàng)目簡(jiǎn)介 本組件是vue下的頭像裁剪組件，可以直接拷貝代碼使用，無(wú)需安裝依賴(lài) 使用九宮格進(jìn)行裁剪，自由選擇裁剪區(qū)域。 實(shí)時(shí)預(yù)覽裁剪后效果。 可以將裁剪好的圖片，...

    imccl 評(píng)論0 收藏0

  • 圖片上傳知識(shí)點(diǎn)梳理

    摘要：在日常項(xiàng)目開(kāi)發(fā)中，圖片上傳是一個(gè)十分常見(jiàn)的場(chǎng)景。在圖片拖拽上傳這個(gè)業(yè)務(wù)場(chǎng)景中，被拖拽元素為頁(yè)面外部的圖片文件，故此處僅用到目標(biāo)元素的各個(gè)事件。具體實(shí)現(xiàn)代碼如下至此，圖片上傳的常用知識(shí)點(diǎn)以梳理完畢，歡迎補(bǔ)充。 在日常項(xiàng)目開(kāi)發(fā)中，圖片上傳是一個(gè)十分常見(jiàn)的場(chǎng)景。而現(xiàn)在的各種UI框架都提供了自己的上傳組件，網(wǎng)上第三方的上傳組件也多如牛毛?？赡苣阍缫蚜?xí)慣了直接使用這些現(xiàn)成的組件，然而對(duì)于其具體的...

    Pink 評(píng)論0 收藏0

  • 圖片上傳知識(shí)點(diǎn)梳理

    摘要：在日常項(xiàng)目開(kāi)發(fā)中，圖片上傳是一個(gè)十分常見(jiàn)的場(chǎng)景。在圖片拖拽上傳這個(gè)業(yè)務(wù)場(chǎng)景中，被拖拽元素為頁(yè)面外部的圖片文件，故此處僅用到目標(biāo)元素的各個(gè)事件。具體實(shí)現(xiàn)代碼如下至此，圖片上傳的常用知識(shí)點(diǎn)以梳理完畢，歡迎補(bǔ)充。 在日常項(xiàng)目開(kāi)發(fā)中，圖片上傳是一個(gè)十分常見(jiàn)的場(chǎng)景。而現(xiàn)在的各種UI框架都提供了自己的上傳組件，網(wǎng)上第三方的上傳組件也多如牛毛。可能你早已習(xí)慣了直接使用這些現(xiàn)成的組件，然而對(duì)于其具體的...

    Astrian 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<