Jquery+HTML5+PHP实现前台压缩图片并上传办法之2

先上图吧：

待上传

上传后

功能描述：

使用HTML5在前台进行图片压缩，然后上传至服务器上由PHP保存。此插件只适用于PC端，未做手机端页面优化，如果需要应用在手机端请自行优化UI，即然是PC端为什么还要前端压缩呢？PC端很容易使用图片处理软件进行压缩，那是适用于有会PS，会光影魔术手的人。但还有很多小白，他们就是简单的拿手机或相机拍了照就是要上传的，他样不想或不会或工作流程问题无法处理图片。好了，废话不说上代码。

PHP端代码

<?php
//接收base64格式图片
$postIMG = $_POST['image'];
$fileName = date('YmdHis') .'-'. mt_rand(100,999);
$imgPath = './uploads/'. $fileName . '.jpg';
$data = base64_decode($postIMG);
$fp = fopen($imgPath,'w');
fwrite($fp,$data);
fclose($fp);
$info = '上传成功';
$status ='1';
$url = '/js_upload/uploads/'.$fileName . '.jpg'; //请根据你的实际情况设置返回的路径
$return = array('info'=>$info,'status'=>$status,'url'=>$url);
echo json_encode($return);
JavaScript核心代码：部分代码来自网上
/**
H5u Html5客户端压缩图处并上传，服务端php接收base64编码图片并保存
*/
(function($){
$.fn.extend({
aiiUpload:function(obj)
{
if(typeof obj !="object")
{
alert('参数错误');
return;
}
var imageWidth,imageHeight;
var base64;
var file_num=0;
var fileInput=$(this);
var fileInputId=fileInput.attr('id');
var randID = Math.floor(Math.random()*1000); //随机ID
createDoc('#'+fileInputId,obj.method,obj.action,obj.subText,randID,obj.formIdName);
$('#h5u_file_'+ randID).change(function(){
if(test(this.value)==false)
{
alert('格式错误');
return;
}
var objUrl = getObjectURL(this.files[0]);
if (objUrl)
{
//imgBefore(objUrl,file_num);
render(objUrl,obj.max_w,obj.max_h,file_num,randID,obj.action);
file_num++;
}
});
}
});
//创建form表单
function createDoc(objID,form_method,form_action,sub_txt,rand_id,form_id_name)
{
var element=$(objID);
//element.append('<ul class="viewList"></ul>').append('<div class="fileBox"><input type="file" id="aii_file" /><div class="file_bg"></div></div>').append('<form id="aii_upload_form" method="'+form_method+'" action="'+form_action+'"></form>').append('<canvas id="canvas"></canvas>');
var str = '<div class="upbox3"><canvas id="canvas_'+ rand_id +'"></canvas><div class="options hide" id="h5u_options_'+ rand_id +'"><a class="btn-del" id="h5u_del_'+ rand_id +'">删除</a><a class="btn-big" id="h5u_big_'+ rand_id +'">放大</a></div><img src="" id="h5u_preview_'+ rand_id +'"/><div class="js-upbtn" id="h5u_upbtn_'+ rand_id +'"><a href="javascript:;" class="h5u_file"><input type="file" class="up_file3" id="h5u_file_'+ rand_id +'" accept="image/*">+上传附件</a><p class="a-behind">'+ sub_txt +'</p></div><input type="hidden" name="'+ form_id_name +'" id="h5u_form_hidden_'+ rand_id +'" ><div class="status hide" id="h5u_status_'+ rand_id +'"></div></div>';
element.append(str);
//放大
$("#h5u_big_"+ rand_id).click(function(){
alert('big'+ rand_id)
});
//删除1.img.src = '', 2.hidden.val = '',3.show upbtn,hide options,4. status.hide
$("#h5u_del_"+ rand_id).click(function(){
$("#h5u_preview_"+ rand_id).attr('src','');
$("#h5u_form_hidden_"+ rand_id).val('');
$("#h5u_options_"+ rand_id).hide();
$("#h5u_upbtn_"+rand_id).show();
$("#h5u_status_"+ rand_id).hide();
});
}
//检查文件类是否是图片格式
function test(value)
{
var regexp=new RegExp("(.JPEG|.jpeg|.JPG|.jpg|.GIF|.gif|.BMP|.bmp|.PNG|.png)$",'g');
return regexp.test(value);
}
function render(src,MaximgW,MaximgH,idnum,rand_id,action)
{
console.log('rand_id',rand_id);
var image=new Image();
image.οnlοad=function()
{
//如果图片的尺寸小于定义的最大宽和高，则以图片原始尺寸为准
var canvas=document.getElementById('canvas_'+ rand_id);
var previewIMG = document.getElementById('h5u_preview_'+ rand_id);
//预览图片
previewIMG.src = src;
if(image.width < MaximgW && image.height < MaximgH){
imageWidth = image.width;
imageHeight = image.height;
}else{
if(image.width>image.height)
{
imageWidth=MaximgW;
imageHeight=MaximgW*(image.height/image.width);
}
else if(image.width<image.height)
{
imageHeight=MaximgH;
imageWidth=MaximgH*(image.width/image.height);
}
else
{
imageWidth=MaximgW;
imageHeight=MaximgH;
}
}
canvas.width=imageWidth;
canvas.height=imageHeight;
var con=canvas.getContext('2d');
con.clearRect(0,0,canvas.width,canvas.height);
con.drawImage(image,0,0,imageWidth,imageHeight);
base64=canvas.toDataURL('image/jpeg',0.5).substr(22);
//add_doc(base64,idnum);
//上传图片
upload_base(base64,action,rand_id);
}
image.src=src;
};
//建立一個可存取到該file的url
function getObjectURL(file) {
var url = null ;
if (window.createObjectURL!=undefined) { // basic
url = window.createObjectURL(file) ;
} else if (window.URL!=undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file) ;
} else if (window.webkitURL!=undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file) ;
}
return url ;
}
//预览
function imgBefore(objUrl,idnum)
{
var li='<li class="view"><img src="'+objUrl+'" id="aiiImg_'+idnum+'" idnum="'+idnum+'" /><div class="close" οnclick="img_remove(this);"></div></li>'
$('.viewList').append(li);
var img=$('#aiiImg_'+idnum);
//预览图片居中 填满 代码
//console.log('asdfasdfasdf');
img.load(function(){
var imgw=img.width(),
imgh=img.height();
console.log(imgw);
console.log(imgh);
if(imgw>imgh)
{
img.css('height','100%');
img.css('width','auto');
img.css('marginLeft',-(img.width()-img.height())/2+'px');
}
else if(imgw<imgh)
{
img.css('width','100%');
img.css('height','auto');
img.css('marginTop',-(img.height()-img.width())/2+'px');
}
});
}
//上传图片
function upload_base(base,action,rand_id){
//隐藏上传控件按钮
$('#h5u_status_'+ rand_id).html('准备上传').addClass('normal');
$.post(action,{image:base},function(json){
console.log(json);
if(json.status == 1){
$("#h5u_form_hidden_"+ rand_id).val(json.url); //表单
$('#h5u_upbtn_'+ rand_id).hide();
$('#h5u_options_'+ rand_id).show();
$('#h5u_status_'+ rand_id).html('上传成功').addClass('success').removeClass('normal').show();
}else{
$('#h5u_status_'+ rand_id).html(json.info).addClass('error').removeClass('normal').show();
}
},'json');
}
function add_doc (base,idnum)
{
$('#aii_upload_form').append('<input type="hidden" name="img[]" id="f_'+idnum+'" value="'+base+'"/>');
}
})(jQuery);
function img_remove(element)
{
var num=$(element).prev().attr('idnum');
$(element).parent().remove();
$('#f_'+num).remove();
console.log('asdf');
}

