localResizeIMG first compresses and then uses ajax to upload without refresh (mobile terminal)

localResizeIMG first compresses and then uses ajax to upload without refresh (mobile terminal)_javascript skills

WBOY

Release： 2016-05-16 15:45:49

Original

1785 people have browsed it

The following uses text description and code analysis to share with you the localResizeIMG for mobile image uploading. It compresses first and then uploads it with ajax without refreshing. Please see below for the specific implementation process.

Nowadays, technology is so advanced that mobile devices are getting higher and higher pixels. A random photo is 2M. However, uploading pictures on the mobile terminal is slightly different from that on the PC. You cannot limit the size of the picture on the mobile terminal and let the user process the picture first. Uploading it again is unrealistic. So the solution I understand is to compress the image before uploading, and then upload the compressed image to the server.

After searching Google, I found localResizeIMG. It will compress the image to the width and quality you specify and convert it into base64 image format. Then we can transfer the base64 to the background through ajax and save it. First The purpose of uploading after compression is achieved.

Processing process

LocalResizeIMG compressed images
AjaxPost image base64 to the background
Receive base64 in the background and save it, returning status
Frontend code

Key points, quote LocalResizeIMG.js (plug-in body) and mobileBUGFix.mini.js (mobile patch)

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

Copy after login

Js part, localResizeIMG and Ajax submission part

How to use

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

Copy after login

localResizeIMG parameter:

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

localResizeIMG return value

result.base64: Base64 encoding with image type, which can be directly used in the src of the img tag, such as "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/…2wBDAAYEBQYFBAY";

result.clearBase64: encoding without image 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= '<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);
      }
    }); 
   }
 });
});

Copy after login

Save file

In the above step, we passed result.clearBase64 into upload.php through Ajax. Next, we need to receive the base64 parameter in upload.php, convert it into an img file, save it to the server, and give Prompt.

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

Copy after login

Shortcomings

The image modes after localResizeIMG compression are all jpeg, and the original format cannot be guaranteed.

When the image width is smaller than the width parameter set by localResizeIMG, the image will be stretched, causing image distortion (for example, when the width height is 600 and the image is only 400px, the compressed image becomes 600px and the image size becomes If it is too large, it will be distorted). I wonder if anyone has any good solutions.

The above content is the entire content of this article that introduces localResizeIMG to compress first and then upload it using ajax without refreshing. I hope you like it.