php处理多图上传压缩代码功能

2023-09-11 15:00:06 136

网上看了一些资料，关于处理图片压缩的，找到的大部分是单图压缩的，要么是单前端或者后端的，所以就自己整了下前后端压缩，并支持多图的压缩图片实例。代码有点多，直接复制到编辑器看会比较清楚

1、先创建的一个简单的上传页面upload.php。先通过前端代码压缩图片，直接上代码






实名验证

/*
三个参数
file：一个是文件(类型是图片格式)，
w：一个是文件压缩的后宽度，宽度越小，字节越小
objDiv：一个是容器或者回调函数
photoCompress()
*/
functionphotoCompress(file,w,objDiv){
varready=newFileReader();
/*开始读取指定的Blob对象或File对象中的内容.当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之.同时,result属性中将包含一个data:URL格式的字符串以表示所读取文件的内容.*/
ready.readAsDataURL(file);
ready.onload=function(){
varre=this.result;
canvasDataURL(re,w,objDiv)
}
}
functioncanvasDataURL(path,obj,callback){
varimg=newImage();
img.src=path;
img.onload=function(){
varthat=this;
//默认按比例压缩
varw=that.width,
h=that.height,
scale=w/h;
w=obj.width||w;
h=obj.height||(w/scale);
varquality=0.7;//默认图片质量为0.7
//生成canvas
varcanvas=document.createElement('canvas');
varctx=canvas.getContext('2d');
//创建属性节点
varanw=document.createAttribute("width");
anw.nodeValue=w;
varanh=document.createAttribute("height");
anh.nodeValue=h;
canvas.setAttributeNode(anw);
canvas.setAttributeNode(anh);
ctx.drawImage(that,0,0,w,h);
//图像质量
if(obj.quality&&obj.quality<=1&&obj.quality>0){
quality=obj.quality;
}
//quality值越小，所绘制出的图像越模糊
varbase64=canvas.toDataURL('image/jpeg',quality);
//回调函数返回base64的值
callback(base64);
}
}
/**
*将以base64的图片url数据转换为Blob
*@paramurlData
*用url方式表示的base64图片数据
*/
functionconvertBase64UrlToBlob(urlData){
vararr=urlData.split(','),mime=arr[0].match(/:(.*?);/)[1],
bstr=atob(arr[1]),n=bstr.length,u8arr=newUint8Array(n);
while(n--){
u8arr[n]=bstr.charCodeAt(n);
}
returnnewBlob([u8arr],{type:mime});
}
varxhr;
//上传文件方法
functionuploadClick(){
document.getElementsByClassName("uploadbtn")[0].value='上传中...';
document.getElementsByClassName("uploadbtn")[0].disabled=true;
varobj=document.getElementsByClassName("myfile");
for(vari=0;i<2;i++){
UploadFile(obj[i].files[0],'file'+i);
}
}
functionUploadFile(fileObj,filed){
varshopid=document.getElementById('shopid').value;
varadminid=document.getElementById('adminid').value;
varurl="newshimingupload.php";//接收上传文件的后台地址
varform=newFormData();//FormData对象
if(fileObj.size/1024>100){//大于100k，进行压缩上传
photoCompress(fileObj,{
quality:0.2
},function(base64Codes){
//console.log("压缩后："+base.length/1024+""+base);
varbl=convertBase64UrlToBlob(base64Codes);
form.append("file",bl,"file_"+Date.parse(newDate())+".jpg");//文件对象
form.append("shopid",shopid);//文件对象
form.append("adminid",adminid);//文件对象
form.append("filed",filed);//文件对象
xhr=newXMLHttpRequest();//XMLHttpRequest对象
xhr.open("post",url,false);//post方式，url为服务器请求地址，true该参数规定请求是否异步处理。
xhr.onload=uploadComplete;//请求完成
xhr.onerror=uploadFailed;//请求失败
//xhr.upload.onprogress=progressFunction;//【上传进度调用方法实现】
xhr.upload.onloadstart=function(){//上传开始执行方法
ot=newDate().getTime();//设置上传开始时间
oloaded=0;//设置上传开始时，以上传的文件大小为0
};
xhr.send(form);//开始上传，发送form数据
});
}else{//小于等于1M原图上传
form.append("file",fileObj);//文件对象
form.append("shopid",shopid);//文件对象
form.append("adminid",adminid);//文件对象
form.append("filed",filed);//文件对象
xhr=newXMLHttpRequest();//XMLHttpRequest对象
xhr.open("post",url,false);//post方式，url为服务器请求地址，true该参数规定请求是否异步处理。
xhr.onload=uploadComplete;//请求完成
xhr.onerror=uploadFailed;//请求失败
xhr.upload.onloadstart=function(){//上传开始执行方法
ot=newDate().getTime();//设置上传开始时间
oloaded=0;//设置上传开始时，以上传的文件大小为0
};
xhr.send(form);//开始上传，发送form数据
}
}
//上传成功响应
functionuploadComplete(evt){
//服务断接收完文件返回的结果
vardata=JSON.parse(evt.target.responseText);
console.log(data);
if(data.status){
alert(data.msg);
if(data.msg=='门店照上传成功'){
window.location.href="/dd_admin/index.php";
}
}
}
//上传失败
functionuploadFailed(evt){
alert("网络不稳定，请重新上传！");
}




