当前位置： 首页 > news >正文

原生JavaScript+PHP多图上传实现

news 2026/3/28 21:39:26

摘要

很多场景下需要选择多张图片上传，或者是批量上传以提高效率，多图上传的需求自然就比较多了，本文使用最简单的XMLHttpRequest异步上传图片。

界面

在这里插入图片描述

上传示例

在这里插入图片描述

代码

index.html

<!DOCTYPE html>
<html><head><title>多图上传</title><meta charset="utf-8"><style>#fileInput{width: 500px;height: 45px;margin: 50px auto 0;background: #eee;display: block;padding: 20px 20px;border-radius: 20px;}#previewContainer{width: 500px;margin: 10px auto;background: #eee;padding: 20px 20px;display: none;}.preview-image {max-width: 200px;max-height: 200px;margin-bottom: 10px;}</style></head><body><!--选择文件--><input type="file" id="fileInput" accept="image/*" multiple><div id="previewContainer"></div><script>const fileInput = document.getElementById('fileInput');const previewContainer = document.getElementById('previewContainer');// 监听选择文件fileInput.addEventListener('change', handleFileSelect);function handleFileSelect(event) {const files = event.target.files;for (let i = 0; i < files.length; i++) {const file = files[i];const reader = new FileReader();reader.onload = function(event) {const image = document.createElement('img');image.className = 'preview-image';image.src = event.target.result;previewContainer.appendChild(image);// 将文件上传至服务器uploadImage(file);}reader.readAsDataURL(file);}}// 将文件上传至服务器function uploadImage(file) {const xhr = new XMLHttpRequest();const formData = new FormData();// 将文件添加到formData对象formData.append('image', file);// 设置XHR请求的处理函数xhr.onreadystatechange = function() {if (xhr.readyState === XMLHttpRequest.DONE) {if (xhr.status === 200) {console.log('上传成功');// 显示图片预览区域document.querySelector('#previewContainer').setAttribute('style', 'display:block');// 打印JSONconsole.log(JSON.parse(xhr.response))} else {console.log('上传失败');}}}// 发送POST请求到服务器xhr.open('POST', 'upload.php', true);xhr.send(formData);}</script></body>
</html>

upload.php
（请建立一个upload文件夹以存放上传的文件）

<?php// 编码header("Content-type:application/json");// 检查是否有文件上传if (isset($_FILES['image'])) {// 获取上传的文件信息$file = $_FILES['image'];// 获取文件名$fileName = $file['name'];// 获取文件的临时路径$tmpFilePath = $file['tmp_name'];// 指定保存目录$uploadDir = 'upload/';// 验证是否为图片文件if ((($_FILES["image"]["type"] == "image/gif")|| ($_FILES["image"]["type"] == "image/jpeg")|| ($_FILES["image"]["type"] == "image/jpg")|| ($_FILES["image"]["type"] == "image/pjpeg")|| ($_FILES["image"]["type"] == "image/x-png")|| ($_FILES["image"]["type"] == "image/png"))&& ($_FILES["image"]["size"] < 10485760)){// 生成唯一的文件名$uniqueFileName = uniqid() . '_' . $fileName;// 拼接保存路径$uploadPath = $uploadDir . $uniqueFileName;// 获取HTTP协议function get_http_type(){$http_type = ((isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] == 'on') || (isset($_SERVER['HTTP_X_FORWARDED_PROTO']) && $_SERVER['HTTP_X_FORWARDED_PROTO'] == 'https')) ? 'https://' : 'http://';return $http_type;}// 将临时文件移动到目标路径if (move_uploaded_file($tmpFilePath, $uploadPath)) {// 上传成功// 可以在此处进行进一步处理，比如生成缩略图、添加水印等$result = array('code' => 200,'msg' => '上传成功','url' => get_http_type().dirname($_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF']).'/'.$uploadPath);} else {// 上传失败$result = array('code' => 202,'msg' => '文件上传失败');}}else{// 不合规的文件$result = array('code' => 202,'msg' => '不合规的文件');}} else {// 没有文件上传$result = array('code' => 202,'msg' => '没有选择要上传的文件');}// JSONecho json_encode($result, JSON_UNESCAPED_UNICODE);
?>

作者

TANKING

相关文章：

原生JavaScript+PHP多图上传实现

摘要 很多场景下需要选择多张图片上传&#xff0c;或者是批量上传以提高效率&#xff0c;多图上传的需求自然就比较多了&#xff0c;本文使用最简单的XMLHttpRequest异步上传图片。 界面 上传示例 代码 index.html <!DOCTYPE html> <html><head><titl…...

