拖拽是操作系統(tǒng)用戶體驗最偉大的改進(jìn)之一。它讓人隨心所欲的操作，更符合人們的直觀感受。

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

?先看一下總體視圖：

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

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

?

拖拽操作提示doc.bind({
????????????????'dragenter':function(e){
????????????????????$("#brsbox").addClass("dragbrowse");
????????????????????dropbox.addClass("shine");
????????????????????return?false;
????????????????????},
????????????????'dragleave':function(e){
????????????????????dropbox.removeClass("shine");
????????????????????return?false;
????????????????????},
????????????????'drop':function(e){
????????????????????stopdft(e);}????????
????????????????});
????????????dropbox.bind({
????????????????'dragenter':function(e){
????????????????????dropbox.addClass("candrop");
????????????????????stopdft(e);},
????????????????'dragleave':function(e){
????????????????????dropbox.removeClass("candrop");
????????????????????stopdft(e);},
????????????????'dragover':function(e){
????????????????????stopdft(e);},
????????????????'drop':function(e){
????????????????????
????????????????????}????????????

?

?

?對于不支持拖拽的瀏覽器：

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

?

實現(xiàn)檢測的代碼如下：

?

檢測瀏覽器是否支持拖拽文件讀取it.detectDragable?=?function(){
????????????filedrag?=?!!window.FileReader;
????????????if(!filedrag)?return;
????????????$("#avtcnt").addClass('dragable');

?

?

?文件放置時的處理：

?

?

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

?

處理拖拽到瀏覽器的文件dropdom.addEventListener('drop',function(e){
????????????????????it.handlefile(e.dataTransfer.files);
????????????????????stopdft(e);},false);????????????????
????????????????
????????????};
????????????
????????it.handlefile?=?function(files){
????????????var?noimg?=?0;
????????????for(var?i=0;?i<files.length;?i++){
????????????????var?file?=?files[i];
????????????????if(!file.type.match(/image*/)){
????????????????????noimg?++;
????????????????????if(noimg?==files.length){
????????????????????????QSL.optTips('請選擇jpg,?png,?gif?等格式的圖片');
????????????????????????return?false;
????????????????????????}
????????????????????continue;?????????????
????????????????????}
????????????????
????????????????var?reader?=?new?FileReader();
????????????????reader.onload?=?function(e){
????????????????????var?img?=?document.createElement('img');
????????????????????img.src?=?reader.result;
????????????????????setTimeout(function(){
????????????????????????it.imgSize?=?{
????????????????????????????w:img.width,
????????????????????????????h:img.height
????????????????????????????};
????????????????????????},500);
????????????????????dropdom.innerHTML="";
????????????????????img.className?='localimg';
????????????????????it.imgData?=?reader.result;
????????????????????dropdom.appendChild(img);
????????????????????imagedata.empty().val(reader.result);
????????????????????dropbox.addClass("droped");
????????????????????clearner.show();????
????????????????};
????????????????reader.readAsDataURL(file);
????????????????
????????????????}

?

?

?其中?stopdft(e) 是為了防止瀏覽器默認(rèn)操作，不以瀏覽器打開文件。而轉(zhuǎn)由腳本來處理拖放的文件。

這個流程中，我們需要的是圖片文件，所以便利操作?e.dataTransfer.files 對象，查找類型為image的文件。
如果沒有，則會提示。

?

讀取文件的關(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);

?雖然是本地文件讀取，但是仍然要延時來保證圖片確實讀取完畢。否則在某些瀏覽器中會取不到寬高的值。（可否有其他更簡便方法？望指出）

刪除現(xiàn)有圖片，重置拖拽區(qū)域：

瀏覽讀取完本地圖片之后，要給用戶提供刪除和重置的選項。（如果是直接上傳當(dāng)然更簡便）

重置拖拽區(qū)域it.resetDropbox?=?function(){
????????????dropbox.attr("class","dropbox")
????????????????.empty()
????????????????.text("將文件拖拽至此區(qū)域");
????????????imgData?=?'';
????????????it.imgData?=?'';
????????????it.imgSize?=?{w:0,h:0};
????????????picsub.removeClass("uploading")
????????????.find("button").removeAttr("disabled")
????????????.text("上傳");????
????????????imagedata.val('');
????????????clearner.hide();????

?

?

?到這里拖放讀取文件的流程基本結(jié)束。

利用拖放，讀取本地文件的其他優(yōu)點：

普通的上傳更改圖片流程是：選擇圖片-上傳圖片-上傳成功-服務(wù)器返回圖片-客戶端瀏覽效果

而如果利用拖放讀取本地文件則可省去服務(wù)器返回 圖片的步驟，直接利用reader.result返回的數(shù)據(jù)。

這樣就節(jié)省了從服務(wù)器讀取圖片的延遲，并且節(jié)省了往返的數(shù)據(jù)流量。所以只需確認(rèn)服務(wù)器端圖片上傳成功，圖片預(yù)覽調(diào)取本地數(shù)據(jù)即可：

代碼：

圖片上傳成功后的處理function?initImageCrop(url){
????var?t?=?document.getElementById("target"),
????????p?=?document.getElementById("preview"),
????????b?=?browseImage,
????????s?=?[],
????????ts?=?[];
????if(url=='data'){
????????t.src?=?b.imgData;
????????p.src?=?b.imgData;
????????posImage(b.imgSize.w,b.imgSize.h);
????????}else{
????????var?cutimg?=?new?Image();
????????cutimg.onload?=?function(){
????????????t.src?=?url;
????????????p.src?=?url;
????????????posImage(cutimg.width,cutimg.height);
????????????}
????????cutimg.src?=?url;????

?

?

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

?DEMO腳本

?

?

?

?

轉(zhuǎn)載于:https://www.cnblogs.com/trance/archive/2011/07/13/2105078.html

與50位技術(shù)專家面對面20年技術(shù)見證，附贈技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的关于拖拽上传 [一个拖拽上传修改头像的流程]的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。