h5压缩图片上传 php_H5图片压缩上传（单图和多图）

H5项目中要用到图片上传，团队成员没有找到解决方案。只能由自己在网上搜索整理一下，如下：

直接看代码吧

Html页：

H5图片压缩上传

单图：

多图：

上传照片

$(function(){

$('#upload').on('click', function(){

$.post("u.php", { hidpic: $('#hidpic').val(),hidpics: $('#hidpics').val() }, function(data){

alert("Data Loaded: " + data);

});

});

//单图

$('.jsImg').on('change', function(e){

console.log(this.files[0]);

setFilesReader(this.files[0], 0);

});

//多图

$('.jsImgs').on('change', function(e){

console.log(this.files[0]);

for (var i = 0; i < this.files.length; i++) {

setFilesReader(this.files[i], 1);

}

});

})

function setFilesReader(file, ismul) {

var reader = new window.FileReader();

reader.onload = function(e) {

compress(this.result, fileSize, ismul);

}

reader.readAsDataURL(file);

//console.log(this.files[0]);

var fileSize = Math.round(file.size/1024/1024)

}

//οnchange="readMultiFiles(this.files)"

function readMultiFiles(files) {

for (var i = 0; i < files.length; i++) {

setFilesReader(files[i]);

}

}

//res代表上传的图片，fileSize大小图片的大小

function compress(res, fileSize, ismul) {

var img = new Image(), maxW = 640; //设置最大宽度

img.onload = function () {

var cvs = document.createElement('canvas'), ctx = cvs.getContext('2d');

if(img.width > maxW) {

img.height *= maxW / img.width;

img.width = maxW;

}

cvs.width = img.width;

cvs.height = img.height;

ctx.clearRect(0, 0, cvs.width, cvs.height);

ctx.drawImage(img, 0, 0, img.width, img.height);

var compressRate = getCompressRate(1,fileSize);

var dataUrl = cvs.toDataURL('image/jpeg', compressRate);

//document.body.appendChild(cvs);

//console.log(ismul);

if (ismul == 0) {

$('#hidpic').val(dataUrl);

} else if (ismul == 1) {

$('#hidpics').val($('#hidpics').val()+'||'+dataUrl);

}

}

img.src = res;

}

//计算压缩比率，size单位为MB

function getCompressRate(allowMaxSize,fileSize){

var compressRate = 1;

if(fileSize/allowMaxSize > 4){

compressRate = 0.5;

} else if(fileSize/allowMaxSize >3){

compressRate = 0.6;

} else if(fileSize/allowMaxSize >2){

compressRate = 0.7;

} else if(fileSize > allowMaxSize){

compressRate = 0.8;

} else{

compressRate = 0.9;

}

return compressRate;

}

后端用PHP:

//单图

$base64 = trim($_POST['hidpic']);

$url = explode(',', $base64);

file_put_contents('./test-s.jpg', base64_decode($url[1]));//返回的是字节数

//多图

$base64 = trim($_POST['hidpics'], '||');

$urlArr = explode('||', $base64);

$i = 0;

foreach ($urlArr as $url) {

$url = explode(',', $url);

$a = file_put_contents('./test'.$i.'.jpg', base64_decode($url[1]));//返回的是字节数

$i++;

}

print_r('upload ok');

?>