So implementieren Sie die Funktion zum Ziehen und Hochladen von Dateien in HTML5 + PHP

[Einführung] In diesem Artikel wird die Funktion zum Implementieren des Datei-Uploads in HTML5 vorgestellt. Bedürftige Schüler können sich darauf beziehen. Ich verweise auf eine ausländische Fotoalbum-Website. Es gibt nicht viele Änderungen. Ich habe nur die Vogellieder ins Chinesische umgewandelt. Der Grund, warum ich diesen ausgewählt habe, wird in diesem Artikel vorgestellt Die Details zur Einführung in die Funktion des Datei-Uploads in HTML5 können hier nachgelesen werden.

Für den Schnittstellenstil habe ich auf eine ausländische Fotoalbum-Website verwiesen. Die Änderungen waren nicht groß, ich habe nur die Vogelgesänge in Chinesisch konvertiert und auch den Upload-Stil geändert Der Grund, warum ich mich dafür entschieden habe, ist, dass es für mich einfach ist, Bilder hinzuzufügen: Eine ist das Hochladen per Drag & Drop, 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 dazu, die Bildinformationen an den Hintergrund zu senden und dann auszuführen entsprechende Verarbeitung, wie Komprimierung und Zuschneiden So viel. Schauen wir uns also zunächst den js-Implementierungscode an.

代码如下

复制代码

