Heim >Web-Frontend >js-Tutorial >localResizeIMG komprimiert zuerst und verwendet dann Ajax zum Hochladen ohne Aktualisierung (mobiles Terminal)_Javascript-Kenntnisse

localResizeIMG komprimiert zuerst und verwendet dann Ajax zum Hochladen ohne Aktualisierung (mobiles Terminal)_Javascript-Kenntnisse

WBOYOriginal: 2016-05-16 15:45:491796Durchsuche

Im Folgenden werden eine Textbeschreibung und eine Codeanalyse verwendet, um das localResizeIMG für das Hochladen mobiler Bilder mitzuteilen. Es komprimiert es zunächst und lädt es dann ohne Aktualisierung mit Ajax hoch.

Heutzutage ist die Technologie so weit fortgeschritten, dass mobile Geräte immer höhere Pixel haben. Das Hochladen von Bildern auf dem mobilen Endgerät unterscheidet sich jedoch geringfügig von dem auf dem PC auf dem mobilen Endgerät zu laden und den Nutzer das Bild erst einmal bearbeiten zu lassen, ist unrealistisch. Die Lösung, die ich verstehe, besteht also darin, das Bild vor dem Hochladen zu komprimieren und das komprimierte Bild dann auf den Server hochzuladen.

Nachdem ich bei Google gesucht habe, habe ich localResizeIMG gefunden. Es komprimiert das Bild auf die von Ihnen angegebene Breite und Qualität und konvertiert es in das Base64-Bildformat. Anschließend können wir es über Ajax in den Hintergrund übertragen und speichern Hochladen nach erfolgter Komprimierung.

Verarbeitungsprozess

LocalResizeIMG-komprimierte Bilder
AjaxPost-Bild base64 im Hintergrund
Base64 im Hintergrund empfangen und speichern, wobei der Status
zurückgegeben wird Frontend-Code

Wichtige Punkte, zitieren Sie LocalResizeIMG.js (Plug-in-Körper) und mobileBUGFix.mini.js (mobiler Patch)

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>移动端图片上传解决方案localResizeIMG先压缩后ajax无刷新上传</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width , initial-scale=1.0 , user-scalable=0 , minimum-scale=1.0 , maximum-scale=1.0" />
<script type='text/javascript' src='js/jquery-2.0.3.min.js'></script>
<script type='text/javascript' src='js/LocalResizeIMG.js'></script>
<script type='text/javascript' src='js/patch/mobileBUGFix.mini.js'></script>
<style type="text/css">
 body{font-family:"微软雅黑"}
 .uploadbtn{ display:block;height:40px; line-height:40px; color:#333; text-align:center; width:100%; background:#f2f2f2; text-decoration:none; }
 .imglist{min-height:200px;margin:10px;}
 .imglist img{width:100%;}
</style>
</head>
<body>
<div style="width:500px;margin:10px auto; border:solid 1px #ddd; overflow:hidden; ">
 <input type="file" id="uploadphoto" name="uploadfile" value="请点击上传图片" style="display:none;" /> 
 <div class="imglist"></div> 
 <a href="javascript:void(0);" onclick="uploadphoto.click()" class="uploadbtn">点击上传文件</a>
</div>
<div style="text-align:center;margin-top:50px;">@ <a href="http://www.devdo.net/">码农小兵,专注web开发 欢迎投稿</a></div> 
</body>
</html>

Js-Teil, localResizeIMG und Ajax-Übermittlungsteil

Anwendung

$('input:file').localResizeIMG({
   width: 400,//宽度
   quality: 1,//质量
   success: function (result) {
      result.base64/result.clearBase64
   }
});

localResizeIMG-Parameter:

Breite: Miniaturbildbreite
Qualität: Bildqualität, 0-1, je größer, desto besser

localResizeIMG Rückgabewert

result.base64: Base64-Kodierung mit Bildtyp, die direkt im src des img-Tags verwendet werden kann, wie zum Beispiel „data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/…2wBDAAYEBQYFBAY“;

result.clearBase64: Kodierung ohne Bildtyp, z. B. „/9j/4AAQSkZJRgABAQAAAQABAAD/…2wBDAAYEBQYFBAY“

$(document).ready(function(e) {
  $('#uploadphoto').localResizeIMG({
   width: 400,
   quality: 1,
   success: function (result) { 
     var submitData={
        base64_string:result.clearBase64, 
      }; 
    $.ajax({
      type: "POST",
      url: "upload.php",
      data: submitData,
      dataType:"json",
      success: function(data){
       if (0 == data.status) {
        alert(data.content);
        return false;
       }else{
        alert(data.content);
        var attstr= '<img src="'+data.url+'" alt="" />'; 
        $(".imglist").append(attstr); 
       }
      }, 
      complete :function(XMLHttpRequest, textStatus){
      },
      error:function(XMLHttpRequest, textStatus, errorThrown){ //上传失败 
        alert(XMLHttpRequest.status);
        alert(XMLHttpRequest.readyState);
        alert(textStatus);
      }
    }); 
   }
 });
});

Datei speichern

Im obigen Schritt haben wir result.clearBase64 über Ajax an upload.php übergeben. Als nächstes müssen wir den base64-Parameter in upload.php empfangen, ihn in eine IMG-Datei konvertieren, auf dem Server speichern und Prompt geben .

$base64_string = $_POST['base64_string'];
 $savename = uniqid().'.jpeg';//localResizeIMG压缩后的图片都是jpeg格式
 $savepath = 'images/'.$savename; 
 $image = base64_to_img( $base64_string, $savepath );
 if($image){
   echo '{"status":1,"content":"上传成功","url":"'.$image.'"}';
 }else{
   echo '{"status":0,"content":"上传失败"}';
 } 
 function base64_to_img( $base64_string, $output_file ) {
   $ifp = fopen( $output_file, "wb" ); 
   fwrite( $ifp, base64_decode( $base64_string) ); 
   fclose( $ifp ); 
   return( $output_file ); 
 }

Mängel

Die Bildmodi nach der LocalResizeIMG-Komprimierung sind alle JPEG und das Originalformat kann nicht garantiert werden.

Wenn die Bildbreite kleiner ist als der von localResizeIMG festgelegte Breitenparameter, wird das Bild gestreckt, was zu Bildverzerrungen führt (wenn beispielsweise die Breite und Höhe 600 beträgt und das Bild nur 400 Pixel groß ist, wird das komprimierte Bild 600 Pixel groß und das Wenn das Bild zu groß ist, wird es verzerrt. Ich frage mich, ob jemand gute Lösungen hat.

Der obige Inhalt ist der gesamte Inhalt dieses Artikels, in dem localResizeIMG vorgestellt wird, um ihn zuerst zu komprimieren und ihn dann ohne Aktualisierung mit Ajax hochzuladen.

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：tuzhu_req.js erkennt den Effekt der Nachahmung des Baidu-Bildes homepage_jqueryNächster Artikel：tuzhu_req.js erkennt den Effekt der Nachahmung des Baidu-Bildes homepage_jquery

In Verbindung stehende Artikel

Mehr sehen