javascript原生态xhr上传多个图片，可预览和修改上传图片为固定尺寸比例，防恶意代码，加后端php处理图片

2023-10-28 14:15
文章标签 java php 图片 script 处理 多个 修改 预览 上传 固定 尺寸 比例 xhr 恶意代码 加后 原生态

本文主要是介绍javascript原生态xhr上传多个图片，可预览和修改上传图片为固定尺寸比例，防恶意代码，加后端php处理图片，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

//前端上传文件

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="UTF-8"></html>
<html><head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8;"/><title>做上传文件测试用</title><script type="text/javascript" src="common.js"></script><style type="text/css">.button{margin-right: 20px;}#preview {display: flex;flex-wrap: wrap;width: 800px;padding: 10px;justify-content: start;}.icon-po {overflow: hidden;position: relative;width: 300px;height: 300px;margin-right: 20px;margin-top: 20px;}.icon-close {position: absolute;right: 5%;top: 5%;width: 30px;border-radius: 50%;background-color: red;color: #fff;font-size: 12px;display: flex;align-items: center;justify-content: center;}.pic {width:300px;height:300px;}</style></head><body>选择文件(可多选)：<input type="file" id="f1" multiple/><button type="button" class="button" id="btn-submit">预览图片</button><button type="button" id="complate">上传图片</button><div id="preview"></div><br/><script type="text/javascript">var fL=[];//处理传过来的$_FIELS文件函数function previewUpdate(upfiles){//设置预览中添加的div1元素显示在前的顺序var e=0;//获取到预览容器preivewvar preview=document.getElementById("preview");//如果$_FIELS大于0表示有文件过来if(upfiles.length>0){for(var i=0,len=upfiles.length;i<len;i++){//检测$_FILES的类型是否为图片if(!/image\/(jpe?g|png|gif)/i.test(upfiles[i].type)){//如果不是则弹出文件名字提示alert(upfiles[i].name+'不是图片');}else{//检测上传文件的大小是否小于1Mif(upfiles[i].size<1024*1000){//将上传的图片压入数组fLfL.push(upfiles[i]);}else{alert('图片过大,请上传小于1M的图片');}}}//循环出fL数组中的图片文件fL.forEach(function(item,index,array){//创建filereader()异步读取文件var reader=new FileReader();//创建预览容器div1和关闭按钮div2var div1=document.createElement("div");var div2=document.createElement("div");//设置他们两的class类名，方便设置样式div1.className="icon-po";div2.className="icon-close";//为div2设置关闭按钮文字Xdiv2.innerHTML='X';//设置div1\div2显示的前后顺序div1.index=div2.index=e;//如果是多图为后面的图片准备顺序数字e++;//异步加载完成后添加图片对象和设置src的url   reader.onload=function(event){var img=new Image();//设置图片样式img.className="pic";//设置读取到的urlimg.src=reader.result;//图片名字img.title=item.name;//将图片添加到div1中div1.appendChild(img);//将关闭按钮添加到div1中div1.appendChild(div2);//将图片div1小容器，添加到预览容器当中preview.appendChild(div1);//点击关闭按钮时，点击谁就关闭div1这个小容器图片，从preview这个大容器中删除这个子节点div2.onclick=function(){console.log(item);div1.remove();//在数组中将这个图片对象删除掉fL.splice(index,1);//console.log(fL);}};//读取每个图片对象reader.readAsDataURL(item);});   }else{console.log('请选择文件 ');}    }//将图片对象上传到服务器文件夹中function complateUpdate(){//创建xhrvar xhr=new createXHR();//如果fL数组不为空，表示有图片if(fL.length>0){//创建formData()数据切片var fd=new FormData();//循环出数组当中的图片对象，必须用for in来循环，其它的循环会出错//比如用for(var i=0,len=fL.length...)会有问题，也不能用foreach()for(var files in fL){//以files序列数字为名，将FL[files]添加到fd切片当中fd.append(files,fL[files]);//传输给后端xhr.open("post","ajaxvalidationimg.php",true);//发送切片数据xhr.send(fd);}//xhr加载完数据后事件xhr.onload=function(){if((xhr.status>=200 && xhr.status<300)|| xhr.status==304){//返回后端的数据var arrtext=xhr.responseText;//检测是否是json数据，如果不是则直接弹出信息//如果是json数据则进行字符串切割，后割[]与[]之间的"\t\n",保存单个[]数据成数组if(!/[\[\S*]]/.test(arrtext)){alert(arrtext);}else{var arrtext=arrtext.split("\t\n");//弹出不需要的空格组arrtext.pop();for(var g=0,leng=arrtext.length;g<leng;g++){//解析后端的json数据成对象var a=JSON.parse(arrtext[g]);}//弹出对象中的信息alert(a.msg);//调用对象中的数据信息console.log(a.data);}}else{console.log("接收数据发生错误");}};}else{alert('无图片');}}//获取上传需要的三个元素按钮var button=document.getElementById('btn-submit');var upfiles=document.getElementById("f1");var upbutton=document.getElementById("complate");//如果选择图片按钮有变动则执行相应动作及函数upfiles.onchange=function(){previewUpdate(upfiles.files);}//预览窗口被点击展示和隐藏button.onclick=function(){var preview=document.getElementById("preview");var allStyle=document.defaultView.getComputedStyle(preview,null);if(allStyle.display!="none"){preview.style.display="none";}else{preview.style.display="flex";}};//上传按钮upbutton.onclick=function(){complateUpdate();//数组清空，防止重复提交fL=[];var preview=document.getElementById("preview");//清空已经上传的图片preview.innerHTML='';};</script></body>   
</html>

