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。

相关文章

JVM 的类初始化机制

JVM 的类初始化机制

前言 当你在 Java 程序中new对象时，有没有考虑过 JVM 是如何把静态的字节码（byte code）转化为运行时对象的呢，这个问题看似简单，但清楚的同学相信也不会太多，这篇文章首先介绍 JVM 类初始化的机制，然后给出几个易出错的实例来分析，帮助大家更好理解这个知识点。 JVM 将字节码转化为运行时对象分为三个阶段，分别是：loading 、Linking、initialization
阅读更多...
Spring Security 基于表达式的权限控制

Spring Security 基于表达式的权限控制

前言 spring security 3.0已经可以使用spring el表达式来控制授权，允许在表达式中使用复杂的布尔逻辑来控制访问的权限。 常见的表达式 Spring Security可用表达式对象的基类是SecurityExpressionRoot。 表达式描述hasRole([role])用户拥有制定的角色时返回true （Spring security默认会带有ROLE_前缀）,去
阅读更多...
浅析Spring Security认证过程

浅析Spring Security认证过程

类图 为了方便理解Spring Security认证流程，特意画了如下的类图，包含相关的核心认证类 概述 核心验证器 AuthenticationManager 该对象提供了认证方法的入口，接收一个Authentiaton对象作为参数; public interface AuthenticationManager {Authentication authenticate(Authenti
阅读更多...
Spring Security--Architecture Overview

Spring Security--Architecture Overview

1 核心组件 这一节主要介绍一些在Spring Security中常见且核心的Java类，它们之间的依赖，构建起了整个框架。想要理解整个架构，最起码得对这些类眼熟。 1.1 SecurityContextHolder SecurityContextHolder用于存储安全上下文（security context）的信息。当前操作的用户是谁，该用户是否已经被认证，他拥有哪些角色权限…这些都被保
阅读更多...
Spring Security基于数据库验证流程详解

Spring Security基于数据库验证流程详解

Spring Security 校验流程图 相关解释说明（认真看哦） AbstractAuthenticationProcessingFilter 抽象类 /*** 调用 #requiresAuthentication(HttpServletRequest, HttpServletResponse) 决定是否需要进行验证操作。* 如果需要验证，则会调用 #attemptAuthentica
阅读更多...
Spring Security 从入门到进阶系列教程

Spring Security 从入门到进阶系列教程

Spring Security 入门系列 《保护 Web 应用的安全》 《Spring-Security-入门（一）：登录与退出》 《Spring-Security-入门（二）：基于数据库验证》 《Spring-Security-入门（三）：密码加密》 《Spring-Security-入门（四）：自定义-Filter》 《Spring-Security-入门（五）：在 Sprin
阅读更多...
Java架构师知识体认识

Java架构师知识体认识

源码分析 常用设计模式 Proxy代理模式Factory工厂模式Singleton单例模式Delegate委派模式Strategy策略模式Prototype原型模式Template模板模式 Spring5 beans 接口实例化代理Bean操作 Context Ioc容器设计原理及高级特性Aop设计原理Factorybean与Beanfactory Transaction 声明式事物
阅读更多...
无人叉车3d激光slam多房间建图定位异常处理方案-墙体画线地图切分方案

无人叉车3d激光slam多房间建图定位异常处理方案-墙体画线地图切分方案

墙体画线地图切分方案 针对问题：墙体两侧特征混淆误匹配，导致建图和定位偏差，表现为过门跳变、外月台走歪等 ·解决思路：预期的根治方案IGICP需要较长时间完成上线，先使用切分地图的工程化方案，即墙体两侧切分为不同地图，在某一侧只使用该侧地图进行定位 方案思路 切分原理：切分地图基于关键帧位置，而非点云。 理论基础：光照是直线的，一帧点云必定只能照射到墙的一侧，无法同时照到两侧实践考虑：关
阅读更多...
Java进阶13讲__第12讲_1/2

Java进阶13讲__第12讲_1/2

多线程、线程池 1.  线程概念 1.1  什么是线程 1.2  线程的好处 2.   创建线程的三种方式 注意事项 2.1  继承Thread类 2.1.1 认识  2.1.2  编码实现  package cn.hdc.oop10.Thread;import org.slf4j.Logger;import org.slf4j.LoggerFactory
阅读更多...
使用opencv优化图片（画面变清晰）

使用opencv优化图片（画面变清晰）

文章目录 需求影响照片清晰度的因素 实现降噪测试代码 锐化空间锐化Unsharp Masking频率域锐化对比测试 对比度增强常用算法对比测试 需求 对图像进行优化，使其看起来更清晰，同时保持尺寸不变，通常涉及到图像处理技术如锐化、降噪、对比度增强等 影响照片清晰度的因素 影响照片清晰度的因素有很多，主要可以从以下几个方面来分析 1. 拍摄设备 相机传感器：相机传
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2