HTML5-Drag-and-Drop-Upload-Bildbeispiel Demonstration_HTML5-Tutorial-Fähigkeiten

Da es sich im Titel um ein Beispiel handelt, werde ich es dieses Mal nicht erklären, da ich dieses Beispiel anhand von etwa 5 oder 6 per Drag-and-Drop hochgeladenen Plug-Ins und Demos zusammengestellt und dann die besten darunter zusammengestellt habe . Der Ort wurde ausgewählt und schließlich wurde er zu einem solchen Beispiel. Schauen wir ihn uns gemeinsam an (es kann nicht garantiert werden, dass die Adresse für längere Zeit gültig ist. Wenn sie ungültig ist, klicken Sie bitte am Ende auf den Demo-Download der Artikel):

Ich beziehe mich auf den Schnittstellenstil. Eine ausländische Fotoalbum-Website hat nur die Vogelgesänge in Chinesisch umgewandelt und den Stil geändert Ich habe mich für diese Option entschieden, weil sie für mich einfach zu erweitern ist. Sie unterstützt drei Möglichkeiten zum Hochladen von Bildern, die andere ist das Hochladen von Dateien per Drag-and-Drop und die andere ist das Hinzufügen von Netzwerkbildern. Es integriert geschickt drei Upload-Modi und Sie können es mit dem IE-Browser durchsuchen. Wenn HTML5 nicht unterstützt wird, gibt es keine Aufforderung zum Hochladen von Bildern per Drag & Drop, wie im Bild gezeigt:

Der wichtigste Teil des Drag-and-Drop-Uploads ist der js-Teil des Codes, der 70 % der Funktionen implementiert. Die anderen 30 % dienen lediglich der Übermittlung der Bildinformationen an den Hintergrund und der anschließenden entsprechenden Verarbeitung, z. B. der Komprimierung , Zuschneiden usw. Schauen wir uns also zunächst den js-Implementierungscode an.

Code kopieren

Der Code lautet wie folgt:

