php+ajax 文件上传代码实例-猿码集

PHP+AJAX文件上传代码实例

1. 概述

在 Web 开发中，文件上传是非常常见的需求。本文将介绍使用 PHP 和 AJAX 实现文件上传的方式。

2. 实现步骤

2.1 HTML表单

文件上传首先要用表单来实现。表单中需要添加一个``的控件，其他的控件根据具体需求添加。

下面是一个基本的 HTML 表单：

<form id="uploadForm" action="" method="POST" enctype="multipart/form-data">
    <input type="file" name="fileToUpload" id="fileToUpload">
    <input type="text" name="name" id="name">
    <button type="button" id="uploadBtn">上传</button>
</form>

在表单中，我们设置了一个id为`uploadForm`，是为了后面方便通过JavaScript来操作提交文件的。控件中`enctype="multipart/form-data"`是为了告诉浏览器该表单中包含二进制文件。

2.2 AJAX请求

使用 AJAX 提交文件，可以在不刷新页面的情况下完成上传。

const xhr = new XMLHttpRequest();
xhr.open('POST', form.action, true);
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
xhr.send(formdata);

这里我们使用了 `XMLHttpRequest` 对象，首先对该对象进行初始化。然后通过 setRequestHeader 方法设置请求头，告诉服务器这是一个 AJAX 请求。

2.3 PHP后台

PHP 后台处理文件上传需要以下几步：

1. 获取图片名称

2. 检查上传文件的类型和大小

3. 将文件从临时文件夹移动到目标文件夹

$target_dir = "uploads/"; //保存文件的目标文件夹
$target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
$uploadOk = 1;
$imageFileType = strtolower(pathinfo($target_file, PATHINFO_EXTENSION));
// 检查文件大小
if ($fileSize > 500000) {
    echo "Sorry, your file is too large.";
    $uploadOk = 0;
}
// 保存文件到指定位置
if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) {
    echo "The file " . basename($_FILES["fileToUpload"]["name"]) . " has been uploaded.";
}

3. 其他注意事项

3.1 设置最大上传文件大小

在 PHP 中，设置最大的上传文件可以通过 php.ini 文件进行设置，例如设置为 100 MB：

upload_max_filesize = 100M

3.2 安全性

上传文件一定要注意安全性问题，因为上传文件会存在一些安全隐患，例如上传恶意文件和攻击等。

为此，可以在 PHP 的后台对上传文件的文件类型进行判断，可以限制其只能上传图像文件或者其他指定的可信文件类型。

同时，也需要在前端对上传的文件进行一些过滤措施，如判断文件大小、文件类型等。

3.3 其他细节

- 文件上传时不要使用全局变量。

- 如果是图片上传，建议对图片进行缩放处理，尽量不让上传的图片过大。

- 上传时文件名尽量不要出现中文。

4.总结

本文介绍了使用 PHP 和 AJAX 实现文件上传的方式，同时也分析了文件上传时的一些安全性要求，并在细节上给出了一些提示和建议。

php+ajax 文件上传代码实例