recherche

Maison >interface Web >js tutoriel >localResizeIMG compresse d'abord puis utilise ajax pour télécharger sans actualisation (terminal mobile)_compétences javascript

localResizeIMG compresse d'abord puis utilise ajax pour télécharger sans actualisation (terminal mobile)_compétences javascript

WBOY
WBOYoriginal
2016-05-16 15:45:491798parcourir

Ce qui suit utilise une description de texte et une analyse de code pour partager avec vous le localResizeIMG pour le téléchargement d'images mobiles. Il le compresse d'abord, puis le télécharge avec ajax sans actualiser. Veuillez voir ci-dessous pour le processus de mise en œuvre spécifique.

De nos jours, la technologie est si avancée que les appareils mobiles ont des pixels de plus en plus élevés. Cependant, le téléchargement d'images sur le terminal mobile est légèrement différent de celui sur le PC. Vous ne pouvez pas limiter la taille de l'image. sur le terminal mobile et laisser l'utilisateur traiter l'image en premier. Il est irréaliste de la télécharger à nouveau. La solution que je comprends est donc de compresser l'image avant de la télécharger, puis de télécharger l'image compressée sur le serveur.

Après une recherche sur Google, j'ai trouvé localResizeIMG. Il compressera l'image à la largeur et à la qualité que vous spécifiez et la convertira au format d'image base64. Ensuite, nous pourrons transférer le base64 en arrière-plan via ajax et l'enregistrer en premier. téléchargement une fois la compression terminée.

Processus de traitement

Images compressées LocalResizeIMG
Image AjaxPost base64 en arrière-plan
Recevez base64 en arrière-plan et enregistrez-le, renvoyant le statut
Code frontal

Points clés, citez LocalResizeIMG.js (corps du plug-in) et mobileBUGFix.mini.js (patch mobile) 

<!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>

Partie Js, partie localResizeIMG et soumission Ajax

Comment utiliser

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

Paramètre localResizeIMG :

largeur : largeur de la vignette
Qualité : Qualité d'image, 0-1, plus c'est grand, mieux c'est

valeur de retour localResizeIMG

result.base64 : encodage Base64 avec type d'image, qui peut être directement utilisé dans le src de la balise img, tel que "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/…2wBDAAYEBQYFBAY";

result.clearBase64 : encodage sans type d'image, tel que "/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);
      }
    }); 
   }
 });
});

Enregistrer le fichier

Dans l'étape ci-dessus, nous avons transmis result.clearBase64 dans upload.php via Ajax. Ensuite, nous devons recevoir le paramètre base64 dans upload.php, le convertir en fichier img, l'enregistrer sur le serveur et envoyer une invite. . 

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

Défauts

Les modes d'image après compression localResizeIMG sont tous jpeg et le format original ne peut pas être garanti.

Lorsque la largeur de l'image est inférieure au paramètre de largeur défini par localResizeIMG, l'image sera étirée, provoquant une distorsion de l'image (par exemple, lorsque la largeur et la hauteur sont de 600 et que l'image ne fait que 400 px, l'image compressée devient 600 px et la la taille de l'image devient si elle est trop grande, elle sera déformée). Je me demande si quelqu'un a de bonnes solutions.

Le contenu ci-dessus est l'intégralité du contenu de cet article qui présente localResizeIMG pour le compresser d'abord, puis le télécharger en utilisant ajax sans actualiser. J'espère que vous l'aimerez.

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：tuzhu_req.js réalise l'effet d'imiter l'image Baidu homepage_jqueryArticle suivant：tuzhu_req.js réalise l'effet d'imiter l'image Baidu homepage_jquery

Articles Liés

Voir plus