Localresizeimg first compress and use Ajax without refreshing upload (mobile end) _javascript Tips

Below through the text description and code analysis of the way to share the mobile end of the picture upload localresizeimg first compressed Ajax No refresh upload, the specific implementation process please see below.

Now technology is too advanced, mobile device pixels are higher, any photo 2m+, but to do mobile image upload and PC slightly different, mobile end you can not go to limit the size of the picture, let users deal with the picture before uploading, so unrealistic. So understand the solution is to upload the image before the compression, and then the compressed image uploaded to the server.

After Google, found the localresizeimg, it will compress the image into your designated width and quality and convert to Base64 picture format, then we can upload this base64 through the background, and then save, first compressed after the purpose of the upload.

Processing process

localresizeimg Compressed picture
Ajaxpost picture Base64 to the background
Background receive Base64 and save, return status
Front Code

Emphasis, referencing localresizeimg.js (plugin body) and mobileBUGFix.mini.js (Patch for mobile end)

<! DOCTYPE html>  

JS part, LOCALRESIZEIMG and Ajax submission part

How to use

$ (' Input:file '). Localresizeimg ({
   width:400,//width
   quality:1,//quality
   success:function (result) {
      Result.base64/result.clearbase64
   }
});

Localresizeimg Parameters:

Width: thumbnail widths
Quality: Picture quality, 0-1, the bigger the better

Localresizeimg return value

Result.base64: Base64 encoding with picture type, can be directly used for IMG label SRC, such as "data:image/jpeg;base64,/9j/4aaqskzjrgabaqaaaqabaad/... 2wBDAAYEBQYFBAY ";

Result.clearbase64: Encoding with no picture type, such as "/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= '  '; 
        $ (". Imglist"). Append (Attstr); 
       }
      , 
      complete:function (XMLHttpRequest, textstatus) {
      },
      Error:function (XMLHttpRequest, Textstatus, Errorthrown) {//Upload failure 
        alert (xmlhttprequest.status);
        alert (xmlhttprequest.readystate);
        alert (textstatus);}});}};

Save File

In the above step, we put result.clearbase64 through Ajax into the upload.php, next we will receive Base64 parameters in upload.php, convert it into an img file saved to the server, and give hints.

$base 64_string = $_post[' base64_string '];
 $savename = Uniqid (). JPEG ';//localresizeimg compressed pictures are JPEG format
 $savepath = ' images/'. $savename; 
 $image = base64_to_img ($base 64_string, $savepath);
 if ($image) {
   echo ' {"status": 1, "content": "Upload succeeded", "url": "'. $image. '"} ';
 } else{
   echo ' {status ': 0, ' content ': ' Upload failed '} ';
 } 
 function base64_to_img ($base 64_string, $output _file) {
   $ifp = fopen ($output _file, "WB"); 
   Fwrite ($IFP, Base64_decode ($base 64_string)); 
   Fclose ($IFP); 
   Return ($output _file); 
 

The inadequacy of the place

LOCALRESIZEIMG compressed image mode is JPEG, can not guarantee the original format.

When the picture width is less than the localresizeimg set width parameter, the picture will be lashin, thus causing the picture distortion (for example, height is 600, the picture is only 400px, the compressed picture becomes 600px, picture size becomes larger, will be distorted), I don't know if there are any good solutions for you.

The above content is this article introduced LOCALRESIZEIMG first compresses uses the Ajax not to refresh uploads the entire content, hoped everybody likes.