localResizeIMG先压缩后使用ajax无刷新上传(移动端)
作者:码农小兵 发布时间:2024-05-09 10:35:26
下面通过文字说明和代码分析的方式给大家分享移动端图片上传之localResizeIMG先压缩后ajax无刷新上传,具体实现过程请看下文。
现在科技太发达,移动设备像素越来越高,随便一张照片2M+,但是要做移动端图片上传和pc上略有不同,移动端你不能去限制图片大小,让用户先处理图片再上传,这样不现实。所以理解的解决方案就是在上传先进行图片压缩,然后再把压缩后的图片上传到服务器。
一翻google之后,发现了localResizeIMG,它会对图片进行压缩成你指定宽度及质量度并转换成base64图片格式,那么我们就可以把这个base64通过ajax传到后台,再进行保存,先压缩后上传的目的就达到了。
处理过程
LocalResizeIMG压缩图片
AjaxPost图片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>
Js部份,localResizeIMG及Ajax提交部份
使用方法
$('input:file').localResizeIMG({
width: 400,//宽度
quality: 1,//质量
success: function (result) {
result.base64/result.clearBase64
}
});
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无刷新上传的全部内容,希望大家喜欢。
猜你喜欢
- 以下面的代码为例import osos.system(“ping www.baidu.com”)在pycharm界面运行后会显示乱码,如下图
- 本文实例讲述了Python3.4类型判断,异常处理,终止程序操作。分享给大家供大家参考,具体如下:python3.4学习笔记 类型判断,异常
- PHP如何获取当前页完整URL及其参数 <? echo 'http://'.$_SERVER[&
- 前言本文主要给大家介绍了关于django配置连接数据库及原生sql语句的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介
- 为什么要手动添加核?因为使用公司的服务器,最好不要直接使用anaconda自带的python,更不要使用系统下自带的python,如果每个人
- 前言:Python主要有三种数据类型:字典、列表、元组。其分别由花括号,中括号,小括号表示。如:字典:dic={'a':12
- SuperSocket 信息: (SpnRegister) : Error 1355。&n
- 将数组传递给前台模板:1.def modifyBtn(req,modifyip): print modifyip c
- 前言MySQL 服务器正确安装以后,可以通过命令行管理工具或者图形化的管理工具来操作 MySQL 数据库。MySQL 图形化管理工具极大地方
- 一、概述python中的逻辑操作符and 和or,也叫惰性求值,由于是惰性,只要确定了值就不往后解析代码了。二、用法说明(一)and 用法文
- 前言:我们知道,python代码文件大多数都是py类型。那么,能不能使用txt文件存储我们的代码呢?python这么强大的语言当然可以做大,
- Protobuf是google开发的一个序列化和反序列化的协议库,我们可以自己设计传递数据的格式,通过.proto文件定义我们的要传递的数据
- 废话不多说,直接上代码吧!#python中,while语句用于循环执行程序,即在某个条件下,循环执行某段程序,以处理需要重复处理的相同任务。
- 一、MySQL优点:体积小、速度快、总体拥有成本低,开源;支持多种操作系统;是开源数据库,提供的接口支持多种语言连接操作 ;MySQL的核心
- 1. 更新日志1.1. v1.01.1.1. 破坏性变更gorm.Open返回类型为*gorm.DB而不是gorm.DB更新只会更新更改的字
- 本文给大家介绍使用js实现下拉菜单可选择互相移动并实现菜单排序,代码简单易懂,具有参考价值,先给大家展示下效果图,感觉还很满意请参考本段代码
- 我就废话不多说了,大家还是直接看代码吧~import tensorflow as tfh_doc=tf.placeholder(tf.int
- 首先要有一个概念:并不是一个语言支持函数,这个语言就可以叫做“函数式语言”。函数式语言中的函数(function),除了能被调用之外,还具有
- Go令牌Go程序包括各种令牌和令牌可以是一个关键字,一个标识符,常量,字符串文字或符号。例如,下面的Go语句由六个令牌:fmt.Printl
- 近期安装了python后,发现使用pycharm工具打开代码后发现代码下边会有波浪线的显示;但是该代码语句确实没有错误,通过查询发现了两种方