php+html+js+ajax实现文件上传
php+html+js+ajax实现文件上传
目录
一、表单单文件上传
1、上传页面
2、接受文件上传php
二、表单多文件上传
1、上传页面
2、接受文件上传php
三、表单异步xhr文件上传
1、上传页面
2、接受文件上传php
四、表单异步ajax文件上传
1、上传页面
2、接受文件上传php
一、表单单文件上传
1、上传页面
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<head><title>文件上传</title>
</head>
<body>
<h1>文件上传</h1>
<form action="upload.php" method="POST" enctype="multipart/form-data"><input type="file" name="fileToUpload"><input type="submit" value="上传文件">
</form>
</body>
</html>2、接受文件上传php
<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {$targetDir = "uploads/"; // 上传文件保存的目录$targetFile = $targetDir . basename($_FILES["fileToUpload"]["name"]);$uploadOk = 1; // 上传状态，1表示成功，0表示失败$imageFileType = strtolower(pathinfo($targetFile, PATHINFO_EXTENSION)); // 上传文件的扩展名// 检查文件是否为真实的图像文件if (isset($_POST["submit"])) {$check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);if ($check !== false) {echo "文件是一个有效的图像 - " . $check["mime"] . ".";$uploadOk = 1;} else {echo "文件不是一个有效的图像.";$uploadOk = 0;}}// 检查文件是否已存在if (file_exists($targetFile)) {echo "对不起，文件已存在.";$uploadOk = 0;}// 检查文件大小if ($_FILES["fileToUpload"]["size"] > 500000) {echo "对不起，文件太大.";$uploadOk = 0;}// 允许上传的文件格式$allowedExtensions = array("jpg", "jpeg", "png", "gif");if (!in_array($imageFileType, $allowedExtensions)) {echo "对不起，仅允许上传 JPG, JPEG, PNG 和 GIF 文件.";$uploadOk = 0;}// 检查上传状态if ($uploadOk == 0) {echo "对不起，文件上传失败.";} else {if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $targetFile)) {echo "文件上传成功.";} else {echo "对不起，文件上传失败.";}}
}
?>
二、表单多文件上传
1、上传页面
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<head><title>文件上传示例</title>
</head>
<body>
<form action="upload.php" method="post" enctype="multipart/form-data"><input type="file" name="files[]" multiple><input type="submit" value="上传文件">
</form>
</body>
</html>2、接受文件上传php
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {$files = $_FILES["files"];// 检查是否有文件被上传if (!empty($files)) {// 循环处理每个上传的文件for ($i = 0; $i < count($files["name"]); $i++) {$file_name = $files["name"][$i];$file_tmp = $files["tmp_name"][$i];$file_size = $files["size"][$i];$file_error = $files["error"][$i];// 检查文件是否上传成功if ($file_error == UPLOAD_ERR_OK) {// 指定文件保存的路径和文件名$target_dir = "uploads/";$target_file = $target_dir . basename($file_name);// 将文件从临时目录移动到指定路径if (move_uploaded_file($file_tmp, $target_file)) {echo "文件上传成功: " . $file_name . "<br>";} else {echo "文件上传失败: " . $file_name . "<br>";}} else {echo "文件上传错误: " . $file_name . "<br>";}}} else {echo "没有选择要上传的文件";}
}
?>三、表单异步xhr文件上传
1、上传页面
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<head><title>文件上传</title>
</head>
<body>
<h1>文件上传</h1>
<input type="file" id="fileToUpload" multiple>
<button onclick="uploadFiles()">上传文件</button>
<div id="progress"></div>
<div id="response"></div><script>function uploadFiles() {var input = document.getElementById('fileToUpload');var files = input.files;var formData = new FormData();for (var i = 0; i < files.length; i++) {var file = files[i];formData.append('files[]', file);}var xhr = new XMLHttpRequest();xhr.onreadystatechange = function() {if (xhr.readyState === 4 && xhr.status === 200) {document.getElementById('response').innerHTML = xhr.responseText;}};xhr.upload.onprogress = function(event) {if (event.lengthComputable) {var progress = (event.loaded / event.total) * 100;document.getElementById('progress').innerHTML = '上传进度：' + progress + '%';}};xhr.open('POST', 'upload.php', true);xhr.send(formData);}
</script>
</body>
</html>2、接受文件上传php
<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {$targetDir = "uploads/"; // 上传文件保存的目录if (!file_exists($targetDir)) {mkdir($targetDir, 0777, true); // 如果目录不存在，则创建目录}$uploadOk = 1; // 上传状态，1表示成功，0表示失败foreach ($_FILES['files']['tmp_name'] as $key => $tmp_name) {$targetFile = $targetDir . $_FILES['files']['name'][$key];$imageFileType = strtolower(pathinfo($targetFile, PATHINFO_EXTENSION)); // 上传文件的扩展名// 检查文件是否已存在if (file_exists($targetFile)) {echo "对不起，文件已存在.";$uploadOk = 0;}// 允许上传的文件格式$allowedExtensions = array("jpg", "jpeg", "png", "gif");if (!in_array($imageFileType, $allowedExtensions)) {echo "对不起，仅允许上传 JPG, JPEG, PNG 和 GIF 文件.";$uploadOk = 0;}// 检查上传状态if ($uploadOk == 0) {echo "对不起，文件上传失败.";} else {if (move_uploaded_file($tmp_name, $targetFile)) {echo "文件上传成功.";} else {echo "对不起，文件上传失败.";}}}
}
?>四、表单异步ajax文件上传
1、上传页面
<!DOCTYPE html>
<html><meta charset="UTF-8">
<head><title>文件上传示例</title><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<form id="uploadForm" enctype="multipart/form-data"><input type="file" name="fileToUpload" id="fileToUpload"><button type="submit">上传</button>
</form><script>$(document).ready(function() {$('#uploadForm').submit(function(event) {event.preventDefault();var formData = new FormData(this);$.ajax({url: 'upload.php',type: 'POST',data: formData,dataType: 'text',processData: false,contentType: false,success: function(response) {console.log('文件上传成功');},error: function() {console.log('文件上传失败');}});});});
</script>
</body>
</html>2、接受文件上传php
<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {if (isset($_FILES['fileToUpload'])) {$file = $_FILES['fileToUpload'];// 文件上传成功if ($file['error'] === UPLOAD_ERR_OK) {$fileName = $file['name'];$tempPath = $file['tmp_name'];// 将文件移动到目标文件夹move_uploaded_file($tempPath, 'uploads/' . $fileName);echo '文件上传成功';} else {echo '文件上传失败';}} else {echo '未选择文件';}
}
?>相关文章：
php+html+js+ajax实现文件上传
phphtmljsajax实现文件上传 目录 一、表单单文件上传 1、上传页面 2、接受文件上传php 二、表单多文件上传 1、上传页面 2、接受文件上传php 三、表单异步xhr文件上传 1、上传页面 2、接受文件上传php 四、表单异步ajax文件上传 1、上传页面 2、接受文件上传ph…...
日期时间参数，格式配置（SpringBoot）
介绍 在SpringBoot项目中，接口中的日期和时间类型的参数，配置格式。 日期格式 接口中常用的日期时间格式有两种： 字符串（比如：yyyy-MM-dd HH:mm:ss）时间戳（比如：1696839876955&a…...
JAVA 泛型的定义以及使用
泛型类 /*** <T> 为该类定义泛型，可以是一个或多个<T,...>* 定义的泛型可以在类中作为：* 类变量类型： T data* 类方法的入参以及返回类型 public void setData(T data)，public T getData();次数以set&a…...
Day-08 基于 Docker安装 Nginx 镜像-负载均衡
1、反向代理后，自然而然就引出了负载均衡,下面简单实现负载均衡的效果; 2、实现该效果需要再添加一个 Nginx ，所以要增加一个文件夹。 /home|---mutou|----nginx|----conf.d|----html|----conf.d2|----html3 1.创建 html3 文件夹， 新建 index…...
3、在 CentOS 8 系统上安装 PostgreSQL 15.4
PostgreSQL，作为一款备受欢迎的开源关系数据库管理系统（RDBMS），已经存在了三十多年的历史。它提供了SQL语言支持，用于管理数据库和执行CRUD操作（创建、读取、更新、删除）。 由于其卓越的健壮性…...
sap 一次性供应商 供应商账户组 临时供应商 ＜转载＞
原文链接：https://blog.csdn.net/xianshengsun/article/details/132620593 sap中有一次性供应商这个名词，一次性供应商和非一次性供应商又有什么区别呢？ 有如何区分一次性供应商和非一次性供应商呢？ 1 区分一次性供应商和非一次性…...
总结html5中常见的选择器
HTML5并没有引入新的选择器类型，它仍然使用CSS选择器来选择和操作HTML元素。HTML5中仍然可以使用CSS2和CSS3中定义的各种选择器。以下是HTML5中常见的选择器类型： 1. 元素选择器（Element Selector）：使用元素名称作为选…...
Java基础面试-JDK JRE JVM
详细解释 JDK（Java Devalpment Kit）java 开发工具 JDK是Java开发工具包，它是Java开发者用于编写、编译、调试和运行Java程序的核心组件。JDK包含了Java编程语言的开发工具和工具集，以及Java标准库和其他一些必要的文件。JDK中的…...
OpenCV实现图像傅里叶变换
傅里叶变换 dftcv.dft(img_float32,flagscv.DFT_COMPLEX_OUTPUT): flags:标志位，指定变换类型，cv.DFT_COMPLEX_OUTPUT会返回复数结果。 傅立叶变换，将输入的图像从空间域转换到频率域。 返回结果: 此函数返回一个复杂数值数组，…...
快手新版本sig3参数算法还原
Frida Native层主动调用 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81…...
Linux 安全 - LSM机制
文章目录 前言一、LSM起源二、LSM简介2.1 MAC2.2 LSM特征 三、Major and Minor LSMs3.1 Major LSMs3.2 Minor LSMs3.3 BPF LSM 四、LSM 框架五、LSM Capabilities Module六、LSM hooks 说明参考资料 前言 在这两篇文章中介绍了 Linux 安全机制 Credentials ： Linu…...
uni-app：实现简易自定义下拉列表
效果 代码 <template><view><view class"dropdown-trigger" tap"showDropdown">{{ selectedItem }}</view><view class"dropdown-list" v-if"showList"><view class"dropdown-item" v-f…...
排序算法——直接插入排序
一、介绍 插入排序就是将前两个元素排好，再将第三个元素通过与前边的元素比较后插入适当的位置，再将第四个元素插入，不断重复插入与前边元素比较的操作，直到将元素都排列好。 演示如下： 视频演示：…...
手动抄表和自动抄表优缺点对比
随着科技的发展，自动抄表技术已经越来越成熟，被广泛应用于各个领域。然而，手动抄表在一些特定场景下仍然具有一定的优势。本文将从手动抄表和自动抄表的优缺点入手，对比分析它们的应用场景和使用价值。 1.成本低：手动抄…...
HiSilicon352 android9.0 emmc添加新分区
添加新分区 从emmc中单独划分出一个分区，用来存储相关数据（可用于存储照片，视频，音乐和文档等）或者系统日志log，从而不影响到其他分区。 实现方法： device/hisilicon/Hi3751V350/etc/Hi3751V3…...
networkX-04-查找k短路
文章目录 1.构建图2.使用networkX查找最短路径3.自己构建方法 教程仓库地址：github networkx_tutorial import networkx as nx import matplotlib.pyplot as plt1.构建图 # 创建有向图 G nx.DiGraph()# 添加带权重的边 edges [(0, 1, 1), (0, 2, 2), (1, 2, 1), …...
Linux虚拟机搭建RabbitMQ集群
普通集群模式，意思就是在多台机器上启动多个 RabbitMQ 实例，每台机器启动一个。创建的 queue，只会放在一个 RabbitMQ 实例上，但是每个实例都同步 queue 的元数据（元数据可以认为是 queue 的一些配置信息，通…...
C之fopen/fclose/fread/fwrite/flseek
一、C中文件操作简介 c中的文件操作大致和linux的文件操作类似，但是毕竟是不同的API，所以会有些差异。部分差异会在下面的案例中体验 二、fopen open的参数有两个一个是文件名，一个是模式选择，不同open函数，open中的模…...
3D机器视觉：解锁未来的立体视野
原创 | 文 BFT机器人 机器视觉领域一直在不断演进，从最初的二维图像处理，逐渐扩展到了更复杂的三维领域，形成了3D机器视觉。3D机器视觉技术的涌现为计算机系统带来了全新的感知和理解能力，这一领域的发展正日益受到广泛关注。本文…...
大端字节序存储 | 小端字节序存储介绍
为什么存储的顺序有些变动呢？ 大小端的介绍 我们在创建变量时，操作系统就会给你分配空间，比如你创建了【short/int/double/float】的变量，这些变量的类型都是大于1个字节的，操作系统会根据你这个变量的类型ÿ…...
eNSP-Cloud(实现本地电脑与eNSP内设备之间通信)
说明： 想象一下，你正在用eNSP搭建一个虚拟的网络世界，里面有虚拟的路由器、交换机、电脑（PC）等等。这些设备都在你的电脑里面“运行”，它们之间可以互相通信，就像一个封闭的小王国。 但是&#…...
` 方法)
深入浅出：JavaScript 中的 `window.crypto.getRandomValues()` 方法
深入浅出：JavaScript 中的 window.crypto.getRandomValues() 方法 在现代 Web 开发中，随机数的生成看似简单，却隐藏着许多玄机。无论是生成密码、加密密钥，还是创建安全令牌，随机数的质量直接关系到系统的安全性。Jav…...
Qt Widget类解析与代码注释
#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码，写上注释 当然可以！这段代码是 Qt …...
vue3 字体颜色设置的多种方式
在Vue 3中设置字体颜色可以通过多种方式实现，这取决于你是想在组件内部直接设置，还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法： 1. 内联样式 你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...
MySQL 8.0 OCP 英文题库解析（十三）
Oracle 为庆祝 MySQL 30 周年，截止到 2025.07.31 之前。所有人均可以免费考取原价245美元的MySQL OCP 认证。 从今天开始，将英文题库免费公布出来，并进行解析，帮助大家在一个月之内轻松通过OCP认证。 本期公布试题111~120 试题1…...
涂鸦T5AI手搓语音、emoji、otto机器人从入门到实战
“🤖手搓TuyaAI语音指令 😍秒变表情包大师，让萌系Otto机器人🔥玩出智能新花样！开整！” 🤖 Otto机器人 → 直接点明主体 手搓TuyaAI语音 → 强调 自主编程/自定义 语音控制（TuyaAI…...
第 86 场周赛：矩阵中的幻方、钥匙和房间、将数组拆分成斐波那契序列、猜猜这个单词
Q1、[中等] 矩阵中的幻方 1、题目描述 3 x 3 的幻方是一个填充有 从 1 到 9 的不同数字的 3 x 3 矩阵，其中每行，每列以及两条对角线上的各数之和都相等。 给定一个由整数组成的row x col 的 grid，其中有多少个 3 3 的 “幻方” 子矩阵&am…...
与常用工具深度洞察App瓶颈)
iOS性能调优实战：借助克魔(KeyMob)与常用工具深度洞察App瓶颈
在日常iOS开发过程中，性能问题往往是最令人头疼的一类Bug。尤其是在App上线前的压测阶段或是处理用户反馈的高发期，开发者往往需要面对卡顿、崩溃、能耗异常、日志混乱等一系列问题。这些问题表面上看似偶发，但背后往往隐藏着系统资源调度不当…...
Kafka入门-生产者
生产者 生产者发送流程： 延迟时间为0ms时，也就意味着每当有数据就会直接发送 异步发送API 异步发送和同步发送的不同在于：异步发送不需要等待结果，同步发送必须等待结果才能进行下一步发送。 普通异步发送 首先导入所需的k…...
PostgreSQL——环境搭建
一、Linux # 安装 PostgreSQL 15 仓库 sudo dnf install -y https://download.postgresql.org/pub/repos/yum/reporpms/EL-$(rpm -E %{rhel})-x86_64/pgdg-redhat-repo-latest.noarch.rpm# 安装之前先确认是否已经存在PostgreSQL rpm -qa | grep postgres# 如果存在࿰…...