如何有效實現壓縮圖片并上傳功能

圖片壓縮

2018-04-09

6735

隨著現在手機的像素越來越高，很多照片動輒幾兆甚至十幾兆，上傳后在服務器端壓縮已經越來越不能滿足當今的需求。這對于許多技術人員來說，處理起來這樣的問題往往不知道該怎么下手，那么專業的app開發報價燚軒科技下面就跟大家講解一下如何在前端進行圖片壓縮后上傳到服務器。

以上傳單張圖片為例，多張圖片同理，多嵌套一層循環即可。代碼實現如下：

html:

<!DOCTYPE html>

<html>

<head>

<title>圖片壓縮上傳</title>

</head>

<body>

<form>

<h3>后臺獲取base64文件數據：(一個隱藏域)</h3>

<h3>壓縮前預覽：</h3>

<h3>壓縮后預覽：</h3>

</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端文件多選，在手機端可以多次選擇上傳多張圖片的效果，現在已經理解的程序員可以嘗試一下了，如果還存在不理解的地方，可以留言討論。

weixin sina tQQ qZone douban baidutb

分享到微信朋友圈 +

打開微信，點擊底部的“發現”，使用 “掃一掃” 即可將網頁分享到我的朋友圈。如何使用？

上一篇：HTML編程之頁面放大鏡功能的
下一篇：百度地圖API快速調用，一鍵生

推薦文章

s="MsoNormal"> ...

s="MsoNormal"> ...

亮度蒙版是影調調整的基石。它提供了一個簡便的方法來選取圖...

燚軒科技 · 11月15日 · 質感效果/PS通道

6258 閱讀量

網站優化之Alt標簽如何使用

s="p"> <span...

燚軒科技 · 11月16日 · Alt標簽/網站優化

5753 閱讀量

ps技巧學習之常用8種摳圖方法

目前大家經常會遇到摳圖的問題，最多的就是摳人體、頭發，摳...

燚軒科技 · 10月31日 · 摳圖/ps技巧

6486 閱讀量

九草国产精品|极品熟妇喷水在线播放|亚洲无码卡通动漫亚洲一区|v视界制服诱惑一区三区

如何有效實現壓縮圖片并上傳功能

熱貼More +

服務范圍More +

聯系我們