【问题标题】:How to upload multiple files using dropzone.js?如何使用 dropzone.js 上传多个文件?
【发布时间】:2019-10-01 10:09:53
【问题描述】:

我的问题是当我拖放多个文件时,每个图像都称为微粒 ajax。我想多个文件上传时间只有一个ajax调用。

我想在另一个文件拖放后选择单个文件将其拖放到 dropzone 中,因此不要将文件替换为第一个我需要两个主题并单击按钮,一次保存在文件夹中一次 ajax 调用。

这是我的代码

HTML 文件

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

<div class="row">
    <form action="route.php?actionPresubmission=loanPreSubmission" class="form-horizontal dropzone" id="imageform">
    </form>
</div>

route.php

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

谢谢

【问题讨论】:

  • 不是重复的,因为在我的情况下,一个接一个地选择并一次发送多个文件@miken32
  • 你明白了吗我没有在我的代码伙伴@miken32中使用任何

标签: php drag-and-drop dropzone.js dropzone


【解决方案1】:

解释这个问题,我想你想通过一个电话上传多个文件。 为此,您需要停止默认情况下为 true 的 autoProcessQueue

脚本:

Dropzone.options.myDropzone = {
        autoProcessQueue: false, //This stops auto processing
        acceptedFiles:".png,.jpg", //Change it according to your requirement.
        init: function(){
            var submit = document.querySelector('#submit');
            mydropzone = this;
            submit.addEventListener("click", function(){
                mydropzone.processQueue();
            });
            this.on("success", function(file,response){
               alert(response);
            });
        },
    };

HTML

<form action="upload.php" class="dropzone" id="myDropzone"></form>
<div>
    <button type="button" class="btn btn-info" id="submit">Upload</button>
</div>

PHP

<?php
$folderName = 'upload/';
if(!empty($_FILES))
{
    $file = $_FILES['file']['tmp_name'];
    $fileLocation = $folderName . $_FILES['file']['name'];
    move_uploaded_file($file,$fileLocation);
} ?>

希望这对你有帮助:)

【讨论】:

    猜你喜欢
    • 2015-09-13
    • 2016-12-23
    • 2014-11-21
    • 2019-10-10
    • 2017-11-14
    • 1970-01-01
    • 1970-01-01
    • 2014-06-28
    • 2020-08-15
    相关资源
    最近更新 更多