有一款html5图片压缩的JS，支持pc，mobile（ios/android）和multiple，可在前端页面对图片进行压缩（压缩效果可达到10倍以上）。
这个html5图片的插件是从GitHub上面找到的，这是地址html5ImgCompress。引入方式及简单的使用方法在里面都有介绍，这个图片压缩插件已经在真实项目中使用过了，暂时没发现什么问题。
HTML部分(css样式这里就不放了)
<div>
<form action="upload.php" method="post" class="up_form">
<div class="m_list_wrap">
<div class="m_list clear">
<label>图片1<span></span></label>
<div class="upload_wrap relative">
<input class="upload upload1" type="file" name="up1" value="" />
<div class="phone clear">
<span>点击上传图片</span><img src="1949874599.jpg"/><i>></i>
</div>
</div>
</div>
<div class="m_list clear">
<label>图片2<span></span></label>
<div class="upload_wrap relative">
<input class="upload upload2" type="file" name="up2" value="" />
<div class="phone clear">
<span>点击上传图片</span><img src="1949874599.jpg"/><i>></i>
</div>
</div>
</div>
</div>
<input class="btn" type="button" value="提交"/>
</form>
</div>
js图片压缩部分
$('.upload').change(function() {
var othis = $(this);
var oimg = $(this).next().children('img')
var file = this.files[0];
var r = new FileReader();
r.readAsDataURL(file);
$(r).load(function() {
oimg.attr('src',this.result);
})
});
$('.upload1').change(function() {
var file = this.files[0];
new html5ImgCompress(file, {
//控制图片质量
quality:0.9,
before: function(e) {
//这里可限制图片类型，也可加上传特效
},
done: function (e, base64) {
base64.substring(2,11);
$('.upload1').next().append('<div class="pst"><input type="hidden" name="img[1]" value="'+base64+'"></div>');
},
fail: function(e) {
},
complete: function(e) {
},
notSupport: function(e) {
// alert('浏览器不支持！');
}
});
});
$('.upload2').change(function() {
var file = this.files[0];
new html5ImgCompress(file, {
//控制图片质量
quality:0.9,
before: function(e) {
//这里可限制图片类型，也可加上传特效
},
done: function (e, base64) {
base64.substring(2,11);
$('.upload2').next().append('<div class="pst"><input type="hidden" name="img[2]" value="'+base64+'"></div>');
},
fail: function(e) {
},
complete: function(e) {
},
notSupport: function(e) {
// alert('浏览器不支持！');
}
});
});
ajax上传数据部分
$('.btn').click(function(e){
if($("[name=up1]").val() == ""){
alert("请上传图片1");
$("[name=up1]").focus();
return false;
}
if($("[name=up2]").val() == ""){
alert("请上传图片2");
$("[name=up2]").focus();
return false;
}
$.ajax({
type: 'post',
url: "upload.php",
dataType: "json",
data:$('.up_form').serialize(),
success: function (data) {
if(data.code==1 || data.code==2 ){
alert(data.msg);
location.href =data.url;
}else {
alert(data.msg);
}
},
error: function (xhr, type, errorThrown) {
alert("提交失败，请检查您的网络！");
}
});
});
php代码部分
<?php
header("Content-Type:text/html;charset=utf-8");
date_default_timezone_set("PRC");
if ($_POST) {
$content = array();
$content['code'] = 0;
if (!$_POST['img'][1] || !$_POST['img'][2]) {
$content['msg'] = '存在图片尚未上传！';
echo json_encode($content);
die;
}
$imgs = $_POST['img'];
//增加判断，错误就不存放图片，占用服务器空间
foreach ($imgs as $k => $v) {
if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $v, $result)) {
//匹配成功
if (!in_array($result[2], array('jpg', 'jpeg', 'png'))) {
$content['msg'] = '图片类型不正确！';
echo json_encode($content);
die;
}
} else {
$content['msg'] = '数据格式错误！';
echo json_encode($content);
die;
}
}
foreach ($imgs as $k => $v) {
//post的数据里面，加号会被替换为空格，需要重新替换回来，如果不是post的数据，则注释掉这一行
$v = str_replace(' ', '+', $v);
$s = base64_decode(preg_replace('/data:image\/.+;base64,/', '', $v));
//目标目录
$destination_folder = './data/upload/' . date('Y-m-d') . '/';
if (!file_exists($destination_folder)) {
mkdir($destination_folder);
}
$tmp_name = sprintf('%010d', time() - 946656000) . sprintf('%03d', microtime() * 1000) . sprintf('%04d', mt_rand(0, 9999));
$imgName = $destination_folder . $tmp_name . '.jpg';
$res = file_put_contents($imgName, $s);
if ($imgName) {
switch ($k) {
case 1:
$img1 = substr($imgName, 1);;
break;
case 2:
$img2 = substr($imgName, 1);;
break;
}
}
}
/**这里可进行相关数据库操作**/
$content['msg'] = '上传成功！';
$content['code'] = 1;
echo json_encode($content);
die;
}
?>