编程日记 2023/9/9 19:28:00

企业架构LNMP学习笔记30

1、upstream 中server的关键字&#xff1a;语法&#xff1a; upstream中的分发之后的几个关键字&#xff1a; 1&#xff09;backup 备 其他的没有backup标识的都不可用了&#xff0c;才分发到backup&#xff1b; 2&#xff09;down 此条配置&#xff0c;不会被分发到。 syst…...

编程日记 2023/9/9 19:26:59

数学建模算法汇总（全网最全，含matlab案例代码）

数学建模常用的算法分类 全国大学生数学建模竞赛中&#xff0c;常见的算法模型有以下30种&#xff1a; 最小二乘法数值分析方法图论算法线性规划整数规划动态规划贪心算法分支定界法蒙特卡洛方法随机游走算法遗传算法粒子群算法神经网络算法人工智能算法模糊数学时间序列分析马…...

编程日记 2023/9/9 19:25:58

openpnp - 底部相机高级矫正后,底部相机看不清吸嘴的解决方法

文章目录 openpnp - 底部相机高级矫正后,底部相机看不清吸嘴的解决方法概述解决思路备注补充 - 新问题 - N1吸嘴到底部相机十字中心的位置差了很多END openpnp - 底部相机高级矫正后,底部相机看不清吸嘴的解决方法 概述 自从用openpnp后, 无论版本(dev/test), 都发现一个大概…...

编程日记 2023/9/9 19:24:55

怎么提高自己当众讲话的能力？

当众讲话是一项重要的沟通技能&#xff0c;它可以帮助你在各种场合中表达自己的观点、影响他人&#xff0c;并建立自信。虽然对很多人来说&#xff0c;当众讲话可能是一项挑战&#xff0c;但通过一些实践和技巧&#xff0c;你可以提高自己的当众讲话能力。下面是一些方法&#…...

编程日记 2023/9/9 19:23:54

孙哥Spring源码第20集

第20集 refresh()-invokeBeanFactoryPostProcessor 四-处理Configuration下的Bean生成代理对象 【视频来源于&#xff1a;B站up主孙帅suns Spring源码视频】【微信号&#xff1a;suns45】 1、二行InvokeBeanFactoryPostProcessors的作用 registryProcessors&#xff1a;处理的…...

编程日记 2023/9/9 19:22:52

【计算机网络】HTTP(上)

文章目录 1.HTTP概念2. URLurlencode 和 urldecode转义规则 3. HTTP的宏观理解HTTP的请求HTTP的响应 4. 见一见HTTP请求和响应请求报头 1. 模拟一个简单的响应response响应报头 2. 从路径中获取内容ReadFile函数的实现 3.不同资源进行区分反序列化的实现ReadOneLine函数的实现P…...

编程日记 2023/9/9 19:21:51

Maven学习记录

一、Maven是什么 简单来说Maven是一个标准化的java管理和构建工具&#xff0c;它提供了一系列规范&#xff0c;包括项目结构&#xff0c;构建流程&#xff08;编译&#xff0c;测试&#xff0c;打包&#xff0c;发布……&#xff09;&#xff0c;依赖管理等。 标准化就是定下…...

编程日记 2023/9/9 19:20:50

H5游戏开发H5休闲小游戏定制H5软件定制

H5游戏是一种运行在网页浏览器中的HTML5技术开发的游戏。H5休闲小游戏通常具有简单的玩法&#xff0c;易于上手&#xff0c;适合快速的娱乐。以下是开发H5休闲小游戏的一般步骤&#xff1a; 1. 制定游戏开发概念&#xff1a; 确定H5游戏开发的主题和玩法。休闲小游戏通常应该…...

编程日记 2023/9/9 19:19:50

Spring基础及IoC容器的理解

Spring概念&#xff1a; 通常所说的Spring指的是Spring Framewprk(Spring框架)&#xff0c;它是一个开源的框架。用一句话概括就是&#xff1a;Spring是包含了众多工具方法的IoC容器。 什么是容器&#xff1f; 容器是用来容纳某种物品的装置&#xff0c;在之前的学习中&…...

编程日记 2023/9/9 19:18:49

护网行动为什么给的钱那么多

因为护网行动是国家应对网络安全问题所做的重要布局之一。 随着大数据、物联网、云计算的快速发展&#xff0c;愈演愈烈的网络攻击已经成为国家安全的新挑战。国家关键信息基础设施可能时刻受到来自网络攻击的威胁。网络安全的态势之严峻&#xff0c;迫切需要我们在网络安全领…...

编程日记 2023/9/9 19:17:47

软考知识汇总-计算机系统

