localResizeIMG移动端图片压缩与Ajax无刷新上传实现

作者:橙子时间:2026-10-29 13:34:41浏览:357

本文介绍在移动端开发中,利用localResizeIMG库实现图片先压缩后通过Ajax无刷新上传的完整方案。针对移动设备高分辨率照片,通过指定宽度和质量参数将图片转换为base64格式,再经Ajax传输至后台保存,解决大文件上传问题。

移动端图片上传背景与方案

本文结合文字说明与代码分析,详细介绍移动端图片上传中利用localResizeIMG进行先压缩后通过Ajax无刷新上传的具体实现过程。

随着移动设备像素不断提升,拍摄的照片体积往往超过2M。与PC端不同,移动端无法要求用户先处理图片再上传,因此合理的解决方案是在上传前对图片进行压缩,再将压缩后的图片发送至服务器。

经过搜索,发现localResizeIMG库可以将图片压缩至指定宽度及质量,并转换为base64格式。随后通过Ajax将base64数据发送至后台进行保存,从而实现先压缩后上传的目标。

处理流程如下:

首先使用LocalResizeIMG压缩图片,接着通过Ajax将图片的base64数据发送至后台,后台接收base64并保存后返回状态。以下是前台代码示例。

前端代码实现

关键步骤是引用LocalResizeIMG.js(插件主体)以及mobileBUGFix.mini.js(移动端补丁)。


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

JavaScript部分主要涉及localResizeIMG的使用及Ajax提交逻辑。

具体使用方法如下:


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

localResizeIMG参数与返回值

localResizeIMG的主要参数包括:

width:设置缩略图的宽度;quality:设置图片质量,取值范围0至1,数值越大图片质量越高。

localResizeIMG的返回值包含以下字段:

result.base64:包含图片类型的base64编码,可直接用于img标签的src属性,例如“data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/…2wBDAAYEBQYFBAY”。

result.clearBase64:不包含图片类型的纯编码,例如“/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);
      }
    }); 
   }
 });
});

后台接收与保存处理

保存文件处理:

在前一步中,我们将result.clearBase64通过Ajax传入upload.php。接下来需要在upload.php中接收base64参数,将其转换为img文件并保存至服务器,同时返回提示信息。


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

方案局限性分析

该方案存在以下不足之处:

localResizeIMG压缩后的图片格式统一为jpeg,无法保证保留原有图片格式。

当原图宽度小于localResizeIMG设置的width参数时,图片会被拉伸,导致失真。例如,若设置width为600,而原图宽度仅为400px,压缩后图片尺寸变为600px,从而引起图像失真。目前尚未找到完美的解决方法。

以上内容为本文关于localResizeIMG先压缩后使用Ajax无刷新上传的完整介绍,希望对大家有所帮助。

作者最新文章