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处理图片
//前端上传文件 <!DOCTYPE html> <html xmlns"http://www.w3.org/1999/xhtml" lang"UTF-8"></html> <html><head><meta http-equiv"Content-Type" content"text/html;charsetUTF-8;"/><title…...
【Java】Map集合中常用方法
Map集合的常用方法 方法名称作用V put(Key k,V value)添加元素V remove(K key, V value)根据键值删除对应的值void clear()清除所有键值元素boolean containsKey(Object key)判断集合中是否包含指定的键boolean containsValue(Object value)判断集合中是否包含指定的值boolean …...
方太描画未来厨房的模样
作者 | 辰纹 来源 | 洞见新研社 不知不觉中，iPhone已经更新到15代了，家里的电视变成了越来越轻薄的液晶屏，过去被称为“老三样”的富康，捷达、桑塔纳，如今也被以特斯拉为代表的新能源智能汽车们所取代…… 类似以上的…...
ELASTICO-A Secure Sharding Protocol For Open Blockchains
INTRO 在中本聪共识中，通过POW机制来公平的选举leader，不仅非常消耗power，并且拓展性也不好。现在比特币中是7 TPS，和其他的支付系统相比效率相差甚远。 当前的许多拜占庭共识协议，并不支持在一个开放的环境中使用&a…...
【数据结构】Map和Set
⭐ 作者：小胡_不糊涂 🌱 作者主页：小胡_不糊涂的个人主页 📀 收录专栏：浅谈数据结构 💖 持续更文，关注博主少走弯路，谢谢大家支持 💖 Map、Set 1. 搜索树1.1 概念1.2 性能…...
Python Flask
Python Flask是一个轻量级的web开发框架，用于快速地构建web应用程序。以下是Python Flask的基本使用步骤： 安装Flask：使用pip安装Flask包。在命令行中输入以下命令： pip install flask创建Flask对象：在Python文件中&am…...
时序预测 | Python实现ARIMA-LSTM差分自回归移动平均模型结合长短期记忆神经网络时间序列预测
时序预测 | Python实现ARIMA-LSTM差分自回归移动平均模型结合长短期记忆神经网络时间序列预测 目录 时序预测 | Python实现ARIMA-LSTM差分自回归移动平均模型结合长短期记忆神经网络时间序列预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 时序预测 | Python实现ARIM…...
)
Redis快速上手篇八(redission完善分布式锁)
Redisson Redisson是一个在Redis的基础上实现的Java驻内存数据网格（In-Memory Data Grid）。它不仅提供了一系列的分布式的Java常用对象，还提供了许多分布式服务，其中就包含了各种分布式锁的实现。简单说就是redis在分布式系统上工…...
Dataset文件下载以及使用，以nuswide为例
文章目录 文件夹结构如何使用继承torch.utils.data.Dataset构建新的class构建新的Dataloader 数据集要求以文章 multi-label learning from single positive label为例； 文件夹结构 我是这么放置的，其中含有obs的文件是通过运行文件夹preproc下的genera…...
ZYNQ连载02-开发环境
ZYNQ连载02-开发环境 1. 官方文档 ZYNQ开发使用的软件为Vivado/Vitis/PetaLinux,软件体积比较大，硬盘保留100G以上的空间，赛灵思提供详细的文档，链接如下： ZYNQ文档 2. Vivido和Vitis安装 赛灵思统一安装程序 3. PetaLinux安装…...
前端 ：用HTML和css制作一个小米官网的静态页面
1.HTML： <body><div id "content"><div id "box"><div id "top"><div id "top-left"><span id "logo">MI</span><span id "text-logo">小米账…...
modelsim仿真报错：vlog-2388 ‘scl‘ already declared in this scope
问题背景： 1、使用vivado直接仿真的时候没有报错。 2、在vivado中调用modelsim的时候报错。 报错的代码： module iic_write(input clk,input rst,output scl,input en,inout sda);reg scl；……报错的意思是scl已经声明过了，mode…...
和EndInvoke()来实现异步)
C#中通过BeginInvoke()和EndInvoke()来实现异步
.NET Framework允许异步调用任何方法。定义与需要调用的方法具有相同签名的委托；公共语言运行库将自动为该委托定义具有适当签名的 BeginInvoke 和 EndInvoke 方法。以下介绍C#中，通过BeginInvoke()和EndInvoke()来实现异步。 1、异步编程 调用BeginInv…...
github中.gitignore不起作用啦
文章目录 前言两种方法解决清除本地缓存设置不需要 额外注意 前言 提示：人不是靠讲话来生活。每个人都应该靠行动。而行动，是需要时间来证明的。 --《自在独行》 两种方法解决 清除本地缓存 (.gitignore中已经表标明忽略的文件目录下的文件了…...
同步网盘推荐及挑选指南：便捷、安全、适用的选择
同步网盘是最近热门的文件协同工具之一，因其使用的便捷性受到了诸多用户的青睐。如今网盘市场产品众多，有什么好用的同步网盘？如何挑选同步网盘？是许多需求者关心的问题。 如何挑选同步网盘？在同步网盘挑选过程中要从…...
Java中的QName
javax.xml.namespace.QName代表XML规范中一个限定性名称（qualified name），它包含一个命名空间地址（Namespace URI）、一个本地部分、和一个前缀。QName可以用在xml的元素和属性中。 前缀提供了命名空间地址的前缀&#…...
汇编语言-div指令溢出问题
汇编语言-div指令溢出问题 8086CPU中被除数保存在ax(16位)或ax和dx（32位）中，如果被除数为16位，进行除法运算时al保存商，ah保存余数。如果被除数为32位时，进行除法运算时，ax保存商，d…...
koa搭建服务器（一）
最近有个需求需要使用到koa搭建服务器并编写接口对数据库进行增删改查，因此写一篇博客记录这段时间的收获。 一、新建koa项目 （一）安装koa及其相关依赖 npm i koa npm i koa-router// 中间件，用于匹配路由 npm i koa-bodyparse…...
qt-C++笔记之在两个标签页中按行读取两个不同的文件并且滚动条自适应滚动范围高度
qt-C笔记之在两个标签页中按行读取两个不同的文件并且滚动条自适应滚动范围高度 code review! 文章目录 qt-C笔记之在两个标签页中按行读取两个不同的文件并且滚动条自适应滚动范围高度1.运行2.文件结构3.main.cc4.main.pro5.a.txt6.b.txt7.上述代码中QVBoxLayout，…...
github搜索技巧探索
毕设涉及到推荐系统，那么就用搜索推荐系统相关资料来探索一下GitHub的搜搜技巧 文章目录 1. 基础搜索2. 限定在特定仓库搜索3. 按照语言搜索4. 按照star数量搜索5. 搜索特定用户/组织的仓库6. 查找特定文件或路径7. 按时间搜索8. 搜索不包含某个词的仓库9. 搜索特定…...
微信小程序之bind和catch
这两个呢，都是绑定事件用的，具体使用有些小区别。 官方文档： 事件冒泡处理不同 bind：绑定的事件会向上冒泡，即触发当前组件的事件后，还会继续触发父组件的相同事件。例如，有一个子视图绑定了b…...
大型活动交通拥堵治理的视觉算法应用
大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动（如演唱会、马拉松赛事、高考中考等）期间，城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例，暖城商圈曾因观众集中离场导致周边…...
【机器视觉】单目测距——运动结构恢复
ps：图是随便找的，为了凑个封面 前言 在前面对光流法进行进一步改进，希望将2D光流推广至3D场景流时，发现2D转3D过程中存在尺度歧义问题，需要补全摄像头拍摄图像中缺失的深度信息，否则解空间不收敛…...
django filter 统计数量 按属性去重
在Django中，如果你想要根据某个属性对查询集进行去重并统计数量，你可以使用values()方法配合annotate()方法来实现。这里有两种常见的方法来完成这个需求： 方法1：使用annotate()和Count 假设你有一个模型Item，并且你想…...
Springcloud：Eureka 高可用集群搭建实战（服务注册与发现的底层原理与避坑指南）
引言：为什么 Eureka 依然是存量系统的核心？ 尽管 Nacos 等新注册中心崛起，但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制，是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...
C++.OpenGL （10/64）基础光照（Basic Lighting）
基础光照（Basic Lighting） 冯氏光照模型（Phong Lighting Model） #mermaid-svg-GLdskXwWINxNGHso {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-GLdskXwWINxNGHso .error-icon{fill:#552222;}#mermaid-svg-GLd…...
AI书签管理工具开发全记录（十九）：嵌入资源处理
1.前言 📝 在上一篇文章中，我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源，方便后续将资源打包到一个可执行文件中。 2.embed介绍 🎯 Go 1.16 引入了革命性的 embed 包，彻底改变了静态资源管理的…...
使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台
🎯 使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台 📌 项目背景 随着大语言模型（LLM）的广泛应用，开发者常面临多个挑战： 各大模型（OpenAI、Claude、Gemini、Ollama）接口风格不统一；缺乏一个统一平台进行模型调用与测试；本地模型 Ollama 的集成与前…...
docker 部署发现spring.profiles.active 问题
报错： org.springframework.boot.context.config.InvalidConfigDataPropertyException: Property spring.profiles.active imported from location class path resource [application-test.yml] is invalid in a profile specific resource [origin: class path re…...
算法笔记2
1.字符串拼接最好用StringBuilder，不用String 2.创建List<>类型的数组并创建内存 List arr[] new ArrayList[26]; Arrays.setAll(arr, i -> new ArrayList<>()); 3.去掉首尾空格...