PHP dropzone.js 上传文件|极客笔记

PHP dropzone.js 上传文件

在网页开发中，经常会遇到需要上传文件的情况。而Dropzone.js是一个优秀的前端文件上传插件，可以方便地实现文件的拖拽上传。结合PHP后端，则可以完美实现文件上传功能。本文将详细讲解如何使用PHP和Dropzone.js实现文件上传功能。

环境准备

在开始之前，确保你的环境已经具备以下条件：

一个支持PHP的服务器环境
一个文本编辑器，如VS Code、Sublime Text等
最新版本的Dropzone.js插件文件

创建上传文件页面

首先，我们需要创建一个HTML文件上传页面，并引入Dropzone.js和相关的CSS文件。下面是一个简单的文件上传页面示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文件上传</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dropzone/dist/min/dropzone.min.css">
</head>
<body>
<div id="myDropzone" class="dropzone"></div>
</body>
<script src="https://cdn.jsdelivr.net/npm/dropzone/dist/min/dropzone.min.js"></script>
</html>

在上面的示例中，我们引入了Dropzone.js的CSS和JS文件，并创建了一个id为myDropzone的div，这是Dropzone.js的容器。

处理文件上传

接下来，我们需要编写PHP代码来处理文件上传。我们可以在同一个文件中处理HTML页面和PHP代码，也可以分别创建两个文件。

<?php
if( $_SERVER['REQUEST_METHOD'] == "POST"){$ uploadDir = 'uploads/'; // 上传文件保存的目录
     $uploadFile =$ uploadDir . basename( $_FILES['file']['name']); if(move_uploaded_file($ _FILES['file']['tmp_name'], $uploadFile)){
        echo "文件上传成功！";
    } else {
        echo "文件上传失败！";
    }
}
?>

在上面的PHP代码中，我们首先判断请求的方法是否为POST，如果是POST请求，则会将上传的文件移动到指定的目录下。如果移动成功，则输出”文件上传成功！”，否则输出”文件上传失败！”。

完整的文件上传页面

下面是一个完整的文件上传页面，包含HTML、JS和PHP代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文件上传</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dropzone/dist/min/dropzone.min.css">
</head>
<body>
<form action="" class="dropzone" id="myDropzone"></form>
<script src="https://cdn.jsdelivr.net/npm/dropzone/dist/min/dropzone.min.js"></script>
</body>
</html>

<?php
if( $_SERVER['REQUEST_METHOD'] == "POST"){$ uploadDir = 'uploads/'; // 上传文件保存的目录
     $uploadFile =$ uploadDir . basename( $_FILES['file']['name']); if(move_uploaded_file($ _FILES['file']['tmp_name'], $uploadFile)){
        echo "文件上传成功！";
    } else {
        echo "文件上传失败！";
    }
}
?>

在上面的代码中，我们将HTML代码和PHP代码合并在同一个文件中，当用户上传文件后，会执行PHP代码来处理文件上传。