//后端处理图片文件

<?php
header("Content-Type:text/plain");
//处理上传图片类
class ValidationImg{
//预设图片各种属性private $files=array("name"=>'','tmp_name'=>'','size'=>'',"type"=>'','error'=>'');//最终上传的路径private $path='images/';//需要检查的图片类型白名单private $type=array('image/jpeg','image/jpg','image/png','image/gif');//图片属性字段private $fields=array();//保存上传后图片的各种属性private $init=array();//处理时需要的信息和完成后的数据数组public $message=array('msg'=>'','data'=>[]);//构造函数，获取预设属性的键public function __construct(){$this->fields=array_keys($this->files);}//处理上传的资源图片，将各属性保存进init数组中以备后续处理public function init($source){if(is_array($source) && count($source)>0){foreach($source as $key=>$val){foreach($val as $k=>$v){foreach($this->fields as $default){$this->init[$key][$k]=isset($source[$key][$default]) ?  $source[$key][$k] :$source[$key][$default];}}}}else{$this->message['msg']='请上传图片';return false;}return $this->init;}//获取资源图片的类型public function gettype(){foreach($this->init as $val){if(in_array($val['type'],$this->type)){return true;}else{$this->message['msg']='图片类型不正确';}}}
//创建空白图片以备后用public function newfiles(){foreach($this->init as $key=>$val){$ext[$key]=trim(strrchr($val['name'],'.'),'.');$newfile[$key]=$this->path.strval(rand()).$ext[$key];}return $newfile;}//获取资源图片的后缀public function ext(){foreach($this->init as $key=>$val){$ext[$key]=strrchr($val['name'],'.');}return $ext;}
//获取资源图片的临时名字public function tmpfiles(){foreach($this->init as $key=>$val){$tmpfile[$key]=$val['tmp_name'];}return $tmpfile;}//得到临时文件类型这个更准确，但这函数传有漏洞public function getimagesize(){foreach($this->init as $key=>$val){$type[$key]=@getimagesize($val['tmp_name'])['mime'];}return $type;}
//获取资源图片的大小public function getsize(){foreach($this->init as $key=>$val){if($val['size']<1024*1000){$size[$key]=$val['size'];}else{$this->message['msg']='图片太大,必须小于1M';return false;}}return $size;}//最终处理资源图片形成新的图片，并传数据给前端public function run(){//先处理上传来的资源图片$f=$this->init($_FILES);//如果不为空时，且没有错误信息if(count($f)>0 && $this->message['msg']===''){//资源图片种类都正确时if($this->gettype()===true && $t= $this->getimagesize()){	//资源图片大小正确时if($this->getsize()!==false){if(count($tmp=$this->tmpfiles())>0){//循环临时图片备用foreach($tmp as $key=>$val){//循环新创建的空白图片备用foreach($this->newfiles() as $k=>$v){//如果临时图片键=新创建空白图片键if($key==$k){//将临时图片移动到新空白图片中if(move_uploaded_file($val,$v)){//检测图片类型，选择创建图片资源switch($t[$key]){case 'image/png': $im=imagecreatefrompng($v);break;case 'image/jpeg':$im=imagecreatefromjpeg($v);break;case 'image/jpg':$im=imagecreatefromjpeg($v);break;case 'image/gif':$im=imagecreatefromgif($v);break; case 'default': $im=false;break;               }//如果$im=false表示，imagecratefromjpeg()等函数没能创建出图片//表示临时文件移动到空白图片中是有问题的，表示用户上传的并不是图片类型//有可能是修改了后缀上传的代码文件，所以$im为falseif($im==false){$this->message['msg']="只支持png,jpeg,gif,jpg图片格式,请勿上传其它类型文件";@unlink($v);}else{//新空白图片$img_path=$this->path.date('YmdHis').strval(rand()).$this->ext()[$key];//获取资源图片宽度$srcwidth=imagesx($im);//获取资源图片高度$srcheight=imagesy($im);//设置资源图片与我们设定宽度500值之间的比例保留后2位$wportion=number_format(($srcwidth/500),2);//获取资源图片宽/高的比例保留后2位$portion=number_format($srcwidth/$srcheight,2);//设置空白目标图片宽，资源图片宽 / 设定宽值比例值$dstwidth=ceil($srcwidth/$wportion);//设置空白目标图片高，目标图片宽度 / 资源图片宽高比例值$dstheight=ceil($dstwidth/$portion);if($srcwidth>500){//创建空白目标图片宽与高$dst_image=imagecreatetruecolor($dstwidth,$dstheight);//将资源图片按比例拷贝进目标空白图片当中imagecopyresampled($dst_image,$im,0,0,0,0,$dstwidth,$dstheight,$srcwidth,$srcheight);//将拷贝的目标图片创建进我们设置的新空白地址图片当中，形成新图片，90为保留真色彩值imagejpeg($dst_image,$img_path,90);//删除创建的临时资源图片连接@unlink($v);//销毁目标图像相关联的所有内存imagedestroy($dst_image);//销毁临时图像句柄相关联的所有内存imagedestroy($im);$this->message['msg']='上传成功';array_push($this->message['data'],$img_path);}else{//将临时目标图片移进我们设置的新空白地址图片当中，形成新图片，90为保留真色彩值imagejpeg($im,$img_path,90);//删除创建的临时资源图片连接@unlink($v);//销毁临时图像句柄相关联的所有内存imagedestroy($im);$this->message['msg']='上传成功';array_push($this->message['data'],$img_path);}}$img=json_encode($this->message);echo $img;echo "\t\n";}else{$this->message['msg']="上传出错,请确保图片类型正确";}}}}}else{echo '临时出错';}}else{echo $this->message['msg'];}}else{echo $this->message['msg'];}}else{echo $this->message['msg'];}}}if(isset($_FILES)&& count($_FILES)>0)
{$f=new ValidationImg();$v=$f->init($_FILES);print_r($f->run());
}

//展示效果
在这里插入图片描述

这篇关于javascript原生态xhr上传多个图片，可预览和修改上传图片为固定尺寸比例，防恶意代码，加后端php处理图片的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/293778。

相关文章

Spring Boot整合Redis注解实现增删改查功能(Redis注解使用)

Spring Boot整合Redis注解实现增删改查功能(Redis注解使用)

《SpringBoot整合Redis注解实现增删改查功能(Redis注解使用)》文章介绍了如何使用SpringBoot整合Redis注解实现增删改查功能,包括配置、实体类、Repository、Se... 目录配置Redis连接定义实体类创建Repository接口增删改查操作示例插入数据查询数据删除数据更
阅读更多...
Java Lettuce 客户端入门到生产的实现步骤

Java Lettuce 客户端入门到生产的实现步骤

《JavaLettuce客户端入门到生产的实现步骤》本文主要介绍了JavaLettuce客户端入门到生产的实现步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要... 目录1 安装依赖MavenGradle2 最小化连接示例3 核心特性速览4 生产环境配置建议5 常见问题
阅读更多...
使用python生成固定格式序号的方法详解

使用python生成固定格式序号的方法详解

《使用python生成固定格式序号的方法详解》这篇文章主要为大家详细介绍了如何使用python生成固定格式序号,文中的示例代码讲解详细,具有一定的借鉴价值,有需要的小伙伴可以参考一下... 目录生成结果验证完整生成代码扩展说明1. 保存到文本文件2. 转换为jsON格式3. 处理特殊序号格式（如带圈数字）4
阅读更多...
Java使用Swing生成一个最大公约数计算器

Java使用Swing生成一个最大公约数计算器

《Java使用Swing生成一个最大公约数计算器》这篇文章主要为大家详细介绍了Java使用Swing生成一个最大公约数计算器的相关知识,文中的示例代码讲解详细,感兴趣的小伙伴可以了解一下... 目录第一步：利用欧几里得算法计算最大公约数欧几里得算法的证明情形 1：b=0情形 2：b>0完成相关代码第二步：加
阅读更多...
Java 的ArrayList集合底层实现与最佳实践

Java 的ArrayList集合底层实现与最佳实践

《Java的ArrayList集合底层实现与最佳实践》本文主要介绍了Java的ArrayList集合类的核心概念、底层实现、关键成员变量、初始化机制、容量演变、扩容机制、性能分析、核心方法源码解析、... 目录1. 核心概念与底层实现1.1 ArrayList 的本质1.1.1 底层数据结构JDK 1.7
阅读更多...
Java Map排序如何按照值按照键排序

Java Map排序如何按照值按照键排序

《JavaMap排序如何按照值按照键排序》该文章主要介绍Java中三种Map（HashMap、LinkedHashMap、TreeMap）的默认排序行为及实现按键排序和按值排序的方法,每种方法结合实... 目录一、先理清 3 种 Map 的默认排序行为二、按「键」排序的实现方式1. 方式 1：用 TreeM
阅读更多...
Java中流式并行操作parallelStream的原理和使用方法

Java中流式并行操作parallelStream的原理和使用方法

《Java中流式并行操作parallelStream的原理和使用方法》本文详细介绍了Java中的并行流（parallelStream）的原理、正确使用方法以及在实际业务中的应用案例,并指出在使用并行流... 目录Java中流式并行操作parallelStream0. 问题的产生1. 什么是parallelS
阅读更多...
Java中Redisson 的原理深度解析

Java中Redisson 的原理深度解析

《Java中Redisson的原理深度解析》Redisson是一个高性能的Redis客户端,它通过将Redis数据结构映射为Java对象和分布式对象,实现了在Java应用中方便地使用Redis,本文... 目录前言一、核心设计理念二、核心架构与通信层1. 基于 Netty 的异步非阻塞通信2. 编解码器三、
阅读更多...
SpringBoot基于注解实现数据库字段回填的完整方案

SpringBoot基于注解实现数据库字段回填的完整方案

《SpringBoot基于注解实现数据库字段回填的完整方案》这篇文章主要为大家详细介绍了SpringBoot如何基于注解实现数据库字段回填的相关方法,文中的示例代码讲解详细,感兴趣的小伙伴可以了解... 目录数据库表pom.XMLRelationFieldRelationFieldMapping基础的一些代
阅读更多...
一篇文章彻底搞懂macOS如何决定java环境

一篇文章彻底搞懂macOS如何决定java环境

《一篇文章彻底搞懂macOS如何决定java环境》MacOS作为一个功能强大的操作系统,为开发者提供了丰富的开发工具和框架,下面：本文主要介绍macOS如何决定java环境的相关资料,文中通过代码... 目录方法一：使用 which命令方法二：使用 Java_home工具（Apple 官方推荐）那问题来了，
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2