js图片压缩java上传,JS实现异步上传压缩图片

摘要: 使用iframe来处理异步上传图片,在现在这个时代来说,多多少少都有点落后了!单单就凭AJAX和JS就不能做到异步上传图片了吗?

先看调用页面:

选择图片

var img;

$("input:file").change(function (){

//console.log(this.files[0]);

lrz(this.files[0],{width:640,quality:0.9},function(rst){

img = rst.base64;

var html = [];

var show_img = new Image();

show_img.src = rst.base64;

$("#img_show").html("

$(".upimg").html(show_img);

});

});

$("#form").submit(function (){

var phone = $("input[name='phone']").val();

var month = $("input[name='month']").val();

$.post("upload.php",{img:img,phone:phone,month:month},function(data){

img = null;

alert(data.msg);

},'json');

return false;

});

1.首先你要载入JS类库:

2.然后就是写好form

3.准备处理图片以及图片异步提交的JS。

var img;

$("input:file").change(function (){

//console.log(this.files[0]);

lrz(this.files[0],{width:640,quality:0.9},function(rst){

img = rst.base64;

var html = [];

var show_img = new Image();

show_img.src = rst.base64;

$("#img_show").html("

$(".upimg").html(show_img);

});

});

$("#form").submit(function (){

var phone = $("input[name='phone']").val();

var month = $("input[name='month']").val();

$.post("upload.php",{img:img},function(data){

img = null;

alert(data.msg);

},'json');

return false;

});

从代码中可以看出,这个JS库是把图片转成码,然后用变量存起来,然后在用异步POST到服务器中在处理。

看起来貌似没有什么特别的地方,的确实在也没有什么特别的地方.......

后台处理程序PHP:

function error($msg=''){

$return = array('msg'=>$msg);

echo json_encode($return);

exit();

}

function main(){

if(!$_POST['img']){

error('请上传图片!');

}

$img = $_POST['img'];

$path = './upload/';

$type_limit = array('jpg','jpeg','png');

if(preg_match('/data:\s*image\/(\w+);base64,/iu',$img,$tmp)){

if(!in_array($tmp[1],$type_limit)){

error('图片格式不正确,只支持jpg,jpeg,png!');

}

}else{

error('抱歉!上传失败,请重新再试!');

}

$img = str_replace(' ','+',$img);

$img = str_replace($tmp[0], '', $img);

$img = base64_decode($img);

$file = $path.time().'.'.$tmp[1];

if(!file_put_contents($file,$img)){

error('上传图片失败!');

}else{

error('恭喜您!上传成功!');

}

}

main();

上述代码如果有错误欢迎指出。

如上诉代码,正如你看到的那样,经过BASE64加密过的图片码经过JS异步的POST过来后端后,我们要把代码还原。但是JS库加密的时候会带有一些标签,所以还原前需要处理掉这些本来不属于图片的东西。

$img = str_replace(' ','+',$img);

$img = str_replace($tmp[0], '', $img);

$img = base64_decode($img);

最后把代码塞进文件,设置好相应的文件名和扩展名,图片就成功上传到了服务器了。

注意:

前后端包括JS编码要要一致,建议UTF-8

如果图片还原不会来的话,那肯定是数据问题,打印POST过来的图片码出来看看。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/574586.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

白盒测试 语句覆盖、判定覆盖、条件覆盖、判定条件覆盖、条件组合覆盖、路径覆盖(转)...

转自:http://wenda.tianya.cn/wenda/thread?tid758a1e447e62b7df&hlja 白盒测试作为测试人员常用的一种测试方法,越来越受到测试工程师的重视。白盒测试并不是简单的按照代码设计用例,而是需要根据不同的测试需求,结合不同的…

matlab getsplitpic,MATLAB_9-模式识别笔记

1,识别单独字符的:思想:picsize[20,10];创建一个矩阵,将两个照片整理成大小一致的。具体就是使用后面的:aimresize(a,picsize);fontsABCDEFGHNVJXSMQ;建立字符串用于匹配输出(就是识别的功能!)下面一个for循…

浅谈android4.0开发之GridLayout布局

作者:李响 本文重点讲述了自android4.0版本号后新增的GridLayout网格布局的一些基本内容,并在此基础上实现了一个简单的计算器布局框架。通过本文,您可以了解到一些android UI开发的新特性,并可以实现相关应用。 在android4.0版本号之…

解扰matlab,数据序列扰乱与解扰MATLAB实现及性能分析—利用m序列.doc

数据序列扰乱与解扰MATLAB实现及性能分析—利用m序列《数据序列的扰乱与解扰的MATLAB实现及性能分析—利用17级m序列》 第 PAGE 1页 共20页数据序列的扰乱与解扰的MATLAB实现及性能分析—利用17级m序列学生姓名: 指导老师:摘要 本课程设计主要为了进一步…

ThinkPHP---RBAC

一、什么是RBAC 基于角色的访问控制(Role-Based Access Control)作为传统访问控制(自主访问,强制访问)的有前景的代替受到广泛的关注。 在RBAC中,权限与角色相关联,用户通过成为适当角色的成员而…

c mysql bulk,MySqlBulkLoader批量上传遇到的问题和解决方法

最近用 MySqlBulkLoader 向MySql数据库批量上传数据遇到了些问题,做下记录问题1:如图原因:版本不合,使用的MySql版本和引用的mysql.data 版本不和解决方案:用nuget将mysql.data升级到对应版本,如果是MySql8…

Nim教程【七】

这是国内第一个关于Nim的系列教程 先说废话 很开心,在今天凌晨快一点多的时候拿到了 nim-lang.com;nim-lang.cn;nim-lang.net 这三个域名,到不是为了投资,准备用nim-lang.com做一个社区出来 不知道国内有没有人或者机构…

验证必须是数字php,Element 中表单非必填数据项 必须为数字的验证问题

Element-ui 的el-form组建中,自带基本的验证功能,比如某些项必填的验证,直接加入rules 规则中即可,如下实例:在页面中书写如下:在vue 初始化data中filterForm: {firstDay: ,lastDay: },rules: {firstDay: […

为开发者准备的9个实用PHP代码片段(转)

[导读] 当你开发网站、app或博客系统时,如果有一些实用的代码片段可以直接使用,就可以节省你大量的时间和精力。这篇文章就为你分享几个实用的PHP代码片段,帮助你的Web开发。 本文由PHP100中文网编译,转载请看文末的转载要求&…

idea 自动生产序列吗,IDEA自动生成序列化Id

实体对象实现了java.io.Serializable接口后,一般都会提供一个serialVersionUID以做版本区分。在idea里,可以通过设置来快速生成serialVersionUID。设置方法1、打开Preferences–>Editor–>Inspections,然后在右侧输入UID进行搜索(搜索方…

ZH奶酪:Ionic中(弹出式窗口)的$ionicModal使用方法

Ionic中[弹出式窗口]有两种(如下图所示),$ionicModal和$ionicPopup; $ionicModal是完整的页面; $ionicPopup是(Dialog)对话框样式的,直接用JavaScript设定对话框的一些参数,通常用于通知消息、确认等作用&a…

php getdefaultvalue,PHP ReflectionParameter getDefaultValueConstantName()用法及代码示例

ReflectionParameter::getDefaultValueConstantName()函数是PHP中的内置函数,如果默认值为常数或null,则用于返回默认值的常数名称。用法:string ReflectionParameter::getDefaultValueConstantName ( void )参数:该函数不接受任何参数。返回…

php表单中姓名必须使用汉字,我想在表单验证中加入中文姓名合法性模糊匹配判断?...

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼刚开始只是想检验一下输入的是不是中文,后来学了正则表达式后,想尝试一下,把常见的姓氏通过字符串判断的形式,主要是对姓氏进行验证,当然还有输入长度,可我对自…

php实现购物车 redis,redis 哈希数据类型简单操作(实现购物车案例)

这里不累赘如何安装redis和php redis扩展,主要熟悉调用redis哈希数据类型如图简单方法操作如下1:hSet2:hGet4:hDel5:hGetAll4:hExists5:hIncrBy简单购物车实现namespaceHome\Controller;useThink\Controller;useOrg\Net\Http;useThink\Cache\Driver\Red…

写在25岁

虽然到25岁,大家会告诉你女人容颜开始衰退,要多加注意保养,要学会化妆,要会穿高跟鞋。虽然到25岁,大家告诉你要赶紧结婚生子,否则女人开始贬值。虽然到25岁,大家会告诉你工作不要那么拼&#xf…

matlab中D A1在哪,A1=d(1:15,:);A2=d(16:30,:);A3=

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼A1d(1:15,:);A2d(16:30,:);A3d(31:45,:);A4d(46:60,:);A5d(61:75,:);A6d(76:90,:);B1d(91:105,:);B2d(106:120,:);B3d(121:135,:);B4d(136:150,:);B5d(151:165,:);B6d(166:180,:);B7d(181:195,:);B8d(196:210,:);B9d(211:225,:);C1…

使用block的好处

1 使用block 可以轻松地绑定各处代码块,使用delete 结构是分散的,不利于变量之间传值,不像block可以随意地获取变量值。 2.使用block可以方便执行异步代码,作为异步处理回调。 In terms of code readability, the block makes it …

python mysql ssl,python – 在SQLAlchemy中使用SSL

我最近改变了我的项目使用SQLAlchemy并且我的项目运行正常,它使用了外部MySQL服务器.现在我正在尝试使用具有SSL CA的不同MySQL服务器,并且它不会连接.(它确实使用MySQL Workbench进行连接,因此证书应该没问题)我正在使用以下代码:ssl_args {ssl: {ca: ca_path}}en…

Easyui中使用jquery或js动态添加元素时出现的样式失效的解决方法

Easyui中使用jquery或js动态添加元素时出现的样式失效的解决方法 在添加完之后&#xff0c;可以使用 $.parser.parse();这个方法进行处理:(1) 对整个页面重新渲染: $.parser.parse();  (2) 渲染某个特定的组件:var targetObj $("<input namemydate classeasyui-date…

ftp完成版本更新php,php – 将开发团队从FTP转换为版本控制系统

问题&#xff1a;>你(他们)从来没有遇到过灾难,你(他们)需要恢复到以前版本的网站,但却不能因为他们破坏了它&#xff1f;>他们是否使用临时Web服务器来测试更改&#xff1f;>当然,如果没有某些测试,他们不会修改生产服务器中的代码&#xff1f;我怀疑第一个的答案是“…