文章目录 1 计算器 1 计算器 算术逻辑单元&#xff08;ALU&#xff09;&#xff1a;运算器重要组成部件&#xff0c;负责处理数据&#xff0c;实现对数据的算数运算和逻辑运算。累加寄存器&#xff08;AC&#xff09;&#xff1a;简称累加器&#xff0c;为ALU提供数据并暂存运…...

编程日记 2023/9/9 19:16:46

OpenCV 11(图像金字塔)

一、 图像金字塔 **图像金字塔**是图像中多尺度表达的一种&#xff0c;最主要用于图像的分割&#xff0c;是一种以多分辨率来解释图像的有效但概念简单的结构。简单来说, 图像金字塔是同一图像不同分辨率的子图集合. 图像金字塔最初用于机器视觉和图像压缩。其通过梯次向下采…...

编程日记 2023/9/9 19:15:45

Linux学习笔记-Ubuntu系统用户、群组、权限管理

一、概述 本文记录Ubuntu系统下通过命令操作用户账户进行管理。 Ubuntu系统版本&#xff1a; Linux ubuntu 5.15.0-1034-raspi #37-Ubuntu SMP PREEMPT Mon Jul 17 10:02:14 UTC 2023 aarch64 aarch64 aarch64 GNU/Linux 注&#xff1a;查看系统版本号的指令如下 uname -…...

编程日记 2023/9/9 19:14:43

文章预览 安防监控/视频存储/视频汇聚平台EasyCVR播放优化小tips

视频云存储/安防监控EasyCVR视频汇聚平台基于云边端智能协同&#xff0c;可实现视频监控直播、视频轮播、视频录像、云存储、回放与检索、智能告警、服务器集群、语音对讲、云台控制、电子地图、H.265自动转码H.264、平台级联等。为了便于用户二次开发、调用与集成&#xff0c;…...

编程日记 2023/9/9 19:13:42

Nand Flash的特性及烧录问题

