Maison > Article > interface Web > Une astuce pour réaliser un téléchargement asynchrone d'images compressées à l'aide de JS

Une astuce pour réaliser un téléchargement asynchrone d'images compressées à l'aide de JS

零下一度original: 2017-04-25 10:45:021512parcourir

Cet article présente principalement JS pour implémenter le téléchargement asynchrone d'images compressées et l'affichage immédiat des images. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

Résumé : Utiliser iframe pour traiter le téléchargement asynchrone d'images. plus ou moins en retard à cette époque ! N'est-il pas possible de télécharger des images de manière asynchrone en utilisant uniquement AJAX et JS ?

Merci à think2011 pour cette bibliothèque JS : github.com/think2011/LocalResizeIMG

Regardez d'abord la page d'appel :

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

1. Pour charger la bibliothèque JS :

343d850cbb57dc7eab4662bb2c8e888b2cacc6d41bbb37262a98f745aa00fbf0

2. Rédigez ensuite le formulaire

3. Préparez le JS pour le traitement des images et la soumission asynchrone des images.

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

Comme vous pouvez le voir dans le code, cette bibliothèque JS convertit les images en code, puis les stocke dans des variables, puis utilise un POST asynchrone sur le serveur pour le traitement.

On dirait qu'il n'y a rien de spécial, mais il n'y a en effet rien de spécial...

Programme de traitement en arrière-plan 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();

S'il y a toute erreur dans le code ci-dessus, veuillez le signaler.

Comme dans le code d'appel, comme vous pouvez le voir, une fois le code de l'image crypté en BASE64 posté de manière asynchrone sur le backend via JS, nous devons restaurer le code. Cependant, la bibliothèque JS aura certaines balises une fois chiffrée, donc ces éléments qui ne sont pas à l'origine des images doivent être traités avant la restauration.

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

Enfin, insérez le code dans le fichier, définissez le nom et l'extension du fichier correspondant, et l'image sera téléchargée avec succès sur le serveur.

Remarque :

Le front-end et le back-end, y compris l'encodage JS, doivent être cohérents avec UTF-8

Si le. la restauration de l'image ne viendra pas, elle doit être. Il y a un problème de données. Imprimez le code de l'image depuis le POST et jetez-y un œil.

Étudiants qui ont besoin d'apprendre js, veuillez faire attention au site Web chinois php Tutoriels vidéo js De nombreux didacticiels vidéo js en ligne peuvent être visionnés gratuitement !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

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：Partager un exemple de code de la barre de progression de l'impression du terminal nodejsArticle suivant：Partager un exemple de code de la barre de progression de l'impression du terminal nodejs

Articles Liés

Voir plus