上傳圖片實時預覽

sourcenode 發布于2019-08-22 16:00 / 1140人閱讀

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

引入

當使用上傳圖片文件時，如何在上傳到服務器之前，在本地進行預覽？

FileReader 對象

FileReader對象允許Web應用程序異步讀取用戶計算機上的文件。使用new創建一個FileReader實例對象：

let fileReader = new FileReader();

屬性

error：在讀取時發生的錯誤

readyState：fileReader當前狀態

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

方法

abort()：終止讀取操作

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

事件處理程序

onabort：讀取被終止時被調用

onerror：讀取錯誤時調用

onload：讀取成功時調用

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

onloadstart：讀取開始前調用

onprogress：讀取過程中周期調用、

兼容性

使用FileReader對象預覽圖片

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

使用的event.target.files獲取上傳對象的類數組對象，每一項的name屬性對應文件名

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

創建FileReader對象，并通過readAsDateURL()方法，傳入要預覽的文件對象，在onload回調函數中對FileReader對象的result進行處理

代碼：

預覽多張圖片

拖拽預覽

不通過點擊事件而是通過將圖片拖拽到指定區域實現預覽。

在拖放過程中會觸發的事件：

在源元素上觸發的事件（需要設置 draggable 屬性）

ondragstart：開始拖動時觸發

ondrag：拖動時觸發

ondragend：拖動完成時觸發

釋放時觸發的事件

ondragenter：進入容器范圍時觸發

ondragover：拖動時觸發（觸發間隔350毫秒）

ondragleave：離開容器范圍時觸發

ondrop：拖動過程中，釋放鼠標按鍵時觸發

顯然這里需要使用的是 ondrop 事件，但是需要注意，使用ondrop 事件需要阻止瀏覽器默認行為，否則不會觸發

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

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

window.URL.createObjectURL()

也可以通過這個方法來實現圖片的預覽

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

在每次調用 createObjectURL() 方法時，都會創建一個新的 URL 對象，即使你已經用相同的對象作為參數創建過。當不再需要這些 URL 對象時，每個對象必須通過調用 URL.revokeObjectURL() 方法來釋放。瀏覽器會在文檔退出的時候自動釋放它們，但是為了獲得最佳性能和內存使用狀況，你應該在安全的時機主動釋放掉它們。

// 使用 createObjectURL
function preview2(files) {
  Object.keys(files).forEach(function(file) {
    img.src = window.URL.createObjectURL(files[file]);
  })
}

區別

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

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

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

參考

MDN FileReader

js圖片前端預覽之 filereader 和 window.URL.createObjectURL

圖片上傳預覽（URL.createObjectURL）

chrome拖拽不響應ondrop和dataTransfer.setData事件

JavaScript實現拖拽預覽，AJAX小文件上傳

菜鳥教程 ondrop 事件

云服務器 GPU云服務器 php 預覽上傳圖片上傳圖片預覽php 圖片上傳服務器并預覽 webrtc 實時預覽

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/93955.html

上傳圖片實時預覽

摘要：引入當使用上傳圖片文件時，如何在上傳到服務器之前，在本地進行預覽對象對象允許應用程序異步讀取用戶計算機上的文件。引入當使用上傳圖片文件時，如何在上傳到服務器之前，在本地進行預覽？ FileReader 對象 FileReader對象允許Web應用程序異步讀取用戶計算機上的文件。使用new創建一個FileReader實例對象： let fileReader = new FileRea...

happyfish 2019-08-02 10:06 評論0 收藏0
移動端上傳圖片翻轉的解決方案

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

shinezejian 2019-08-19 17:15 評論0 收藏0
vue-avatar-tailor，vue頭像裁剪組件

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

imccl 2019-08-23 12:13 評論0 收藏0
圖片上傳知識點梳理

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

Pink 2019-08-02 11:55 評論0 收藏0
圖片上傳知識點梳理

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

Astrian 2019-08-23 12:49 評論0 收藏0