.main{text-align:center;padding-top:50px;}
.main.myfile{margin-bottom:15px;}


营业执照：


门店照：


"maxlength="15">
"maxlength="15">

2、前端图片压缩后，请求到自定义的接口upload_deal.php.代码如下 '', 'status'=>'error', 'img_url'=>'' ); if(!is_dir($folder)) { if(!mkdir($folder,0777,true)){ $out['msg']='图片目录创建失败！'; echojson_encode($out); exit; } } $im=$_FILES[$filename]['tmp_name'];//上传图片资源 $maxwidth="1056";//设置图片的最大宽度 $maxheight="500";//设置图片的最大高度 $imgname=$folder.$newName;//图片存放路径根据自己图片路径而定 $filetype=$_FILES[$filename]['type'];//图片类型 $result=thumbImage($im,$maxwidth,$maxheight,$imgname,$filetype); if($result){ $out['msg']='图片上传成功'; $out['status']='success'; $out['img_url']=$folder.$newName; }else{ $out['msg']='图片上传失败'; } returnjson_encode($out); exit; } //压缩图片 functionthumbImage($im,$maxwidth,$maxheight,$name,$filetype) { switch($filetype){ case'image/pjpeg': case'image/jpeg': $im=imagecreatefromjpeg($im);//PHP图片处理系统函数 break; case'image/gif': $im=imagecreatefromgif($im); break; case'image/png': $im=imagecreatefrompng($im); break; case'image/wbmp': $im=imagecreatefromwbmp($im); break; } $resizewidth_tag=$resizeheight_tag=false; $pic_width=imagesx($im); $pic_height=imagesy($im); if(($maxwidth&&$pic_width>$maxwidth)||($maxheight&&$pic_height>$maxheight)) { $resizewidth_tag=$resizeheight_tag=false; if($maxwidth&&$pic_width>$maxwidth) { $widthratio=$maxwidth/$pic_width; $resizewidth_tag=true; } if($maxheight&&$pic_height>$maxheight) { $heightratio=$maxheight/$pic_height; $resizeheight_tag=true; } if($resizewidth_tag&&$resizeheight_tag) { if($widthratio<$heightratio) $ratio=$widthratio; else $ratio=$heightratio; } if($resizewidth_tag&&!$resizeheight_tag) $ratio=$widthratio; if($resizeheight_tag&&!$resizewidth_tag) $ratio=$heightratio; $newwidth=$pic_width*$ratio; $newheight=$pic_height*$ratio; if(function_exists("imagecopyresampled")) { $newim=imagecreatetruecolor($newwidth,$newheight);//PHP图片处理系统函数 imagecopyresampled($newim,$im,0,0,0,0,$newwidth,$newheight,$pic_width,$pic_height);//PHP图片处理系统函数 } else { $newim=imagecreate($newwidth,$newheight); imagecopyresized($newim,$im,0,0,0,0,$newwidth,$newheight,$pic_width,$pic_height); } switch($filetype){ case'image/pjpeg': case'image/jpeg': $result=imagejpeg($newim,$name); break; case'image/gif': $result=imagegif($newim,$name); break; case'image/png': $result=imagepng($newim,$name); break; case'image/wbmp': $result=imagewbmp($newim,$name); break; } imagedestroy($newim); } else { switch($filetype){ case'image/pjpeg': case'image/jpeg': $result=imagejpeg($im,$name); break; case'image/gif': $result=imagegif($im,$name); break; case'image/png': $result=imagepng($im,$name); break; case'image/wbmp': $result=imagewbmp($im,$name); break; } } return$result; }

总结

以上所述是小编给大家介绍的php处理多图上传压缩代码功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！

php处理多图上传压缩代码功能

热门推荐

随机推荐