JS implements asynchronous upload and compression of images, and js asynchronously uploads images

JS implements asynchronous upload and compression of images, and js asynchronously uploads images

Abstract: iframe is used to process asynchronous upload of images. In this era, it is a little lagging behind! Why can't I upload images asynchronously Based On AJAX and JS alone?

Thanks to think2011, the middleware's JS Library: https://github.com/think2011/LocalResizeIMG

First look at the call page:

<! Doctype html> 
1. First, you need to load the JS Class Library:
<Script type = "text/javascript" src = "./js/lrz. mobile. min. js"> </script>

2. Then write the form
3. Prepare JS for asynchronous image processing.
<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("<div class='upimg'></div>");      $(".upimg").html(show_img);    });  });  $("#form").submit(function (){    var phone = $("input[name='phone']").val();    var month = $("input[name='month']").val();    $.post("upload.php",{img:img},function(data){      img = null;      alert(data.msg);    },'json');    return false;  });</script>
From the code, we can see that this JS library converts the image into a code, stores it with variables, and then processes it in asynchronous POST to the server.
It seems that there is nothing special, and there is really nothing special .......
Background processing program PHP:
Function error ($ msg = '') {$ return = array ('msg '=> $ msg); echo json_encode ($ return); exit ();} function main () {if (! $ _ POST ['img ']) {error ('upload an image! ') ;}$ Img =$ _ POST ['img']; $ path = '. /upload/'; $ type_limit = array ('jpg', 'jpeg ', 'png'); if (preg_match ('/data: \ s * image \/(\ w +); base64,/iu ', $ img, $ tmp) {if (! In_array ($ tmp [1], $ type_limit) {error ('the image format is incorrect. Only jpg, jpeg, and png images are supported! ') ;}} Else {error (' sorry! Upload Failed. Please try again! ') ;}$ Img = str_replace ('',' + ', $ img); $ img = str_replace ($ tmp [0],'', $ img ); $ img = base64_decode ($ img); $ file = $ path. time (). '. '. $ tmp [1]; if (! File_put_contents ($ file, $ img) {error ('image Upload Failed! ');} Else {error (' congratulations! Uploaded successfully! ') ;}} Main ();
If any error occurs in the above Code, please note.
As you can see in the appeal code, after BASE64-encrypted image codes are passed through JS asynchronous POST to the backend, we need to restore the code. However, the JS library will contain some labels during encryption, so you need to process the items that are not actually images before restoring them.
$img = str_replace(' ','+',$img);  $img = str_replace($tmp[0], '', $img);$img = base64_decode($img);
Finally, code is inserted into the file, and the corresponding file name and extension are set. The image is uploaded to the server.
Note:
Front and back end including JS encoding to be consistent, it is recommended that UTF-8
If the image cannot be restored, it must be a data problem. Print the image code from the POST and check it out.
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.