About js drag and drop upload [A process of drag and drop upload to modify avatar]

Nowadays, many modern browsers already support drag-and-drop file reading operations, and their advantages will not be repeated again. The front-end time used drag and drop to improve the avatar upload process of the website, and made a summary of the key points and practical experience.

Let’s take a look at the overall view first:

#1. The file drag acceptance area should be clearly marked and should be as large as possible (due to the layout The reason is that the drag and drop box of this interface is not large). You can use dashed box and other styles to attract users to drag and drop files. It is best to have obvious text prompts and icons.

2. In the interactive experience, when a file is dragged into the browser window, the drag and drop area can be used to change the background color, etc. to initiate a drop operation invitation to the user.
Implementation code:

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){ 

}

For browsers that do not support drag and drop:

Unfortunately, some browsers do not support drag and drop reading of files, including IE9 and other relatively new browsers. Modern browser. Therefore, we must prepare ordinary file browsing and uploading as a backup solution for browsers that do not support drag and drop.
When drag-and-drop file reading is not supported, the interface is as follows:

The code to implement detection is as follows:

it.detectDragable = function(){ 
filedrag = !!window.FileReader; 
if(!filedrag) return; 
$("#avtcnt").addClass('dragable');

Processing when placing files:

When the file is placed in the acceptable area, please note that no matter whether the file you drag and drop on the mouse is single or multiple, there will be a gap between the browser and the operating system. Transmitted e.dataTransefer.files are always plural. That is, multiple files. This also means that you need to loop through the files carried by the mouse.
The code is as follows:

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(&#39;请选择jpg, png, gif 等格式的图片&#39;); 
return false; 
} 
continue; 
} 

var reader = new FileReader(); 
reader.onload = function(e){ 
var img = document.createElement(&#39;img&#39;); 
img.src = reader.result; 
setTimeout(function(){ 
it.imgSize = { 
w:img.width, 
h:img.height 
}; 
},500); 
dropdom.innerHTML=""; 
img.className =&#39;localimg&#39;; 
it.imgData = reader.result; 
dropdom.appendChild(img); 
imagedata.empty().val(reader.result); 
dropbox.addClass("droped"); 
clearner.show(); 
}; 
reader.readAsDataURL(file); 

}

Processing files dragged to the browser


The stopdft(e) is to prevent the browser from opening the file by default. Instead, the script handles the dragged and dropped files.
In this process, we need image files, so it is convenient to operate the e.dataTransfer.files object to find files of type image.
If not, it will prompt.

Key code for reading files:
var reader = new FileReader();


reader.onload = function(e){
var img = document. createElement('img');
img.src = reader.result;
};
reader.readAsDataURL(file);
In this example we need to read the height and width attributes of the image. So we did the following operations
setTimeout(function(){
it.imgSize = {
w:img.width,
h:img.height
};
}, 500);
Although it is reading a local file, there is still a delay to ensure that the image is actually read. Otherwise, the width and height values ​​may not be obtained in some browsers. (Is there any other easier method? Please point it out)

Delete existing pictures and reset the drag area:
After browsing and reading local pictures, provide users with options to delete and reset. (It is of course easier to upload directly)

it.resetDropbox = function(){ 
dropbox.attr("class","dropbox") 
.empty() 
.text("将文件拖拽至此区域"); 
imgData = ''; 
it.imgData = ''; 
it.imgSize = {w:0,h:0}; 
picsub.removeClass("uploading") 
.find("button").removeAttr("disabled") 
.text("上传"); 
imagedata.val(''); 
clearner.hide();

Reset the drag and drop area
The process of dragging and dropping to read files is basically complete here.
Other advantages of using drag and drop to read local files:
The ordinary process of uploading and changing pictures is: select pictures-upload pictures-upload successfully-server returns pictures-client browsing effect
And if you use drag-and-drop Reading local files can save the step of returning images from the server and directly use the data returned by reader.result.
This saves the delay in reading images from the server and saves round-trip data traffic. So just confirm that the server-side image upload is successful, and the image preview can retrieve local data:
Code:

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;

Processing after successful image upload

More about js drag and drop upload [A drag-and-drop process for uploading and modifying avatars] Please pay attention to the PHP Chinese website for related articles!