PHP 使用Dropzone JS进行多文件上传

在本节中，我们将使用Dropzone JS来上传多个文件。当我们使用我们的项目或网站时，总是需要能够上传多个图像或创建多个文件的功能。使用多个输入框上传图像看起来不太好。实际上，我们网站的用户也不喜欢。所以我们必须尽量改进。现在，每个网站都有图片上传的功能。但是如果我们使用像Yii、Codeigniter、Laravel等PHP框架，或者PHP，那么使用Dropzone JS库是很好的选择。它是一个JavaScript库，是开源的。

使用这个库，我们可以轻松地拖放多个文件进行上传。Dropzone JS库的使用非常简单。这个库提供了验证的功能，例如特定的扩展名、最大文件上传等。在给定的示例中，我们将解释使用dropzone.js来上传多个图像并创建多个文件。在我们的示例中，我们还将使用Bootstrap来创建一个更好的布局。上传图像和创建文件的步骤如下:

创建一个名为index.php的文件
创建一个名为upload.php的文件
创建一个名为upload的文件夹

我们可以通过使用以下逐步过程来上传图像。我们已经描述了三个步骤，能够提供完整的图像上传知识。在下面的示例中，我们将使用dropzone.js的CDN进行导入。如果我们想下载它，我们可以在本地进行下载。上传图像的步骤如下:

步骤1:

在这一步中，我们将 创建index.php文件 。我们将使用根目录来创建这个文件。为了执行这个步骤，我们将使用以下代码并将其放在index.php文件中。此文件中使用了CDN来引用JS、JQuery、Bootstrap和Dropzone CSS，具体代码如下：

index.php

<!DOCTYPE html>
<html>
<head>
    <title> Multiple Image upload using dropzone.js in PHP </title>
    <script src="http://demo.javatpoint.com/plugin/jquery.js"></script>
    <link rel="stylesheet" href="http://demo.javatpoint.com/plugin/bootstrap-3.min.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.0.1/min/dropzone.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.2.0/min/dropzone.min.js"></script>
</head>
<body>

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <h2> Multiple Image Upload using dropzone.js in PHP </h2>
            <form action="upload.php" enctype="multipart/form-data" class="dropzone" id="image-upload">
                <div>
                    <h3>Upload Multiple Image By Click On Box</h3>
                </div>
            </form>
        </div>
    </div>
</div>

<script type="text/javascript">
    Dropzone.options.imageUpload = {
        maxFilesize:1,
        acceptedFiles: ".jpeg,.jpg,.png,.gif"
    };
</script>

</body>
</html>

步骤2：

在这一步中，我们将创建 upload.php 文件。我们将使用根文件夹来创建此文件。这个文件将编写图片上传的代码，代码如下所述：

upload.php

<?php

 $uploadDir = 'uploads'; if (!empty($ _FILES)) {
  $tmpFile =$ _FILES['file']['tmp_name'];
  $filename =$ uploadDir.'/'.time().'-'.  $_FILES['file']['name']; move_uploaded_file($ tmpFile,$filename);
}

?>

步骤3：

这是最后一步，在这一步中，我们将创建 上传文件夹 。在我们的示例中，我们需要储存图片。这就是为什么我们将创建一个上传文件夹。上传文件夹的名称也可以不同。我们也要小心修改upload.php文件。

现在我们上述的示例已经准备好了。所以我们将使用我们的根文件夹来运行以下命令。