Über js Drag & Drop-Upload [Ein Prozess des Drag & Drop-Uploads zum Ändern des Avatars]

Viele moderne Browser unterstützen jetzt Drag-and-Drop-Vorgänge zum Lesen von Dateien, und ihre Vorteile werden nicht wiederholt. Die Front-End-Zeit nutzte Drag & Drop, um den Avatar-Upload-Prozess der Website zu verbessern, und erstellte eine Zusammenfassung der wichtigsten Punkte und praktischen Erfahrungen.

Schauen wir uns zunächst die Gesamtansicht an:

1 Der Datei-Drag-and-Drop-Akzeptanzbereich sollte deutlich gekennzeichnet sein und wie folgt aussehen: so groß wie möglich (aufgrund des Layouts Der Grund dafür ist, dass die Drag-and-Drop-Box dieser Schnittstelle nicht groß ist). Sie können gestrichelte Kästchen und andere Stile verwenden, um Benutzer zum Ziehen und Ablegen von Dateien zu bewegen. Am besten sind klare Textaufforderungen und Symbole.

2. Wenn im interaktiven Erlebnis eine Datei in das Browserfenster gezogen wird, kann der Drag-and-Drop-Bereich verwendet werden, um die Hintergrundfarbe usw. zu ändern, um den Benutzer zu einem Drop-Vorgang einzuladen.
Implementierungscode:

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

}

Für Browser, die Drag & Drop nicht unterstützen:

Leider unterstützen einige Browser das Lesen von Dateien per Drag & Drop nicht, einschließlich IE9. Warten Sie auf a modernerer Browser. Daher müssen wir das normale Durchsuchen und Hochladen von Dateien als Backup-Lösung für Browser vorbereiten, die Drag & Drop nicht unterstützen.
Wenn das Lesen von Dateien per Drag-and-Drop nicht unterstützt wird, sieht die Schnittstelle wie folgt aus:

Der Code zum Implementieren der Erkennung lautet wie folgt:

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

Beim Platzieren von Dateien Verarbeitung:

Wenn die Datei im akzeptablen Bereich platziert wird, beachten Sie bitte, dass es sich bei der Datei, die Sie per Drag & Drop mit der Maus ziehen, um eine einzelne oder eine einzelne Datei handelt mehrere, der Browser und das Betriebssystem werden e.dataTransefer.files übertragen zwischen sind immer Plural. Das heißt, mehrere Dateien. Das bedeutet auch, dass Sie die von der Maus übertragenen Dateien durchlaufen müssen.
Der Code lautet wie folgt:

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

}

Verarbeiten von Dateien, die in den Browser gezogen werden


Stopdft(e) soll den Standardbetrieb des Browsers verhindern und ihn nicht öffnen es mit dem Browserdokument. Stattdessen verarbeitet das Skript die Drag-and-Drop-Dateien.
In diesem Prozess benötigen wir Bilddateien, daher ist es praktisch, das e.dataTransfer.files-Objekt zu bedienen, um Dateien vom Typ Bild zu finden.
Wenn nicht, wird eine Meldung angezeigt.

Schlüsselcode zum Lesen von Dateien:
var reader = new FileReader();


reader.onload = function(e){
var img = document ('img');
img.src = reader.result;
reader.readAsDataURL(file);
In diesem Beispiel müssen wir die Höhen- und Breitenattribute des Bildes lesen . Also haben wir die folgenden Operationen ausgeführt:
setTimeout(function(){
it.imgSize = {
w:img.width,
h:img.height
};
}, 500);
Obwohl eine lokale Datei gelesen wird, gibt es immer noch eine Verzögerung, um sicherzustellen, dass das Bild tatsächlich gelesen wird. Andernfalls werden die Breiten- und Höhenwerte in einigen Browsern möglicherweise nicht abgerufen. (Gibt es eine andere einfachere Methode? Bitte weisen Sie darauf hin)

Vorhandene Bilder löschen und den Ziehbereich zurücksetzen:
Nachdem Sie lokale Bilder durchsucht und gelesen haben, stellen Sie den Benutzern Optionen zum Löschen und Zurücksetzen zur Verfügung. (Es ist natürlich einfacher, direkt hochzuladen)

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();

Drag-and-Drop-Bereich zurücksetzen

Der Vorgang des Ziehens und Ablegens zum Lesen von Dateien ist hier im Grunde abgeschlossen.
Weitere Vorteile der Verwendung von Drag & Drop zum Lesen lokaler Dateien:
Der normale Vorgang zum Hochladen und Ändern von Bildern ist: Bild auswählen – Bild hochladen – erfolgreich hochladen – der Server gibt den Bild-Client-Browsing-Effekt zurück
Und wenn Sie Drag-and-Drop verwenden, können Sie beim Lesen lokaler Dateien den Schritt der Rückgabe von Bildern vom Server einsparen und die von Reader.result zurückgegebenen Daten direkt verwenden.
Dies erspart die Verzögerung beim Lesen der Bilder vom Server und spart den Hin- und Rückdatenverkehr. Bestätigen Sie also einfach, dass der serverseitige Bild-Upload erfolgreich ist und die Bildvorschau lokale Daten abrufen kann:
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;

Verarbeitung nach erfolgreichem Hochladen des Bildes

Mehr Über js Drag Drag-and-Drop-Upload [ein Drag-and-Drop-Upload-Prozess zum Ändern von Avataren] Für verwandte Artikel achten Sie bitte auf die chinesische PHP-Website!