如何有效實現前端壓縮圖片並上傳功能
隨著現在手機的像素越來越高，很多照片動輒幾兆甚至十幾兆，上傳後在服務器端壓縮已經越來越不能滿足當今的需求。這對於許多技術人員來說，處理起來這樣的問題往往不知道該怎麽下手，那麽下面就跟大家講解一下如何在前端進行圖片壓縮後上傳到服務器。
以上傳單張圖片為例，多張圖片同理，多嵌套一層循環即可。代碼實現如下：
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端文件多選，在手機端可以多次選擇上傳多張圖片的效果，現在已經理解的程序員可以嘗試一下了，如果還存在不理解的地方，可以在下方留言討論。
本文由專業的app開發公司燚軒科技整理發布，如需轉載請註明原文作者及出處!
如何有效實現前端壓縮圖片並上傳功能