首頁
方案
資(zī)訊
知(zhī)庫
185-3825-9583
185-3825-9583
圖片壓縮
2018-04-09
5178
随着現在手機的像素越來越高，很多照片動辄幾兆甚至十幾兆，上傳後在服務器端壓縮已經越來越不能滿足當今的需求。這對于許多技術人員(yuán)來說，處理起來這樣的問題往往不知(zhī)道該怎麽下(xià)手，那麽專業的app開(kāi)發報價燚軒科技下(xià)面就跟大(dà)家講解一(yī)下(xià)如何在前端進行圖片壓縮後上傳到服務器。
以上傳單張圖片爲例，多張圖片同理，多嵌套一(yī)層循環即可。代碼實現如下(xià)：
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"><!--自己書(shū)寫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文件數據：(一(yī)個隐藏域)</h3>
<input id="imgOne" name="imgOne" type="hidden"/>
<!--所選文件壓縮前預覽-->
<h3>壓縮前預覽：</h3>
<img src="static/picture/beijs.png" id="preview"/>
<div id="yulan1"></div>
<!--所選文件壓縮後預覽-->
<h3>壓縮後預覽：</h3>
<img src="static/picture/beijs.png" 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 //允許的最大(dà)寬度
,maxHeight:600 //允許的最大(dà)高度。
,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端文件多選，在手機端可以多次選擇上傳多張圖片的效果，現在已經理解的程序員(yuán)可以嘗試一(yī)下(xià)了，如果還存在不理解的地方，可以留言讨論。
s="MsoNormal"> ...
燚軒科技 ·
09月18日
· 域名備案
s="MsoNormal"> ...
燚軒科技 ·
09月18日
· 域名申請
亮度蒙版是影調調整的基石。它提供了一(yī)個簡便的方法來選取圖...
燚軒科技 ·
11月15日
· 質感效果/PS通道
s="p"> <span...
燚軒科技 ·
11月16日
· Alt标簽/網站優化
目前大(dà)家經常會遇到摳圖的問題，最多的就是摳人體(tǐ)、頭發，摳...
燚軒科技 ·
10月31日
· 摳圖/ps技巧
請掃二維碼聯系客服
854221200@qq.com
185-3825-9583
QQ客服
