如何拖拽上传文件-之路教程

数据库配置（dbconfig.php）

'dbconfig.php'文件用于连接和选择数据库。
指定数据库主机名（'$dbhost'），用户名（'$dbusernam'），密码（'$dbpassword'），以及根据mysql数据库凭据的名称（'$dbname'）。

<?php 
//Database configuration 
$dbHost     = "localhost"; 
$dbUsername = "root"; 
$dbPassword = "root"; 
$dbName     = "onitroad"; 

//Create database connection 
$db = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName); 

//Check connection 
if ($db->connect_error) { 
    die("Connection failed: " . $db->connect_error); 
}

创建数据库表

要存储上载文件的信息，请在数据库中需要表。
以下SQL使用MySQL数据库中的某些基本字段创建“文件”表。

CREATE TABLE `files` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `file_name` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
 `uploaded_on` datetime NOT NULL,
 PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

自定义拖放上传

Dropzone提供了各种配置选项以自定义拖放文件上传。
以下示例通过初始化Dropzone类并自定义拖放上载，以编程方式创建Dropzone。

包括jQuery库。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

根据需要初始化Dropzone类并指定配置。

“URL” - 文件路径将为服务器端上传提交文件。
'paramname' - 文件输入字段的名称。
'maxfilesize' - 允许上传的文件的最大大小。
'maxfiles' - 允许上传的最大文件数。
'AcceptedFiles' - 逗号分隔的允许MIME类型列表。

<script>
//Disabling autoDiscover
Dropzone.autoDiscover = false;
$(function() {
    //Dropzone class
    var myDropzone = new Dropzone(".dropzone", {
        url: "upload.php",
        paramName: "file",
        maxFilesize: 2,
        maxFiles: 10,
        acceptedFiles: "image/*,application/pdf"
    });
});
</script>

定义DropzoneHTML元素并指定Dropzone类选择器。

<div class="dropzone"></div>

请注意：如果使用Dropzone类，将分配Dropzonejs的默认样式。
对于另一个ID或者类，我们需要定义自定义CSS。

拖放文件上传（index.html）

DropzoneJS库将用于集成拖放功能，因此，请先包含Dropzone JS和CSS库。

<link rel="stylesheet" type="text/css" href="js/dropzone/dropzone.min.css" />
<script type="text/javascript" src="js/dropzone/dropzone.min.js"></script>

使用Class'Dropzone'创建表单元素。
Dropzone将自动添加到此表单元素，丢弃的文件数据将发布到服务器端脚本（指定动作URL）以进行上传。

<form>标记的操作属性定义了执行服务器端上载的操作。
Dropzone类是Dropzone库的标识符。

<form action="upload.php" class="dropzone"></form>

显示上传的文件

如果要在网页上显示上载的文件，则需要从数据库中获取文件名并从服务器检索相应的文件。

包括数据库配置文件以连接和选择数据库。
从数据库中获取文件。
从服务器（上载/）中检索文件或者图像并在网页上列出它们。
由于可以上载所有类型的文件（图像，PDF，Word，视频等），因此<嵌入>标记可用于在网页上显示文件。
使用mime_content_type（）函数来检测文件的MIME类型。

<?php 
//Include the database configuration file 
require 'dbConfig.php'; 

//Get files from the database 
$query = $db->query("SELECT * FROM files ORDER BY id DESC"); 

if($query->num_rows > 0){ 
    while($row = $query->fetch_assoc()){ 
        $filePath = 'uploads/'.$row["file_name"]; 
        $fileMime = mime_content_type($filePath); 
?> 
    <embed src="<?php echo $filePath; ?>" type="<?php echo $fileMime; ?>" width="350px" height="240px" /> 
<?php } 
}else{ ?> 
    <p>No file(s) found...</p> 
<?php } ?>

将文件上传到服务器（upload.php）

Dropzone将丢弃的文件发送到服务器端脚本（'upload.php'）以处理上载过程。

使用PHP $_FILES方法检索发布的文件数据。
使用php中的move_uploaded_file（）函数将文件上传到服务器。
在数据库中插入文件信息。

<?php 
if(!empty($_FILES)){ 
    //Include the database configuration file 
    require 'dbConfig.php'; 

    //File path configuration 
    $uploadDir = "uploads/"; 
    $fileName = basename($_FILES['file']['name']); 
    $uploadFilePath = $uploadDir.$fileName; 

    //Upload file to server 
    if(move_uploaded_file($_FILES['file']['tmp_name'], $uploadFilePath)){ 
        //Insert file information in the database 
        $insert = $db->query("INSERT INTO files (file_name, uploaded_on) VALUES ('".$fileName."', NOW())"); 
    } 
} 
?>

如何拖拽上传文件

Dropzonejs是一个开源JavaScript库，可删除HTML元素。
这意味着用户可以从计算机拖动文件并将其丢弃到此HTML元素中。
DropZonejs提供了一种在Web应用程序中使用预览的预览集成拖放多个文件上载的简单方法。
Dropzone是轻量调，不依赖于任何其他jQuery库。

dropzonejs不处理文件上传功能，它通过ajax将文件发送到服务器。
我们需要使用PHP将文件上传到服务器。
在本教程中，我们将展示如何使用Dropzonejs和PHP集成拖放文件上传。

将遵循以下步骤来实现拖放文件上载功能。

可丢弃的元素从计算机中选择多个文件。
预览所选文件或者图像。
使用PHP将文件上传到服务器。
使用PHP和MySQL在数据库中插入文件信息。

使用PHP实现拖放文件上传的文件结构。

drag_drop_file_upload_with_php/
├── dbConfig.php
├── index.php
├── upload.php
├── uploads/
├── js/
│   ├── dropzone/
│   │   ├── dropzone.min.js
│   │   └── dropzone.min.css
└── css/
    └── style.css

在Dropzone中上传按钮

默认情况下，在Dropzone上删除文件后，上载立即启动。
但是我们可以通过添加按钮来更改此行为。
以下示例显示了如何启动文件上载按钮单击Dropzone。

使用“自动处理”选项和ProcessQueue方法在按钮上提交文件。
将“AutoProcessqueue”选项设置为False，告诉Dropzone不会在下降时上传文件。
调用'processqueue（）'开始发送文件的方法。

<script>
//Disabling autoDiscover
Dropzone.autoDiscover = false;
$(function() {
    //Dropzone class
    var myDropzone = new Dropzone(".dropzone", {
        url: "upload.php",
        paramName: "file",
        maxFilesize: 2,
        maxFiles: 10,
        acceptedFiles: "image/*,application/pdf",
        autoProcessQueue: false
    });

    $('#startUpload').click(function(){           
        myDropzone.processQueue();
    });
});
</script>

定义Dropzone和按钮HTML元素以触发上载过程。

<div class="dropzone"></div>
<button id="startUpload">UPLOAD</button>

日期：2020-06-02 22:15:28 来源：oir作者：oir

←如何使用删除MySQL数据库中的多个记录

PHP如何删除数组中重复的值→