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

php+html+js+ajax实现文件上传

news 2026/3/27 20:34:34

一、表单单文件上传

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…...

编程日记 2023/10/11 20:20:08

日期时间参数，格式配置（SpringBoot）

介绍在SpringBoot项目中，接口中的日期和时间类型的参数，配置格式。日期格式接口中常用的日期时间格式有两种： 字符串（比如：yyyy-MM-dd HH:mm:ss）时间戳（比如：1696839876955&a…...

编程日记 2023/10/11 20:19:06

JAVA 泛型的定义以及使用

泛型类 /*** <T> 为该类定义泛型，可以是一个或多个<T,...>* 定义的泛型可以在类中作为：* 类变量类型： T data* 类方法的入参以及返回类型 public void setData(T data)，public T getData();次数以set&a…...

编程日记 2023/10/11 20:18:06

Day-08 基于 Docker安装 Nginx 镜像-负载均衡

编程日记 2023/10/11 20:17:04

3、在 CentOS 8 系统上安装 PostgreSQL 15.4

PostgreSQL，作为一款备受欢迎的开源关系数据库管理系统（RDBMS），已经存在了三十多年的历史。它提供了SQL语言支持，用于管理数据库和执行CRUD操作（创建、读取、更新、删除）。由于其卓越的健壮性…...

编程日记 2023/10/11 20:16:01

sap 一次性供应商供应商账户组临时供应商＜转载＞

原文链接：https://blog.csdn.net/xianshengsun/article/details/132620593 sap中有一次性供应商这个名词，一次性供应商和非一次性供应商又有什么区别呢？ 有如何区分一次性供应商和非一次性供应商呢？ 1 区分一次性供应商和非一次性…...

编程日记 2023/10/11 20:15:00

总结html5中常见的选择器

HTML5并没有引入新的选择器类型，它仍然使用CSS选择器来选择和操作HTML元素。HTML5中仍然可以使用CSS2和CSS3中定义的各种选择器。以下是HTML5中常见的选择器类型： 1. 元素选择器（Element Selector）：使用元素名称作为选…...

编程日记 2023/10/11 20:13:59

Java基础面试-JDK JRE JVM

详细解释 JDK（Java Devalpment Kit）java 开发工具 JDK是Java开发工具包，它是Java开发者用于编写、编译、调试和运行Java程序的核心组件。JDK包含了Java编程语言的开发工具和工具集，以及Java标准库和其他一些必要的文件。JDK中的…...

编程日记 2023/10/11 20:12:58

OpenCV实现图像傅里叶变换

傅里叶变换 dftcv.dft(img_float32,flagscv.DFT_COMPLEX_OUTPUT): flags:标志位，指定变换类型，cv.DFT_COMPLEX_OUTPUT会返回复数结果。傅立叶变换，将输入的图像从空间域转换到频率域。返回结果: 此函数返回一个复杂数值数组&#xff0c…...

编程日记 2023/10/11 20:11:58

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…...

编程日记 2023/10/11 20:10:57

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…...

编程日记 2023/10/11 20:08:55

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…...

编程日记 2023/10/11 20:07:54

排序算法——直接插入排序

一、介绍插入排序就是将前两个元素排好，再将第三个元素通过与前边的元素比较后插入适当的位置，再将第四个元素插入，不断重复插入与前边元素比较的操作，直到将元素都排列好。演示如下： 视频演示：…...

编程日记 2023/10/11 20:05:50

手动抄表和自动抄表优缺点对比

随着科技的发展，自动抄表技术已经越来越成熟，被广泛应用于各个领域。然而，手动抄表在一些特定场景下仍然具有一定的优势。本文将从手动抄表和自动抄表的优缺点入手，对比分析它们的应用场景和使用价值。 1.成本低：手动抄…...

编程日记 2023/10/11 20:04:48

HiSilicon352 android9.0 emmc添加新分区

添加新分区从emmc中单独划分出一个分区，用来存储相关数据（可用于存储照片，视频，音乐和文档等）或者系统日志log，从而不影响到其他分区。实现方法： device/hisilicon/Hi3751V350/etc/Hi3751V3…...

编程日记 2023/10/11 20:03:47

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), …...

编程日记 2023/10/11 20:02:45

Linux虚拟机搭建RabbitMQ集群

普通集群模式，意思就是在多台机器上启动多个 RabbitMQ 实例，每台机器启动一个。创建的 queue，只会放在一个 RabbitMQ 实例上，但是每个实例都同步 queue 的元数据（元数据可以认为是 queue 的一些配置信息，通…...

编程日记 2023/10/11 20:01:44

C之fopen/fclose/fread/fwrite/flseek

一、C中文件操作简介 c中的文件操作大致和linux的文件操作类似，但是毕竟是不同的API，所以会有些差异。部分差异会在下面的案例中体验二、fopen open的参数有两个一个是文件名，一个是模式选择，不同open函数，open中的模…...

编程日记 2023/10/11 19:58:41

3D机器视觉：解锁未来的立体视野

原创 | 文 BFT机器人机器视觉领域一直在不断演进，从最初的二维图像处理，逐渐扩展到了更复杂的三维领域，形成了3D机器视觉。3D机器视觉技术的涌现为计算机系统带来了全新的感知和理解能力，这一领域的发展正日益受到广泛关注。本文…...

编程日记 2023/10/11 19:57:40

大端字节序存储 | 小端字节序存储介绍

为什么存储的顺序有些变动呢？ 大小端的介绍我们在创建变量时，操作系统就会给你分配空间，比如你创建了【short/int/double/float】的变量，这些变量的类型都是大于1个字节的，操作系统会根据你这个变量的类型&#xff…...

编程日记 2023/10/11 19:56:38

网络安全学习攻略宝典，从菜鸟到高手的必由之路

想成为一名真正的黑客到底该怎么学？ 从0开始又该从何学起呢？ 很多人想学习网络安全，却不知道从何下手。别迷茫，这篇文章为你指明方向，无论你是零基础小白，还是有一定基础想提升的人，都能从中找…...

编程新知 2026/3/27 19:36:58

图像超分新思路：拆解SCNet的‘空间移位’操作，看它如何用零参数实现3x3卷积的效果

图像超分辨率革命：零参数空间移位如何颠覆传统卷积设计当你在手机相册里翻出一张十年前的老照片，是否曾幻想过能一键修复那些模糊的像素？这正是图像超分辨率技术试图解决的难题。传统方法依赖计算密集的33卷积，而SCNet提出的&quo…...

编程新知 2026/3/27 19:34:56

老旧Mac设备焕新：使用开源工具OpenCore Legacy Patcher实现系统升级全攻略

老旧Mac设备焕新：使用开源工具OpenCore Legacy Patcher实现系统升级全攻略【免费下载链接】OpenCore-Legacy-Patcher 体验与之前一样的macOS 项目地址: https://gitcode.com/GitHub_Trending/op/OpenCore-Legacy-Patcher 一、问题诊断：评估老旧M…...

编程新知 2026/3/27 18:36:37

ThinkPad装Win10企业版后，手把手教你用PowerShell搞定Lenovo Vantage（附依赖包下载）

ThinkPad安装Win10企业版后手动部署Lenovo Vantage的完整指南当你在ThinkPad上安装了纯净的Windows 10企业版系统后，可能会发现无法通过常规方式安装Lenovo Vantage这款官方管理工具。本文将详细介绍如何通过PowerShell命令手动安装Lenovo Vantage及其所有必需的依…...

编程新知 2026/3/27 15:43:03

抖音视频批量下载效率革命：解放双手的douyin-downloader全攻略

抖音视频批量下载效率革命：解放双手的douyin-downloader全攻略【免费下载链接】douyin-downloader 项目地址: https://gitcode.com/GitHub_Trending/do/douyin-downloader 作为内容创作者，你是否曾为收集行业素材而重复点击下载按钮&#xff1f…...

编程新知 2026/3/27 15:26:57