localResizeIMG移动端图片压缩与Ajax无刷新上传实现
本文介绍在移动端开发中,利用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无刷新上传的完整介绍,希望对大家有所帮助。
JS脚本在App中运行报错怎么解决
2026-11-04 23:11:03
JS怎么使用padStart方法给数字补零
2026-11-04 11:12:03
JS是什么意思?JavaScript全称及基本定义
2026-11-04 08:05:29
JS 使用 toFixed(1) 保留一位小数的基本用法与注意事项
2026-11-03 18:34:57
JS字符串转整数:parseInt与Number的区别及用法
2026-11-03 17:26:54