<script><br/>$().ready(function() {<br/> if($.browser.safari || $.browser.mozilla). '#drop_zone_home').hover(function(){<br/>   $(this).children('p').stop().animate({top:'0px'},200);<br/>  },function (){<br/>   $(this).children('p').stop().animate({top:'-44px'},200);<br/>  });<br/>  //功能实现<br/>  $(document).on({<br/>   dragleave:function(e){<br/>    e.preventDefault();<br/>    $('.dashboard_target_box').removeClass('over');<br/> },<br/>   drop:function(e){<br/>    e.preventDefault();<br/>    //$('.dashboard_target_box').removeClass('over');<br/>   },<br/>   dragenter :function(e){<br/>    e.preventDefault();<br/>    $('.dashboard_target_box').addClass('over');<br/>   },<br/>   dragover:function(e){<br/>    e.preventDefault();<br/>    $('.dashboard_target_box').addClass('over');<br/>   }<br/>  });<br/>  var box = document.getElementById('target_box'); <br/>  box.addEventListener("drop",function(e){<br/>   e.preventDefault();<br/>   //获取文件列表<br/>   var fileList = e.dataTransfer.files;<br/>   var img = document.createElement('img');<br/>   //检测是否是拖拽文件到页面的操作<br/>   if(fileList.length == 0){<br/>    $('.dashboard_target_box').removeClass ('over');<br/>    return;<br/>   }<br/>   //检测文件是不是图片<br/>   if(fileList[0].type.indexOf('So implementieren Sie die Funktion zum Ziehen und Hochladen von Dateien in HTML5 + PHP') === -1){ <br/>    $('.dashboard_target_box').removeClass('over');<br/>    return;<br/>   }<br/>   <br/>   if($.browser.safari){<br/>    //Chrome8+<br/>    img.src = window.webkitURL.createObjectURL(fileList[0]);<br/>   }else if($.browser.mozilla){<br/>    //FF4+<br/>    img.src = window.URL.createObjectURL( fileList[0]);<br/>   }else{<br/>    //实例化file reader对象<br/>    var reader = new FileReader();<br/>    reader.onload = function(e){<br/>     img. src = this.result;<br/>     $(document.body).appendChild(img);<br/>    }<br/>    reader.readAsDataURL(fileList[0]);<br/>   }<br/>   var xhr = new XMLHttpRequest ();<br/>   xhr.open("post", "test.php", true);<br/>   xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");<br/>   xhr.upload. addEventListener("progress", function(e){<br/>    $("#dtb-msg3").hide();<br/>    $("#dtb-msg4 span").show();<br/>    $("#dtb-msg4").children('span').eq(1).css({width:'0px'}) ;<br/>    $('.show').html('');<br/>    if(e.lengthComputable){<br/>     var geladen = Math.ceil((e.loaded / e.total) * 100) ;<br/>     $("#dtb-msg4").children('span').eq(1).css({width:(loaded*2)+'px'});<br/>    }<br/> }, false);<br/>   xhr.addEventListener("load", function(e){<br/>    $('.dashboard_target_box').removeClass('over');<br/>    $("#dtb-msg3" ).show();<br/>    $("#dtb-msg4 span").hide();<br/>    var result = jQuery.parseJSON(e.target.responseText);<br/>    alert(result.filename) ;<br/>    $('.show').append(result.img);<br/>   }, false);<br/>   <br/>   var fd = new FormData();<br/>   fd.append('xfile ', fileList[0]);<br/>   xhr.send(fd);<br/>  },false);<br/> }else{<br/>  $('#dtb-msg1 .kompatible').hide() ;<br/>  $('#dtb-msg1 .notefficient').show();<br/> }<br/>});<br/></script>      选择你的图片 开始上传       拖动图片到点这里 开始上传图片        选择网络图片

test.php-Datei

代码如下

复制代码

$r = new stdClass( );  header('content-type: application/json');  $maxsize = 10; //Mb  if($_FILES['xfile']['size'] > ($maxsize * 1048576)){   $r->error = "图片大小">图片大小不超过$maxsize MB";  }  $folder = 'files/';  if(!is_dir($folder)){   mkdir($folder);  }  $ Ordner .= $_POST['Ordner'] ? $_POST['Ordner'] : '';  if(!is_dir($folder)){   mkdir($folder);  }    if(preg_match('/So implementieren Sie die Funktion zum Ziehen und Hochladen von Dateien in HTML5 + PHP/i', $_FILES['xfile']['type'])){      $filename = $_POST['value'] ? ['value'] : $folder . sha1(@microtime() . '-' . $_FILES['xfile']['name']) .jpg';  }else{      $tld = split(',', $_FILES['xfile']['name']);      $tld = $tld[count($tld) - 1];      $filename = $_POST['value '] ? $_POST['value'] : $folder . '-' . $_FILES['xfile']['name']) 🎜> $types = Array('So implementieren Sie die Funktion zum Ziehen und Hochladen von Dateien in HTML5 + PHP/png', 'So implementieren Sie die Funktion zum Ziehen und Hochladen von Dateien in HTML5 + PHP/gif', 'So implementieren Sie die Funktion zum Ziehen und Hochladen von Dateien in HTML5 + PHP/jpeg');  if(in_array($_FILES['xfile']['type'], $types)) {   $source = file_get_contents($_FILES["xfile"]["tmp_name"]);   So implementieren Sie die Funktion zum Ziehen und Hochladen von Dateien in HTML5 + PHPresize($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 So implementieren Sie die Funktion zum Ziehen und Hochladen von Dateien in HTML5 + PHPresize($source, $destination, $width = 0, $height = 0, $crop = false, $quality = 80) {      $quality = $quality ? $quality : 80;      $So implementieren Sie die Funktion zum Ziehen und Hochladen von Dateien in HTML5 + PHP = So implementieren Sie die Funktion zum Ziehen und Hochladen von Dateien in HTML5 + PHPcreatefromstring($source);      if ($So implementieren Sie die Funktion zum Ziehen und Hochladen von Dateien in HTML5 + PHP) {          / / Abmessungen abrufen          $w = So implementieren Sie die Funktion zum Ziehen und Hochladen von Dateien in HTML5 + PHPsx($So implementieren Sie die Funktion zum Ziehen und Hochladen von Dateien in HTML5 + PHP);          $h = So implementieren Sie die Funktion zum Ziehen und Hochladen von Dateien in HTML5 + PHPsy($So implementieren Sie die Funktion zum Ziehen und Hochladen von Dateien in HTML5 + PHP);          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;                 $new_width = $width;              } else {                 $new_width = $height * $ratio;                . $ new_height = $height;              }          } sonst {              $new_width = $w;              $new_height = $h;          }          $x_mid = $new_width * .5;  //horizontale Mitte          $y_mid = $new_height * .5; //vertikale Mitte          // Neu abtasten          error_log('height: ' . $new_height . ' - width: ' . $new_width);          $new = So implementieren Sie die Funktion zum Ziehen und Hochladen von Dateien in HTML5 + PHPcreatetruecolor(round($new_width), Round($ new_height));          So implementieren Sie die Funktion zum Ziehen und Hochladen von Dateien in HTML5 + PHPcopyresampled($new, $So implementieren Sie die Funktion zum Ziehen und Hochladen von Dateien in HTML5 + PHP, 0, 0, 0, 0, $new_width, $new_height, $w, $h);          // Crop          if ($crop) {              $crop = So implementieren Sie die Funktion zum Ziehen und Hochladen von Dateien in HTML5 + PHPcreatetruecolor($width ? $width : $new_width, $height ? $height : $new_height);              So implementieren Sie die Funktion zum Ziehen und Hochladen von Dateien in HTML5 + PHPcopyresampled($crop, $new, 0, 0, ($x_mid - ($width * .5)), 0, $width, $height, $width, $height);              //($y_mid - ($height * .5))          }          // Ausgabe          // Interlancing [für progressives JPEG] aktivieren if ($dext == '') {              $dext = $ext;              $destination .= '.' . $ext;          }          switch ($dext) {              case 'jpg':                : $new, $destination, $ qualität);                  break;              case 'png':                 $pngQuality = ($quality - 100) / 11.111111;                . $ pngQuality = Round(abs($pngQuality));                  So implementieren Sie die Funktion zum Ziehen und Hochladen von Dateien in HTML5 + PHPpng ($ crop? >                 break;          } ?> ;

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Funktion zum Ziehen und Hochladen von Dateien in HTML5 + PHP. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!