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());
}

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/120414.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

关于前端如何下载后端接口返回content-type为application/octet-stream的文件

关于前端如何下载后端接口返回response-type为application/octet-stream的文件 问题描述 后端接口定义为直接返回一个文件&#xff0c;如果带认证信息可以直接通过浏览器url下载&#xff0c;但是接口需要传headers认证信息&#xff0c;url上又不支持传相关信息 解决 前端…

p5.js map映射

本文简介 带尬猴&#xff0c;我嗨德育处主任 p5.js 为开发者提供了很多有用的方法&#xff0c;这些方法实现起来可能不难&#xff0c;但却非常实用&#xff0c;能大大减少我们的开发时间。 本文将通过举例说明的方式来讲解 映射 map() 方法。 什么是映射 从 p5.js 文档 中可…

N-129基于springboot,vue学生宿舍管理系统

开发工具&#xff1a;IDEA 服务器&#xff1a;Tomcat9.0&#xff0c; jdk1.8 项目构建&#xff1a;maven 数据库&#xff1a;mysql5.7 系统分前后台&#xff0c;项目采用前后端分离 前端技术&#xff1a;vuevue-element-admin 服务端技术&#xff1a;springboot,mybatis…

Redis 主从复制和哨兵监控,实现Redis高可用配置

文章目录 一、概述二、主从复制模拟说明三、准备配置文件四、启动Redis实例五、主从复制配置5.1 命令方式启用和取消主从复制5.2 配置文件方式启用和取消主从复制5.3 测试主从复制5.4 有其主从复制的其他参数配置 六、Sentinel 配置6.1 Sentinel 的作用6.2 Sentinel 监控说明6.…

关于网络安全运营工作与安全建设工作的一些思考

以下内容是个人成长过程中对于网络安全运营工作的理解和思考&#xff0c;希望通过这篇文章帮助大家更好的去做安全运营体系化建设&#xff0c;开始吧&#xff01; 文章目录 一、网络安全运营是什么&#xff1f;二、网络安全运营建设阶段第一阶段&#xff1a;设备限制阶段第二阶…

基于springboot实现校园交友网站管理系统项目【项目源码+论文说明】

基于springboot实现校园交友网站管理系统演示 摘要 随着信息技术和网络技术的飞速发展&#xff0c;人类已进入全新信息化时代&#xff0c;传统管理技术已无法高效&#xff0c;便捷地管理信息。为了迎合时代需求&#xff0c;优化管理效率&#xff0c;各种各样的管理系统应运而生…

iStat Menus v6.72

iStat Menus是一款Mac电脑上的系统监控工具&#xff0c;它可以帮助用户监测电脑的硬件和软件状况&#xff0c;提供实时的系统数据和统计信息。 其主要特点包括&#xff1a; 1.系统监测&#xff1a;iStat Menus可以监测CPU、内存、硬盘、网络、电池等系统参数&#xff0c;方便…

性能测试基本知识

性能测试基本知识 一、什么是性能测试 使用自动化工具&#xff0c;模拟不同的场景&#xff0c;对软件各项性能指标进行测试和评估的过程就是性能测试。 1. 后台处理程序的性能&#xff08;代码性能&#xff09; 2. 中间件、数据库、架构设计等是否存在瓶颈 3. 服务器资源消耗…

java springboot2.7 写一个本地 pdf 预览的接口

依赖方面 创建的是 接口web项目就好了 然后包管理工具打开需要这些 import org.springframework.core.io.FileSystemResource; import org.springframework.core.io.Resource; import org.springframework.http.HttpHeaders; import org.springframework.http.MediaType; imp…

macOS Sonoma 14.1正式版发布 改善Apple Music界面 新增保修状态显示

10月26日消息&#xff0c;苹果今天为 macOS Sonoma 推出了 14.1 版本更新&#xff0c;本更新主要改善了 Apple Music 界面&#xff0c;设置中新增保修状态&#xff0c;并修复了多项错误内容。 经过几周的用户测试&#xff0c;Apple 正式向所有 Mac 用户发布了 macOS Sonoma 14.…

以“降本增效”为目标,智能视频监控能为企业带来哪些经济价值?

随着经济的发展和科技的进步&#xff0c;企业需要不断提升自身的品质和效率&#xff0c;以保持竞争优势。而智能视频监控技术正是一项值得考虑的工具&#xff0c;其对企业带来的降本增效效益可以通过以下几个方面来体现。 1、降低运行成本 EasyCVR智能视频监控平台可以实现远程…

ArcGIS中如何为跨带数据投影?

北京54、西安80高斯克吕格投影是我国常用的投影坐标系统,它们是一种分带投影方式,有3和6分带,不适合大范围内的投影使用。但是如果有份数据范围较大,跨越了多个度带,该选择哪个坐标系统进行投影转换呢? 在大范围内,常用的坐标系统有Albers等面积投影和Lambert等角投影,…

实现基于 Jenkins 的多服务器打包方案

实现基于 Jenkins 的多服务器打包方案 在实际项目中&#xff0c;我们经常会遇到需要将一个应用程序或服务部署到不同的服务器上的需求。而使用 Jenkins 可以很方便地自动化这个过程。 设置参数 首先&#xff0c;我们需要设置一些参数&#xff0c;以便在构建过程中指定要部署…

什么是云原生?土生土长?

“云原生”&#xff08;Cloud Native&#xff09;是一种构建和运行应用程序的方法&#xff0c;这种方法充分利用了云计算的优势。云原生应用程序是为云环境设计的&#xff0c;通常是在容器中运行&#xff0c;并被设计为在微服务架构中运行&#xff0c;这使得它们能够快速扩展和…

java.sql.SQLException: ORA-28000: the account is locked

1.遇到的问题 Oracle执行报下面的错误 java.sql.SQLException: ORA-28000: the account is locked 2.解决办法 登录sysdba管理账号&#xff0c;执行下面命令。 alter user demo account unlock&#xff1b;

驱动开发6 IO多路复用——epoll

核心操作&#xff1a;一棵树、一张表、三个接口 相关案例 #include <stdio.h> #include <sys/types.h> #include <sys/stat.h> #include <fcntl.h> #include <unistd.h> #include <stdlib.h> #include <string.h> #include <sys…

Angular-04:指令

① 内置指令1.1 *ngIf 结构指令1.2 [hidden] 属性指令1.3. *ngFor 结构指令1.4 *ngSwitch 结构指令 ② 自定义指令用法 指令是angular操作dom的途径&#xff0c;分为属性指令和结构指令。属性指令&#xff1a;修改元素的外观或行为。使用 [ ] 包裹。结构指令&#xff1a;增加、…

Python 框架学习 Django篇 (六) ORM关联

像是上一章我们很少会通过页面点击去添加和绑定关系表&#xff0c;更多的时候都是通过django的语法实现&#xff0c;接下来我们做一个案例 django rom是怎么操作外键关系的 创建mode模型表 Django_demo/mgr/models.py # 国家表 class Country(models.Model):name models.Cha…

手把手教你部署Jenkins教程,小白也能学会(多图预警)!

背景 公司的前端、后端构建及部署工作都是人工去做&#xff0c;随着业务扩大&#xff0c;项目迭代速度变快&#xff0c;人员增多&#xff0c;各种问题都暴露出来&#xff0c;将通过一个简单案例分享一下基于Jenkins的前后端自动化工作流搭建的过程&#xff0c;搭建完这套工作流…