[闲聊畅谈] html5图片压缩完整实例移动+PC端 [复制链接]
查看:3921 | 回复:16

qqsweb · 发表于 2017-8-24 11:21:14

本帖最后由 qqsweb 于 2017-8-24 11:22 编辑

手机动不动就几M的图片不压缩上传就傻眼了~

最近项目有需求就发出来了应该很多人都会用到

<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1,user-scalable=no">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no">
<meta name="x5-fullscreen" content="true">
<meta charset="UTF-8">
<title>头像更新</title>
</head>
<style>
body {
margin: 20px 20%;
color:#777;
text-align: center;
}
img{max-width:100%;}
</style>
<body>
<h1 class="text-center">更新头像</h1>
<hr/>
<div style="background:url(images/upload-add.png) no-repeat ">
<input type="file" capture="camera" accept="image/*" name="logo" id="file" class="selectinput" style="width:100%;opacity:.01;height: 80px;">
</div>
<!--
<input type="file" />
-->
<hr/>
<div class="imglook">默认头像</div>
<!-- javascript
================================================== -->
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/localresizeimg.js" type="text/javascript"></script>
<script src="js/mobilebugfix.mini.js" type="text/javascript"></script>
<script type="text/javascript">
$('input:file').localResizeIMG({
width: 300,
quality: 0.8,
success: function (result) {
var img = new Image();
img.src = result.base64;
$('div.imglook').empty();//清除之前的预览图
$('div.imglook').append(img);
//图片预览
// $('body.img').empty();
//html()替换元素
uploadPic(img.src);
// console.log(result);
}
});
function uploadPic(formData) {
var oReq = new XMLHttpRequest();
oReq.open("POST", "upload.php", true);
oReq.onload = function (oEvent) {
if (oReq.status == 200) {
alert(oReq.response);
} else {
//oOutput.innerHTML = "Error " + oReq.status + " occurred uploading your file.<br \/>";
alert(oReq.status);
}
};
oReq.send(formData);
}
</script>
</body>
</html>

复制代码

upload.php
后台接收

$base64_image_content = file_get_contents('php://input');
if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $base64_image_content, $result)){
$type = $result[2]; //jpeg
$img = base64_decode(str_replace($result[1], '', $base64_image_content)); //返回文件流
}
$tmp_file = time().'.'.$type;
file_put_contents($tmp_file, $img);
echo '您的头像已经更新成功';

复制代码

完整源码
效果演示：
http://www.s575.com/demo/84/

yuewolf · 发表于 2017-8-24 11:46:23

赞一个，收藏了。

sunshow · 发表于 2017-8-24 11:48:24

奶斯！后期会有这个需求

koko99 · 发表于 2017-8-24 11:48:43

1024

ghp18 · 发表于 2017-8-24 11:50:30

手机图片压缩是非常重要的一环

ytomorrow · 发表于 2017-8-24 13:22:41

等会用电脑下载个看看

iceteaa · 发表于 2017-8-24 13:59:56

注意防范上传漏洞

衣郎 · 发表于 2017-8-24 15:26:40

现在的手机慢慢的不限流量了，几M又怎么样，不要紧

ts99 · 发表于 2017-8-24 16:19:53

看起来还是蛮不错的啊！

soguo · 发表于 2017-8-24 16:22:17

暂时用不到，谢谢分享

百独托管7500 紫田网络	超高转化播放器收cps[推荐]	速盾CDN 免实名免备防屏蔽	阿里云爆款特卖9.9元封顶	提升alexa、IP流量7Q5团队
【腾讯云】中小企福利专场	【腾讯云】多款产品1折起	高防随时退换好耶数据	小飞国外网赚带你月入万元	炎黄网络4H4G10M 99每月
香港带宽CN2/美国站群优惠	中客数据中心服务器租用	联盟系统移动广告平台中易	企业专场腾讯云服务器2.5折	九九数据工信部正规资质
腾讯云新用户大礼包代金券	高价收cpa注册量高价展示	【腾讯云】2核2G/9.93起	租服务器找45互联随时退换	阿里云短信服务验证秒达

[闲聊畅谈] html5图片压缩完整实例移动+PC端 [复制链接]
查看:3921 | 回复:16

本帖子中包含更多资源

评分

落伍手机绑定

QQ绑定

落伍者

落伍微信绑定

[闲聊畅谈] html5图片压缩 完整实例 移动+PC端 [复制链接] 查看:3921 | 回复:16

本帖子中包含更多资源

评分

落伍手机绑定

QQ绑定

落伍者

落伍微信绑定

[闲聊畅谈] html5图片压缩完整实例移动+PC端 [复制链接]
查看:3921 | 回复:16