Heim > Artikel > Web-Frontend > Ein Trick, um mit JS einen asynchronen Upload komprimierter Bilder zu erreichen

Ein Trick, um mit JS einen asynchronen Upload komprimierter Bilder zu erreichen

零下一度Original: 2017-04-25 10:45:021512Durchsuche

Dieser Artikel stellt hauptsächlich die JS-Implementierung des asynchronen Hochladens komprimierter Bilder und der sofortigen Anzeige von Bildern vor. Interessierte Freunde können sich darauf beziehen

Zusammenfassung: Verwenden Sie iframe, um das asynchrone Hochladen zu verarbeiten von Bildern ist heutzutage mehr oder weniger rückständig! Ist es nicht möglich, Bilder asynchron nur mit AJAX und JS hochzuladen?

Danke an think2011 für diese JS-Bibliothek: github.com/think2011/LocalResizeIMG

Schauen Sie sich zuerst die aufrufende Seite an:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <script type="text/javascript" src="./js/lrz.mobile.min.js"></script>
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
</head>
<body class="upload">
<form id="form">
    <p id="img_show"></p>
    <p id="upload">
      <p id="img_file"><input type="file" accept="image/*" ><p class="btn">选择图片</p></p>
    </p>
    <input type="submit" class="tijiao" value="提交">
  </form>
</body>

<script type="text/javascript">
  var img;
  $("input:file").change(function (){
    //console.log(this.files[0]);
    lrz(this.files[0],{width:640,quality:0.9},function(rst){
      img = rst.base64;
      var html = [];
      var show_img = new Image();
      show_img.src = rst.base64;
      $("#img_show").html("<p class=&#39;upimg&#39;></p>");
      $(".upimg").html(show_img);
    });
  });
  $("#form").submit(function (){
    var phone = $("input[name=&#39;phone&#39;]").val();
    var month = $("input[name=&#39;month&#39;]").val();
    $.post("upload.php",{img:img,phone:phone,month:month},function(data){
      img = null;
      alert(data.msg);
    },&#39;json&#39;);
    return false;
  });
</script>
</html>

Zuerst Sie So laden Sie die JS-Bibliothek:

343d850cbb57dc7eab4662bb2c8e888b2cacc6d41bbb37262a98f745aa00fbf0

2. Schreiben Sie dann das Formular

3. Bereiten Sie den JS für die Verarbeitung von Bildern und die asynchrone Übermittlung von Bildern vor.

<script type="text/javascript">
  var img;
  $("input:file").change(function (){
    //console.log(this.files[0]);
    lrz(this.files[0],{width:640,quality:0.9},function(rst){
      img = rst.base64;
      var html = [];
      var show_img = new Image();
      show_img.src = rst.base64;
      $("#img_show").html("<p class=&#39;upimg&#39;></p>");
      $(".upimg").html(show_img);
    });
  });
  $("#form").submit(function (){
    var phone = $("input[name=&#39;phone&#39;]").val();
    var month = $("input[name=&#39;month&#39;]").val();
    $.post("upload.php",{img:img},function(data){
      img = null;
      alert(data.msg);
    },&#39;json&#39;);
    return false;
  });
</script>

Wie Sie dem Code entnehmen können, konvertiert diese JS-Bibliothek Bilder in Code, speichert sie dann in Variablen und sendet sie dann zur Verarbeitung per asynchronem POST an den Server.

Es scheint nichts Besonderes daran zu sein, und tatsächlich ist es nichts Besonderes daran...

Hintergrundverarbeitungsprogramm PHP:

function error($msg=&#39;&#39;){
  $return = array(&#39;msg&#39;=>$msg);
  echo json_encode($return);
  exit();
}

function main(){
  if(!$_POST[&#39;img&#39;]){
    error(&#39;请上传图片!&#39;);
  }
  $img = $_POST[&#39;img&#39;];
  $path = &#39;./upload/&#39;;
  $type_limit = array(&#39;jpg&#39;,&#39;jpeg&#39;,&#39;png&#39;);
  if(preg_match(&#39;/data:\s*image\/(\w+);base64,/iu&#39;,$img,$tmp)){
    if(!in_array($tmp[1],$type_limit)){
      error(&#39;图片格式不正确，只支持jpg,jpeg,png!&#39;);
    }
  }else{
    error(&#39;抱歉！上传失败，请重新再试!&#39;);
  }
  
  $img = str_replace(&#39; &#39;,&#39;+&#39;,$img);
  
  $img = str_replace($tmp[0], &#39;&#39;, $img);

  $img = base64_decode($img);
  
  $file = $path.time().&#39;.&#39;.$tmp[1];
  if(!file_put_contents($file,$img)){
    error(&#39;上传图片失败!&#39;);
  }else{
    error(&#39;恭喜您！上传成功!&#39;);
  }
}
main();

Wenn ja Gibt es Fehler im obigen Code, weisen Sie uns bitte darauf hin.

Wie Sie im Einspruchscode sehen können, müssen wir den Code wiederherstellen, nachdem der BASE64-verschlüsselte Bildcode asynchron über JS an das Backend gesendet wurde. Allerdings verfügt die JS-Bibliothek bei der Verschlüsselung über einige Tags, sodass diese Dinge, bei denen es sich ursprünglich nicht um Bilder handelt, vor der Wiederherstellung verarbeitet werden müssen.

$img = str_replace(&#39; &#39;,&#39;+&#39;,$img);  
$img = str_replace($tmp[0], &#39;&#39;, $img);
$img = base64_decode($img);

Fügen Sie abschließend den Code in die Datei ein, legen Sie den entsprechenden Dateinamen und die Erweiterung fest, und das Bild wird erfolgreich auf den Server hochgeladen.

Hinweis:

Das Front-End und das Back-End einschließlich der JS-Kodierung müssen konsistent sein. Es wird UTF-8 empfohlen.

Wenn die Die Bildwiederherstellung wird nicht durchgeführt, es muss ein Datenproblem vorliegen. Drucken Sie den Bildcode von POST aus und sehen Sie sich das an.

Studenten, die js lernen müssen, achten bitte auf die chinesische PHP-Website js-Video-Tutorials. Viele js-Online-Video-Tutorials können kostenlos angesehen werden!

Das obige ist der detaillierte Inhalt vonEin Trick, um mit JS einen asynchronen Upload komprimierter Bilder zu erreichen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Teilen Sie einen Beispielcode für den Fortschrittsbalken beim Drucken des NodeJS-TerminalsNächster Artikel：Teilen Sie einen Beispielcode für den Fortschrittsbalken beim Drucken des NodeJS-Terminals

In Verbindung stehende Artikel

Mehr sehen