如今現(xiàn)代的瀏覽器已經(jīng)有很多支持拖拽文件讀取操作，其優(yōu)點(diǎn)不再?gòu)?fù)述。前端時(shí)間利用拖拽改進(jìn)了一下網(wǎng)站的頭像上傳流程，對(duì)其中的要點(diǎn)和實(shí)踐體會(huì)做一點(diǎn)總結(jié)。

 先看一下總體視圖：

1、 文件拖拽接受區(qū)域要有明顯的標(biāo)示，并且要盡可能的大（由于版面的原因，這個(gè)界面的拖放盒子并不大）。可以用虛線框盒子等樣式吸引用戶拖拽文件。最好有明顯的文字提示和圖標(biāo)配合。

2、 在交互體驗(yàn)上當(dāng)文件拖入瀏覽器窗口時(shí)，可以用拖放區(qū)變換背景顏色等向用戶發(fā)起放置操作邀請(qǐng)。
實(shí)現(xiàn)代碼：

對(duì)于不支持拖拽的瀏覽器：

可惜的是 某些瀏覽器并不支持文件拖拽讀取，這其中包括IE9等較現(xiàn)代的瀏覽器。所以我們必須為不支持拖拽的瀏覽器準(zhǔn)備普通文件瀏覽上傳作為備用方案。
當(dāng)不支持拖拽文件讀取時(shí)，界面如下：

 

實(shí)現(xiàn)檢測(cè)的代碼如下：

文件放置時(shí)的處理：

 

 

 文件放置到可接受區(qū)域時(shí)，請(qǐng)注意這時(shí)候無(wú)論你拖放在鼠標(biāo)上的文件是單個(gè)還是多個(gè)，在瀏覽器和操作系統(tǒng)之間傳送的e.dataTransefer.files總是復(fù)數(shù)。也就是多個(gè)文件。這也就意味著你需要循環(huán)處理鼠標(biāo)上所攜帶的文件。
代碼如下：

處理拖拽到瀏覽器的文件


其中 stopdft(e) 是為了防止瀏覽器默認(rèn)操作，不以瀏覽器打開文件。而轉(zhuǎn)由腳本來(lái)處理拖放的文件。
這個(gè)流程中，我們需要的是圖片文件，所以便利操作 e.dataTransfer.files 對(duì)象，查找類型為image的文件。
如果沒有，則會(huì)提示。

讀取文件的關(guān)鍵代碼：
var reader = new FileReader();


reader.onload = function(e){
var img = document.createElement('img');
img.src = reader.result;
};
reader.readAsDataURL(file);
本例中我們需要讀取圖片的高度和寬度屬性。所以我們做了如下操作
setTimeout(function(){
it.imgSize = {
w:img.width,
h:img.height
};
},500);
雖然是本地文件讀取，但是仍然要延時(shí)來(lái)保證圖片確實(shí)讀取完畢。否則在某些瀏覽器中會(huì)取不到寬高的值。（可否有其他更簡(jiǎn)便方法？望指出）

刪除現(xiàn)有圖片，重置拖拽區(qū)域：
瀏覽讀取完本地圖片之后，要給用戶提供刪除和重置的選項(xiàng)。（如果是直接上傳當(dāng)然更簡(jiǎn)便）

重置拖拽區(qū)域


到這里拖放讀取文件的流程基本結(jié)束。
利用拖放，讀取本地文件的其他優(yōu)點(diǎn)：
普通的上傳更改圖片流程是：選擇圖片-上傳圖片-上傳成功-服務(wù)器返回圖片-客戶端瀏覽效果
而如果利用拖放讀取本地文件則可省去服務(wù)器返回 圖片的步驟，直接利用reader.result返回的數(shù)據(jù)。
這樣就節(jié)省了從服務(wù)器讀取圖片的延遲，并且節(jié)省了往返的數(shù)據(jù)流量。所以只需確認(rèn)服務(wù)器端圖片上傳成功，圖片預(yù)覽調(diào)取本地?cái)?shù)據(jù)即可：
代碼：

圖片上傳成功后的處理

完整DEMO預(yù)覽(靜態(tài)文件暫時(shí)沒有上傳成功后的展示（：)
DEMO腳本

最新評(píng)論