One trick to achieve asynchronous upload of compressed images using JS-JS Tutorial-php.cn

One trick to achieve asynchronous upload of compressed images using JS

零下一度

Release： 2017-04-25 10:45:02

Original

1586 people have browsed it

This article mainly introduces in detail the JS implementation of asynchronous uploading of compressed images and immediate display of images. It has certain reference value. Interested friends can refer to it.

Abstract: Use iframe to Processing asynchronous uploading of images is more or less backward in this era! Isn’t it possible to upload images asynchronously using AJAX and JS alone?

Thank you think2011 for this brother’s JS library: github.com/think2011/LocalResizeIMG

Look at the calling page first:

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

Copy after login

1. First you need to load Enter the JS class library:

2. Then write the form

3. Prepare the JS for processing images and asynchronous submission of 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>

Copy after login

As can be seen from the code, this JS library converts the image into code, then stores it in a variable, and then uses asynchronous POST to the server for processing.

It seems there is nothing special about it, indeed there is nothing special about it...

Background processing program 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();

Copy after login

Above If there are any errors in the code, please point them out.

As for the appeal code, as you can see, after the BASE64-encrypted image code comes to the backend through JS asynchronous POST, we need to restore the code. However, the JS library will have some tags when encrypted, so these things that are not originally images need to be processed before restoration.

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

Copy after login

Finally, insert the code into the file, set the corresponding file name and extension, and the image will be successfully uploaded to the server.

Note:

The front-end and back-end including JS encoding must be consistent. It is recommended to UTF-8

If the image restoration will not come, then it must be There is a data problem. Print the image code from POST and take a look.

Students who need to learn js please pay attention to php Chinese website js video tutorial, many js online video tutorials can be watched for free!

The above is the detailed content of One trick to achieve asynchronous upload of compressed images using JS. For more information, please follow other related articles on the PHP Chinese website!