图片压缩
2018-04-09
7293
随着现在手机的像素越来越高，很多照片动辄几兆甚至十几兆，上传后在服务器端压缩已经越来越不能满足当今的需求。这对于许多技术人员来说，处理起来这样的问题往往不知道该怎么下手，那么专业的app开发报价燚轩科技下面就跟大家讲解一下如何在前端进行图片压缩后上传到服务器。
以上传单张图片为例，多张图片同理，多嵌套一层循环即可。代码实现如下：
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>图片压缩上传</title>
<link href="css/uploadSingleImg.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link href="css/style.css" rel="stylesheet"><!--自己书写input样式-->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/tools.js"></script>
<script type="text/javascript" src="js/pictureHandle.js"></script>
</head>
<body>
<form>
<!--文件选择input-->
<h3>文件选择：</h3>
<input class="btn btn-default" type="file" id="upFile" multiple="multiple" />
<h3>传给后台</h3>
<input class="btn btn-default" type="button" id="upTo" value="提交"/>
<!--后台所要获取的文件base64-->
<h3>后台获取base64文件数据：(一个隐藏域)</h3>
<input id="imgOne" name="imgOne" type="hidden"/>
<!--所选文件压缩前预览-->
<h3>压缩前预览：</h3>
<img src="" id="preview"/>
<div id="yulan1"></div>
<!--所选文件压缩后预览-->
<h3>压缩后预览：</h3>
<img src="" id="nextview"/>
<div id="yulan"></div>
</form>
</body>
</html>
Js:
$(function(){
var _upFile=document.getElementById("upFile");
_upFile.addEventListener("change",function(){
if (_upFile.files.length === 0) {
alert("请选择图片");
return; }
for(var i=0;i<_upFile.files.length;i++){
var oFile = _upFile.files[i];
if(!new RegExp("(jpg|jpeg|png)+","gi").test(oFile.type)){
alert("照片上传：文件类型必须是JPG、JPEG、PNG");
return;
}
var reader = new FileReader();
reader.onload = function(e) {
var base64Img= e.target.result;
//压缩前预览
//$("#preview").attr("src",base64Img);
var str1 = '<img src="'+base64Img+'">';
$('#yulan1').append(str1);
//--执行resize。
var _ir=ImageResizer({
resizeMode:"auto"
,dataSource:base64Img
,dataSourceType:"base64"
,maxWidth:1200 //允许的最大宽度
,maxHeight:600 //允许的最大高度。
,onTmpImgGenerate:function(img){
}
,success:function(resizeImgBase64,canvas){
//压缩后预览
//$("#nextview").attr("src",resizeImgBase64);
var str = '<img src="'+resizeImgBase64+'">';
$('#yulan').append(str);
//赋值到隐藏域传给后台
$('#imgOne').val($('#imgOne').val()+';'+resizeImgBase64.substr(22));
}
,debug:true
});
};
reader.readAsDataURL(oFile);
}
},false);
$('#upTo').on('click',function(){
if (_upFile.files.length === 0) {
alert("请选择图片");
return; }
$.ajax({
url:'server.php',
type:'POST',
dataType:'json',
data:{
imgOne:$('#imgOne').val()
},
success:function(data){
alert(data.msg);
}
});
});
});
php处理：
<?php
$img=trim($_POST['imgOne'],';');
$imgarr=explode(';', $img);
foreach($imgarr as $k=>$v){
//解码
$tmp = base64_decode($v);
//写文件
$filename=time().$k.'.jpg';
$path='./upload/';
file_put_contents($path.$filename, $tmp);
}
$res['msg']='上传成功！';
echo json_encode($res);
该方法实现了PC端文件多选，在手机端可以多次选择上传多张图片的效果，现在已经理解的程序员可以尝试一下了，如果还存在不理解的地方，可以留言讨论。
s="MsoNormal"> ...
燚轩科技 ·
09月18日
· 域名备案
s="MsoNormal"> ...
燚轩科技 ·
09月18日
· 域名申请
亮度蒙版是影调调整的基石。它提供了一个简便的方法来选取图...
燚轩科技 ·
11月15日
· 质感效果/PS通道
s="p"> <span...
燚轩科技 ·
11月16日
· Alt标签/网站优化
目前大家经常会遇到抠图的问题，最多的就是抠人体、头发，抠...
燚轩科技 ·
10月31日
· 抠图/ps技巧
首页
方案
资讯
知库