$().ready( function() {
if($.browser.safari || $.browser.mozilla){
$('#dtb-msg1 .kompatible').show();
$('#dtb -msg1 . nicht kompatibel').hide();
$('#drop_zone_home').hover(function(){
$(this).children('p').stop().animate({ top:' 0px'},200);
},function(){
$(this).children('p').stop().animate({top:'-44px'},200 );
});
//Funktionsimplementierung
$(document).on({
dragleave:function(e){
e.preventDefault();
$( '.dashboard_target_box ').removeClass('over');
},
drop:function(e){
e.preventDefault();
//$('.dashboard_target_box'). removeClass(' over');
},
dragenter:function(e){
e.preventDefault(); 🎜>} ,
dragover:function(e){
e.preventDefault();
$('.dashboard_target_box').addClass('over');
}
}) ;
var box = document.getElementById('target_box');
box.addEventListener("drop",function(e){
e.preventDefault();
//Holen Sie sich die Dateiliste
var fileList = e.dataTransfer.files;
var img = document.createElement('img');
//Erkennen Sie, ob es sich um einen Vorgang zum Ziehen von Dateien auf die Seite handelt
if(fileList .length == 0) {
$('.dashboard_target_box').removeClass('over');
return;
//Erkennen Sie, ob es sich bei der Datei um ein Bild handelt
if (fileList[0].type. indexOf('HTML5-Drag-and-Drop-Upload-Bildbeispiel Demonstration_HTML5-Tutorial-Fähigkeiten') === -1){
$('.dashboard_target_box').removeClass('over');
return; >if($.browser.safari ){
//Chrome8
img.src = window.webkitURL.createObjectURL(fileList[0]);
}else if($.browser.mozilla){
//FF4
img.src = window.URL.createObjectURL(fileList[0]);
}else{
//Instanziiere das Dateileserobjekt
var reader = new FileReader() ;
reader.onload = function(e){
img.src = this.result;
$(document.body).appendChild(img>}
reader.readAsDataURL( fileList[0]);
}
var xhr = new XMLHttpRequest();
xhr.open("post", "test.php", true); -Requested-With", "XMLHttpRequest ");
xhr.upload.addEventListener("progress", function(e){
$("#dtb-msg3").hide();
$ ("#dtb-msg4 span" ).show();
$("#dtb-msg4").children('span').eq(1).css({width:'0px'});
$('.show ').html('');
if(e.lengthComputable){
var geladen = Math.ceil((e.loaded / e.total) * 100);
$("#dtb -msg4").children('span').eq(1).css({width:(loaded*2) 'px'}); false);
xhr. addEventListener("load", function(e){
$('.dashboard_target_box').removeClass('over');
$("#dtb-msg3"). show();
$ ("#dtb-msg4 span").hide();
var result = jQuery.parseJSON(e.target.responseText);
alert(result.filename); 🎜>$('.show' ).append(result.img);
var fd = new FormData(
fd.append('xfile', fileList[0 ]);
xhr. send(fd);
}else{
$('#dtb-msg1 .hide(); ('#dtb-msg1 .nicht kompatibel ').show();
}
});
Zu Beginn habe ich zunächst den Browsertyp festgelegt, da wie gerade erwähnt verschiedene Browser unterschiedliche Schnittstellen sehen. Der Hauptimplementierungscode beginnt mit „Funktionsimplementierung“. Ich werde nicht näher darauf eingehen, warum dieser Vorgang auf diese Weise durchgeführt wird und was das Prinzip ist. Sie können sich auf diesen Artikel beziehen: „Detaillierte Erläuterung des Drag-and-Drop-Uploads auf Renren Homepage (HTML5 Drag&Drop, FileReader API, Formdata)“, aber der Code für den Ajax-Upload-Teil ist immer noch etwas anders, da der von Renren etwas mühsam zu sein scheint, also habe ich nach einem anderen Weg gesucht.
Der letzte Teil besteht darin, den PHP-Code hochzuladen. Hier gebe ich nur eine Referenz an, Sie können ihn entsprechend den Anforderungen des Projekts selbst schreiben.

Code kopieren

Der Code lautet wie folgt:

$r = new stdClass( );
header('content-type: application/json');
$maxsize = 10; //Mb
if($_FILES['xfile']['size'] > ($ maxsize * 1048576 )){
$r->error = "Die Bildgröße überschreitet nicht $maxsize MB"; ($folder)) {
mkdir($folder);
$folder .= $_POST['folder'] : ''; 🎜>if(! is_dir($folder)){
mkdir($folder);
}
if(preg_match('/HTML5-Drag-and-Drop-Upload-Bildbeispiel Demonstration_HTML5-Tutorial-Fähigkeiten/i', $_FILES['xfile']['type' ])){
$filename = $_POST['value'] : $folder sha1(@microtime() . '-' . $_FILES['xfile']['name ']) . ' .jpg'; count($tld) - 1];
$filename = $_POST['value'] : $folder sha1(@microtime() . '-' . $_FILES['xfile ']['name ']) . $tld; $_FILES['xfile ']['type'], $types)){
$source = file_get_contents($_FILES["xfile"]["tmp_name"]);
HTML5-Drag-and-Drop-Upload-Bildbeispiel Demonstration_HTML5-Tutorial-Fähigkeitenresize($source, $filename , $_POST['width'], $_POST['height'], $_POST['crop'], $_POST['quality']);
}else{
move_uploaded_file($_FILES["xfile "]["tmp_name "], $filename);
}
$path = str_replace('test.php', '', $_SERVER['SCRIPT_NAME']);
$r-> filename = $filename;
$r->path = $path
$r->img = '';
echo json_encode($r);
function HTML5-Drag-and-Drop-Upload-Bildbeispiel Demonstration_HTML5-Tutorial-Fähigkeitenresize($source, $destination, $width = 0, $height = 0, $crop = false, $quality = 80) {
$quality = $quality ? $quality : 80;
$HTML5-Drag-and-Drop-Upload-Bildbeispiel Demonstration_HTML5-Tutorial-Fähigkeiten = HTML5-Drag-and-Drop-Upload-Bildbeispiel Demonstration_HTML5-Tutorial-Fähigkeitencreatefromstring($source);
if ($HTML5-Drag-and-Drop-Upload-Bildbeispiel Demonstration_HTML5-Tutorial-Fähigkeiten) {
// Abmessungen abrufen
$w = HTML5-Drag-and-Drop-Upload-Bildbeispiel Demonstration_HTML5-Tutorial-Fähigkeitensx($HTML5-Drag-and-Drop-Upload-Bildbeispiel Demonstration_HTML5-Tutorial-Fähigkeiten );
$h = HTML5-Drag-and-Drop-Upload-Bildbeispiel Demonstration_HTML5-Tutorial-Fähigkeitensy($HTML5-Drag-and-Drop-Upload-Bildbeispiel Demonstration_HTML5-Tutorial-Fähigkeiten);
if (($width && $w > $width) || ($height && $h > $height)) {
$ratio = $w / $ h;
if (($ratio >= 1 || $height == 0) && $width && !$crop) {
$new_height = $width / $ratio; >$new_width = $ width;
} elseif ($crop && $ratio $new_height = $width / $ratio; ;
} else {
$new_width = $height * $ratio;
$new_height = $height;
} else {
$new_width = $w; $new_height = $h ;
}
$x_mid = $new_width * .5; //horizontale Mitte
$y_mid = $new_height * .5; //vertikale Mitte
/ >error_log('height : ' . $new_height . ' - width: ' . $new_width)
$new = HTML5-Drag-and-Drop-Upload-Bildbeispiel Demonstration_HTML5-Tutorial-Fähigkeitencreatetruecolor(round($new_width), Round($new_height)); $HTML5-Drag-and-Drop-Upload-Bildbeispiel Demonstration_HTML5-Tutorial-Fähigkeiten, 0, 0, 0, 0, $new_width, $new_height, $w, $h);
// Zuschneiden
if ($crop) {
$crop = HTML5-Drag-and-Drop-Upload-Bildbeispiel Demonstration_HTML5-Tutorial-Fähigkeitencreatetruecolor($width ? $width : $new_width , $height ? $height : $new_height);
HTML5-Drag-and-Drop-Upload-Bildbeispiel Demonstration_HTML5-Tutorial-Fähigkeitencopyresampled($crop, $new, 0, 0, ($x_mid - ($width * .5)), 0, $width, $ height, $width, $height);
//($y_mid - ($height * .5))
}
// Ausgabe
// Interlancing aktivieren [für progressives JPEG]
HTML5-Drag-and-Drop-Upload-Bildbeispiel Demonstration_HTML5-Tutorial-Fähigkeiteninterlace($crop ? $crop : $new, true);
$dext = strtolower(pathinfo($destination, PATHINFO_EXTENSION));
if ($dext == '') {
$dext = $ext;
$destination .= '.' HTML5-Drag-and-Drop-Upload-Bildbeispiel Demonstration_HTML5-Tutorial-Fähigkeitenjpeg($crop ? $crop : $new, $destination, $quality);
case 'png':
$pngQuality = ($quality - 100) /
$ pngQuality = Round(abs ($pngQuality));
HTML5-Drag-and-Drop-Upload-Bildbeispiel Demonstration_HTML5-Tutorial-Fähigkeitenpng($crop ? $crop : $new, $destination, $pngQuality); $crop ? $crop : $new, $destination);
@HTML5-Drag-and-Drop-Upload-Bildbeispiel Demonstration_HTML5-Tutorial-Fähigkeitendestroy($HTML5-Drag-and-Drop-Upload-Bildbeispiel Demonstration_HTML5-Tutorial-Fähigkeiten);
@HTML5-Drag-and-Drop-Upload-Bildbeispiel Demonstration_HTML5-Tutorial-Fähigkeitendestroy($crop );
}
}


PHP gibt schließlich ein Array im JSON-Format zurück. Die von mir zurückgegebenen Informationen sind die Bildadresse, der Name und der HTML-Code des IMG. Zu diesem Zeitpunkt wird der Vorgang abgerufen und verarbeitet ist vorbei.
Wie am Anfang des Artikels erwähnt, gibt es auch Click-to-Select-Datei-Uploads und Netzwerkbilder. Da diese beiden nicht in den Rahmen dieses Themas fallen, werde ich nicht darauf eingehen. Darüber hinaus sind diese beiden Funktionen problemlos zu implementieren.
Demo-Download