Backend Development
PHP Tutorial
How to use php to handle the compression function of multiple image uploads
How to use php to handle the compression function of multiple image uploads
This article mainly introduces the function of php processing multi-image upload compression code. It is very good and has certain reference value. Friends who need it can refer to it
I read some information online about processing image compression , most of the ones I found were single-image compression, either single front-end or back-end, so I adjusted the front-end and front-end compression myself, and supported multi-image compressed image instances. There is a lot of code, it will be clearer if you copy it directly to the editor
1. First create a simple upload page upload.php. First compress the image through the front-end code, and directly upload the code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
<title>实名验证</title>
<script type="text/javascript">
/*
三个参数
file：一个是文件(类型是图片格式)，
w：一个是文件压缩的后宽度，宽度越小，字节越小
objp：一个是容器或者回调函数
photoCompress()
*/
function photoCompress(file,w,objp){
var ready=new FileReader();
/*开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之.同时,result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容.*/
ready.readAsDataURL(file);
ready.onload=function(){
var re=this.result;
canvasDataURL(re,w,objp)
}
}
function canvasDataURL(path, obj, callback){
var img = new Image();
img.src = path;
img.onload = function(){
var that = this;
// 默认按比例压缩
var w = that.width,
h = that.height,
scale = w / h;
w = obj.width || w;
h = obj.height || (w / scale);
var quality = 0.7; // 默认图片质量为0.7
//生成canvas
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
// 创建属性节点
var anw = document.createAttribute("width");
anw.nodeValue = w;
var anh = 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值越小，所绘制出的图像越模糊
var base64 = canvas.toDataURL('image/jpeg', quality);
// 回调函数返回base64的值
callback(base64);
}
}
/**
* 将以base64的图片url数据转换为Blob
* @param urlData
* 用url方式表示的base64图片数据
*/
function convertBase64UrlToBlob(urlData){
var arr = urlData.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while(n--){
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], {type:mime});
}
var xhr;
//上传文件方法
function uploadClick() {
document.getElementsByClassName("uploadbtn")[0].value = '上传中...';
document.getElementsByClassName("uploadbtn")[0].disabled=true;
var obj = document.getElementsByClassName("myfile");
for(var i=0;i<2;i++){
UploadFile(obj[i].files[0],'file'+i);
}
}
function UploadFile(fileObj,filed){
var shopid = document.getElementById('shopid').value;
var adminid = document.getElementById('adminid').value;
var url = "newshimingupload.php"; // 接收上传文件的后台地址
var form = new FormData(); // FormData 对象
if(fileObj.size/1024 > 100) { //大于100k，进行压缩上传
photoCompress(fileObj, {
quality: 0.2
}, function(base64Codes){
//console.log("压缩后：" + base.length / 1024 + " " + base);
var bl = convertBase64UrlToBlob(base64Codes);
form.append("file", bl, "file_"+Date.parse(new Date())+".jpg"); // 文件对象
form.append("shopid", shopid); // 文件对象
form.append("adminid", adminid); // 文件对象
form.append("filed", filed); // 文件对象
xhr = new XMLHttpRequest(); // XMLHttpRequest 对象
xhr.open("post", url, false); //post方式，url为服务器请求地址，true 该参数规定请求是否异步处理。
xhr.onload = uploadComplete; //请求完成
xhr.onerror = uploadFailed; //请求失败
// xhr.upload.onprogress = progressFunction;//【上传进度调用方法实现】
xhr.upload.onloadstart = function(){//上传开始执行方法
ot = new Date().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 = new XMLHttpRequest(); // XMLHttpRequest 对象
xhr.open("post", url, false); //post方式，url为服务器请求地址，true 该参数规定请求是否异步处理。
xhr.onload = uploadComplete; //请求完成
xhr.onerror = uploadFailed; //请求失败
xhr.upload.onloadstart = function(){//上传开始执行方法
ot = new Date().getTime(); //设置上传开始时间
oloaded = 0;//设置上传开始时，以上传的文件大小为0
};
xhr.send(form); //开始上传，发送form数据
}
}
//上传成功响应
function uploadComplete(evt) {
//服务断接收完文件返回的结果
var data = JSON.parse(evt.target.responseText);
console.log(data);
if(data.status){
alert(data.msg);
if(data.msg == '门店照上传成功'){
window.location.href = "/dd_admin/index.php";
}
}
}
//上传失败
function uploadFailed(evt) {
alert("网络不稳定，请重新上传！");
}
</script>
</head>
<body>
<style type="text/css">
.main{text-align: center;padding-top: 50px;}
.main .myfile{margin-bottom: 15px;}
</style>
<p class="main">
营业执照：
<input type="file" class="myfile" id="file1" name="file1" accept="image/x-png, image/jpg, image/jpeg, image/gif"/><br>
门店照：
<input type="file" class="myfile" id="file2" name="file2" accept="image/x-png, image/jpg, image/jpeg, image/gif"/><br>
<input type="hidden" id="shopid" name="shopid" value="<?php echo $_GET['shopid']; ?>" maxlength="15">
<input type="hidden" id="adminid" name="adminid" value="<?php echo $_GET['adminid']; ?>" maxlength="15">
<input style="margin-top: 25px;" class="uploadbtn" type="button" onclick="uploadClick()" value="上传" /><br>
</p>
</body>
</html>
2、前端图片压缩后，请求到自定义的接口upload_deal.php.代码如下
<?php
require_once('public_func.php');
actionUpload('uploads/','file'); //参数分别代表图片存储的路径和上传的文件名
}
3、在第二部引入public_func.php,这块代码主要是对后端处理图片压缩
function actionUpload($path = '/uploads/',$filename='myFile')
{
// $path = 'uploads/'; //图片存放根目录 根据自己项目路径而定
$file = $_FILES[$filename]['name'];
$folder = $path.date('Ymd')."/";
$pre = rand(999,9999).time();
$ext = strrchr($file,'.');
$newName = $pre.$ext;
$out = array(
'msg'=>'',
'status'=>'error',
'img_url'=>''
);
if(!is_dir($folder))
{
if(!mkdir($folder, 0777, true)){
$out['msg'] = '图片目录创建失败！';
echo json_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'] = '图片上传失败';
}
return json_encode($out);
exit;
}
//压缩图片
function thumbImage($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;
}. The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please Follow PHP Chinese website!
Related recommendations:
How to generate promotional posters with PHP
##Use PHP to achieve the function of top articles
Code for exporting data and pictures using PHPEXCEL
The above is the detailed content of How to use php to handle the compression function of multiple image uploads. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Alipay PHP SDK transfer error: How to solve the problem of 'Cannot declare class SignData'?
Apr 01, 2025 am 07:21 AM
Alipay PHP...
Explain JSON Web Tokens (JWT) and their use case in PHP APIs.
Apr 05, 2025 am 12:04 AM
JWT is an open standard based on JSON, used to securely transmit information between parties, mainly for identity authentication and information exchange. 1. JWT consists of three parts: Header, Payload and Signature. 2. The working principle of JWT includes three steps: generating JWT, verifying JWT and parsing Payload. 3. When using JWT for authentication in PHP, JWT can be generated and verified, and user role and permission information can be included in advanced usage. 4. Common errors include signature verification failure, token expiration, and payload oversized. Debugging skills include using debugging tools and logging. 5. Performance optimization and best practices include using appropriate signature algorithms, setting validity periods reasonably,
How does session hijacking work and how can you mitigate it in PHP?
Apr 06, 2025 am 12:02 AM
Session hijacking can be achieved through the following steps: 1. Obtain the session ID, 2. Use the session ID, 3. Keep the session active. The methods to prevent session hijacking in PHP include: 1. Use the session_regenerate_id() function to regenerate the session ID, 2. Store session data through the database, 3. Ensure that all session data is transmitted through HTTPS.
Describe the SOLID principles and how they apply to PHP development.
Apr 03, 2025 am 12:04 AM
The application of SOLID principle in PHP development includes: 1. Single responsibility principle (SRP): Each class is responsible for only one function. 2. Open and close principle (OCP): Changes are achieved through extension rather than modification. 3. Lisch's Substitution Principle (LSP): Subclasses can replace base classes without affecting program accuracy. 4. Interface isolation principle (ISP): Use fine-grained interfaces to avoid dependencies and unused methods. 5. Dependency inversion principle (DIP): High and low-level modules rely on abstraction and are implemented through dependency injection.
How to debug CLI mode in PHPStorm?
Apr 01, 2025 pm 02:57 PM
How to debug CLI mode in PHPStorm? When developing with PHPStorm, sometimes we need to debug PHP in command line interface (CLI) mode...
Framework Security Features: Protecting against vulnerabilities.
Mar 28, 2025 pm 05:11 PM
Article discusses essential security features in frameworks to protect against vulnerabilities, including input validation, authentication, and regular updates.
How to automatically set permissions of unixsocket after system restart?
Mar 31, 2025 pm 11:54 PM
How to automatically set the permissions of unixsocket after the system restarts. Every time the system restarts, we need to execute the following command to modify the permissions of unixsocket: sudo...
Explain late static binding in PHP (static::).
Apr 03, 2025 am 12:04 AM
Static binding (static::) implements late static binding (LSB) in PHP, allowing calling classes to be referenced in static contexts rather than defining classes. 1) The parsing process is performed at runtime, 2) Look up the call class in the inheritance relationship, 3) It may bring performance overhead.
