国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

happyfish / 1274人閱讀

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

引入

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

FileReader 對象

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

let fileReader = new FileReader();
屬性

error：在讀取時發(fā)生的錯誤

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

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

方法

abort()：終止讀取操作

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

事件處理程序

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

onerror：讀取錯誤時調(diào)用

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

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

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

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

兼容性

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

在的onchange事件中獲取上傳的圖片對象

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

中增加multiple屬性，上傳多個文件

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

代碼：

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

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

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

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

ondragstart：開始拖動時觸發(fā)

ondrag：拖動時觸發(fā)

ondragend：拖動完成時觸發(fā)

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

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

ondragover：拖動時觸發(fā)（觸發(fā)間隔350毫秒）

ondragleave：離開容器范圍時觸發(fā)

ondrop：拖動過程中，釋放鼠標(biāo)按鍵時觸發(fā)

顯然這里需要使用的是 ondrop 事件，但是需要注意，使用ondrop 事件需要阻止瀏覽器默認(rèn)行為，否則不會觸發(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) { //拖來拖去
  e.preventDefault();
});

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

window.URL.createObjectURL()

也可以通過這個方法來實(shí)現(xiàn)圖片的預(yù)覽

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

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

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

并且可能比fileReader對IE的兼容性好一些，問題少一些？

不過可以二者選擇使用吧，多一個選擇不是壞事

參考

MDN FileReader

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

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

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

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

菜鳥教程 ondrop 事件

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/52124.html

相關(guān)文章

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

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

    sourcenode 評論0 收藏0

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

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

    shinezejian 評論0 收藏0

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

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

    imccl 評論0 收藏0

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

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

    Pink 評論0 收藏0

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

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

    Astrian 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<