目录 前言 一 Nand flash的特性 1 存储结构 2 OOB区域 3 位翻转 4 坏块及ECC 二 Nand系统裸片量产烧录 1 坏块处理策略 2 分区(Partition) 3 纠错码(Error Correction Codes&#xff0c;ECC) 4. 擦除坏块 &#x1f388;个人主页&#x1f388;&#xff1a;linux_嵌入式…...

编程日记 2023/9/9 19:12:41

【React 】useLayoutEffect 和 useEffect的区别

useLayoutEffect和useEffect是React中常用的两个Hook&#xff0c;它们的主要区别在于触发时机。 useEffect会在渲染完成后异步执行&#xff0c;不会阻塞浏览器的绘制操作。它适用于需要在组件渲染后执行副作用的情况&#xff0c;例如数据的获取、订阅事件等。它不会阻止屏幕更新…...

编程日记 2023/9/9 19:11:40

oracle数据库常见的优化步骤与脚本

要优化 Oracle 数据库的性能，可以按照以下步骤进行： 1. 性能分析和诊断：首先，使用 Oracle 提供的性能分析工具（如 AWR 报告、ASH 报告）对数据库进行分析和诊断。这些报告可以帮助您确定数据库的性能瓶颈和潜在问题。 2. 优化 SQL 查询语句：针对频繁执行的 SQL 查询语句…...

编程日记 2023/9/9 19:10:37

并发内存池（C++）

项目简介 这个项目是实现了一个高效的并发内存池。它的原型的goggle的一个开源项目tcmalloc&#xff0c;即thread-cache malloc&#xff08;线程缓存的malloc&#xff09;&#xff0c;实现了高效多线程的内存管理&#xff0c;可实现对系统提供的内存分配函数malloc和free的替代…...

编程日记 2023/9/9 19:09:36

本地起一个VUE 前端项目

#安装 安装 Vue CLI 3&#xff1a; Vue CLI是一个用于创建和管理Vue项目的命令行工具 npm install -g vue/cli#查看更详细的告警信息 npm install -g vue/cli --verbose#检查项目的依赖关系 ,保持项目的依赖关系最新和安全 npm audit npm audit fix#查看版本 vue --version#创建…...

编程日记 2023/9/9 19:08:35

04.如何在Allegro X中导入机械结构尺寸图纸和注意事项 I Allegro X PCB设计小诀窍系列

大家好&#xff01;在进行PCB设计时&#xff0c;我们经常需要根据机械结构工程师提供的**DXF图纸**来确定板框形状、定位孔位置、元器件高度限制区域等关键信息。如果手动在PCB中重新绘制这些几何图形&#xff0c;不仅耗时&#xff0c;还容易与结构图纸产生偏差——哪怕零点几毫…...

编程新知 2026/3/28 21:13:43

基于大数据技术的个性化图书推荐系统-大数据深度学习算法-含完整源码论文设计项目

博主介绍&#xff1a;&#x1f449;全网个人号和企业号粉丝40W,每年辅导几千名大学生较好的完成毕业设计&#xff0c;专注计算机软件领域的项目研发&#xff0c;不断的进行新技术的项目实战&#x1f448; ⭐️热门专栏推荐订阅⭐️ 订阅收藏起来&#xff0c;防止下次找不到 &am…...

编程新知 2026/3/28 21:07:38

马吕斯定律在现代光学技术中的关键应用解析

1. 马吕斯定律&#xff1a;偏振光世界的"交通规则" 想象一下你戴着偏光太阳镜站在湖边&#xff0c;神奇的事情发生了——水面刺眼的反光突然消失了&#xff01;这背后正是马吕斯定律在发挥作用。这个由法国物理学家马吕斯在19世纪初发现的规律&#xff0c;本质上描述…...

编程新知 2026/3/28 20:59:35

提升arduino开发效率：用快马平台一键生成常用工具模块代码

作为一名经常折腾Arduino的开发者&#xff0c;我发现在项目开发中&#xff0c;总有些重复性的代码需要反复编写。最近尝试用InsCode(快马)平台来生成这些常用工具模块&#xff0c;效率提升非常明显。今天就把我的实践心得分享给大家。 I2C设备扫描功能 在连接多个I2C设备时&…...

编程新知 2026/3/28 20:21:19

VMware Unlocker：跨平台部署macOS虚拟机的创新方法 - 开发者实战指南

VMware Unlocker&#xff1a;跨平台部署macOS虚拟机的创新方法 - 开发者实战指南 【免费下载链接】unlocker 项目地址: https://gitcode.com/gh_mirrors/unloc/unlocker 一、价值定位&#xff1a;突破虚拟化技术壁垒 在x86架构硬件上运行macOS系统长期面临兼容性限制&…...

编程新知 2026/3/28 19:59:10

FastAPI GraphQL接口缓存：Response Cache优化完整指南

FastAPI GraphQL接口缓存&#xff1a;Response Cache优化完整指南 【免费下载链接】fastapi FastAPI framework, high performance, easy to learn, fast to code, ready for production 项目地址: https://gitcode.com/GitHub_Trending/fa/fastapi FastAPI是一个高性能…...

编程新知 2026/3/28 18:16:18

利用快马平台快速构建openclaw网页抓取原型，十分钟验证技术方案

最近在做一个数据采集相关的项目&#xff0c;需要快速验证网页抓取方案的可行性。经过调研发现openclaw这个Python库很适合做轻量级的网页抓取&#xff0c;但搭建完整的开发环境太费时间。后来在InsCode(快马)平台上尝试了一下&#xff0c;没想到十分钟就搞定了原型验证。这里分…...

编程新知 2026/3/28 17:23:45

【Isaac Sim 4.5.0】从安装到启动：Ubuntu环境下的疑难杂症排查与修复实录

1. 环境准备&#xff1a;从零搭建Isaac Sim的硬件与软件基础 在Ubuntu系统上部署Isaac Sim之前&#xff0c;硬件兼容性检查是避免后续问题的关键第一步。我的RTX 4090显卡在安装过程中就遇到了显存识别问题&#xff0c;后来发现是PCIe供电不足导致的性能降频。建议先用lspci -…...

编程新知 2026/3/28 15:35:00

图片木马检测与防御：如何用PHP代码识别恶意图片上传（2024最新版）

图片木马检测与防御&#xff1a;2024年PHP实战指南 在数字化浪潮中&#xff0c;图片上传功能已成为网站标配&#xff0c;但这也为攻击者提供了可乘之机。去年某电商平台因图片木马导致百万用户数据泄露的事件&#xff0c;再次敲响了安全警钟。本文将深入剖析如何用PHP构建坚不可…...

编程新知 2026/3/28 15:12:53

保姆级教程：在RHEL 8上彻底搞定X-Server远程连接，让xeyes不再报‘Error can‘t open display‘

深度解析RHEL 8远程X11连接&#xff1a;从原理到实战的全链路解决方案 当你在RHEL 8服务器上尝试通过SSH转发X11图形界面时&#xff0c;是否遇到过xeyes测试程序报出"Error: Cant open display"的困扰&#xff1f;这看似简单的错误背后&#xff0c;实际上隐藏着新版R…...

编程新知 2026/3/28 15:10:52