HTML调用代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Jquery + html 5 + canvas实现图片上传</title>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="js/h5Upload.js"></script>
<link rel="stylesheet" type="text/css" href="js/h5Upload.css">
</head>

<body>
<!--
<div class="upbox3">
<div class="options">
<a class="btn-del">删除</a>
<a class="btn-big">放大</a>
</div>
<img src="https://img.alicdn.com/imgextra/i1/2454021808/TB2IPQAXeYCK1JjSZFmXXbCyVXa_!!2454021808-0-beehive-scenes.jpg_180x180q90.jpg_.webp" />
<a href="javascript:;" class="h5u_file">
<input type="file" accept="image/*">+上传附件
</a>
<p class="a-behind">单位证件</p>
</div>

-->
<style>
.section{height:200px;}
</style>
<section class="section">
<div id="box"></div>
</section>

<div class="content">
<h2>营业执照</h2>
<div id="box2"></div>
</div>
<script type="text/javascript">
$('#box').aiiUpload({
action:'upload.php',
max_w:800,
max_h:1000,
subText:'单位证件',
formIdName:'id_card', //表字段名称
//fileText:'选择图片'
});

$('#box2').aiiUpload({
action:'upload.php', //后台接收图片地址
max_w:800, //压缩图片的最大宽度，低于此宽度不会被压缩
max_h:1000, //压缩图片的最大高度，低于此高度的图片不会被压缩
subText:'营业执照', //上传控件上显示的上传标签名称
formIdName:'id_card2', //表字段名称
//fileText:'选择图片'
});
</script>
</body>
</html>