我想添加一个按钮上传到我的 dropzone 文件 uploader 。目前它是在选择文件或将文件拖到拖放区后直接上传文件。我想做的是: 1. 选择或拖动要上传的文件。 2. 验证 3. 点击或按下上传按钮上传文件。

注意:只有在按下上传按钮后才会上传文件。

这是我的表格

<form id='frmTarget' name='dropzone' action='upload_files.php' class='dropzone'>
   <div class='fallback'>
      <input name='file' type='file' multiple />
   </div>
   <input id='refCampaignID' name='refCampaignID' type='hidden' value=\ "$rowCampaign->CampaignID\" />
</form>

这是我的JS

Dropzone.options.frmTarget = 
    {
            url: 'upload_files.php',
            paramName: 'file',
            clickable: true,
            maxFilesize: 5,
            uploadMultiple: true, 
            maxFiles: 2,
            addRemoveLinks: true,
            acceptedFiles: '.png,.jpg,.pdf',
            dictDefaultMessage: 'Upload your files here',
            success: function(file, response)
            {
                setTimeout(function() {
                    $('#insert_pic_div').hide();
                    $('#startEditingDiv').show();
                }, 2000);
            }
        };

这是我的 php post 请求

 foreach ($_FILES["file"] as $key => $arrDetail) 
   {
      foreach ($arrDetail as $index => $detail) {
         //print_rr($_FILES["file"][$key][$index]);
         $targetDir = "project_images/";
         $fileName = $_FILES["file"]['name'][$index];
         $targetFile = $targetDir.$fileName;

         if(move_uploaded_file($_FILES["file"]['tmp_name'][$index],$targetFile))
         {
            $db = new ZoriDatabase("tblTarget", $_REQUEST["TargetID"], null, 0);
            $db->Fields["refCampaignID"] = $_REQUEST["refCampaignID"];
            $db->Fields["strPicture"] = $fileName;
            $db->Fields["blnActive"] = 1;
            $db->Fields["strLastUser"] = $_SESSION[USER]->USERNAME;
            $result = $db->Save();

            if($result->Error == 1){
               return "Details not saved.";
            }else{
               return "Details saved.";
            }
         }else{
            return "File not uploaded.";
         }
      }
   }

最佳答案

你需要:

1. 添加一个按钮:

   <button type="submit" id="button" class="btn btn-primary">Submit</button>
   

2. 告诉 Dropzone 不要在您放下文件时自动上传文件，默认情况下会自动上传。这是用 the autoProcessQueue config option 完成的:

   autoProcessQueue: false
   

3. 由于 Dropzone 现在不会自动上传文件，您需要在单击按钮时手动告诉它这样做。所以你需要一个按钮点击的事件处理程序，它告诉 Dropzone 进行上传:

   $("#button").click(function (e) {
       e.preventDefault();
       myDropzone.processQueue();
   });
   

4. 这将只发布上传的文件，没有任何其他输入字段。您可能想要发布所有字段，例如您的 refCampaignID、CSRF token (如果有的话)等。为此，您需要在发送前将它们复制到 POST 中。 Dropzone 有一个 sending event在发送每个文件之前调用它，您可以在其中添加回调:

   this.on('sending', function(file, xhr, formData) {
       // Append all form inputs to the formData Dropzone will POST
       var data = $('form').serializeArray();
       $.each(data, function(key, el) {
           formData.append(el.name, el.value);
       });
   });
   

综合起来:

Dropzone.options.frmTarget = {
    autoProcessQueue: false,
    url: 'upload_files.php',
    init: function () {

        var myDropzone = this;

        // Update selector to match your button
        $("#button").click(function (e) {
            e.preventDefault();
            myDropzone.processQueue();
        });

        this.on('sending', function(file, xhr, formData) {
            // Append all form inputs to the formData Dropzone will POST
            var data = $('#frmTarget').serializeArray();
            $.each(data, function(key, el) {
                formData.append(el.name, el.value);
            });
        });
    }
}

关于javascript - 上传时的 Dropzone 提交按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46728205/