資訊專欄INFORMATION COLUMN
摘要：引入當使用上傳圖片文件時，如何在上傳到服務(wù)器之前，在本地進行預覽對象對象允許應用程序異步讀取用戶計算機上的文件。
引入
當使用上傳圖片文件時，如何在上傳到服務(wù)器之前，在本地進行預覽？
FileReader 對象FileReader對象允許Web應用程序異步讀取用戶計算機上的文件。使用new創(chuàng)建一個FileReader實例對象：
let fileReader = new FileReader();屬性
error：在讀取時發(fā)生的錯誤
readyState：fileReader當前狀態(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對象預覽圖片在的onchange事件中獲取上傳的圖片對象
使用的event.target.files獲取上傳對象的類數(shù)組對象，每一項的name屬性對應文件名
中增加multiple屬性，上傳多個文件
創(chuàng)建FileReader對象，并通過readAsDateURL()方法，傳入要預覽的文件對象，在onload回調(diào)函數(shù)中對FileReader對象的result進行處理
代碼：預覽多張圖片
拖拽預覽
不通過點擊事件而是通過將圖片拖拽到指定區(qū)域?qū)崿F(xiàn)預覽。
在拖放過程中會觸發(fā)的事件：
在源元素上觸發(fā)的事件（需要設(shè)置 draggable 屬性）
ondragstart：開始拖動時觸發(fā)
ondrag：拖動時觸發(fā)
ondragend：拖動完成時觸發(fā)
釋放時觸發(fā)的事件
ondragenter：進入容器范圍時觸發(fā)
ondragover：拖動時觸發(fā)（觸發(fā)間隔350毫秒）
ondragleave：離開容器范圍時觸發(fā)
ondrop：拖動過程中，釋放鼠標按鍵時觸發(fā)
顯然這里需要使用的是 ondrop 事件，但是需要注意，使用ondrop 事件需要阻止瀏覽器默認行為，否則不會觸發(fā)
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 事件中觸發(fā)上面的函數(shù)就可以實現(xiàn)圖片預覽了。注意，`input 的 onchange 事件獲取文件對象是 e.target.files，而 drop 事件則是 e.dataTransfer.files
window.URL.createObjectURL()也可以通過這個方法來實現(xiàn)圖片的預覽
URL.createObjectURL() 靜態(tài)方法會創(chuàng)建一個 DOMString，這個新的URL 對象表示指定的 File 對象或 Blob 對象。
在每次調(diào)用 createObjectURL() 方法時，都會創(chuàng)建一個新的 URL 對象，即使你已經(jīng)用相同的對象作為參數(shù)創(chuàng)建過。當不再需要這些 URL 對象時，每個對象必須通過調(diào)用 URL.revokeObjectURL() 方法來釋放。瀏覽器會在文檔退出的時候自動釋放它們，但是為了獲得最佳性能和內(nèi)存使用狀況，你應該在安全的時機主動釋放掉它們。
// 使用 createObjectURL
function preview2(files) {
Object.keys(files).forEach(function(file) {
img.src = window.URL.createObjectURL(files[file]);
})
}
區(qū)別
由于 URL.createObjectURL() 是瀏覽器自身的接口，貌似性能會更好一點
并且可能比fileReader對IE的兼容性好一些，問題少一些？
不過可以二者選擇使用吧，多一個選擇不是壞事
參考MDN FileReader
js圖片前端預覽之 filereader 和 window.URL.createObjectURL
圖片上傳預覽 （URL.createObjectURL）
chrome拖拽不響應ondrop和dataTransfer.setData事件
JavaScript實現(xiàn)拖拽預覽，AJAX小文件上傳
菜鳥教程 ondrop 事件
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/93955.html
摘要：后續(xù)過了幾天，公司購置了幾臺全新的測試機，測試同學將系統(tǒng)在一臺三星的機子上一測，又發(fā)現(xiàn)新問題了選擇完圖片進行本地預覽時，發(fā)現(xiàn)圖片翻轉(zhuǎn)了但上傳后再展示又是正常的。 最近在處理移動端選擇圖片實時預覽并上傳時遇到一個問題：上傳前圖片預覽正常，但上傳到服務(wù)器上的圖片展示到頁面上時，有時會出現(xiàn)圖片翻轉(zhuǎn)的問題，一般是翻轉(zhuǎn) 90 度。后經(jīng)一翻研究找到了問題所在，特在此記錄一下。 問題描述 接上面提到...
摘要：實現(xiàn)原理簡單，純技術(shù)處理圖片，幾乎不需要用到相關(guān)知識面向人群急于使用頭像裁剪組件的同學。裁剪框初始寬高上傳圖片后，裁剪區(qū)將預設(shè)為最大裁剪范圍。支持矩形裁剪目前九宮僅支持將圖片裁剪為正方形，不能裁剪為矩形，該功能將在后續(xù)優(yōu)化。 項目簡介 本組件是vue下的頭像裁剪組件，可以直接拷貝代碼使用，無需安裝依賴 使用九宮格進行裁剪，自由選擇裁剪區(qū)域。 實時預覽裁剪后效果。 可以將裁剪好的圖片，...
閱讀 3530·2023-04-25 14:57
閱讀 2577·2021-11-22 14:56
閱讀 2100·2021-09-29 09:45
閱讀 1781·2021-09-22 15:53
閱讀 3334·2021-08-25 09:41
閱讀 912·2019-08-29 15:22
閱讀 3310·2019-08-29 13:22
閱讀 3136·2019-08-29 13:08
