上载Dropzone提交按钮 [英] Dropzone Submit Button on Upload

问题描述

我想将按钮上传添加到我的dropzone文件上传器.当前，它是在选择文件或将其拖到dropzone区域后直接上传文件.我想做的是: 1.选择或隐藏要上传的文件. 2.验证 3.点击或按上载按钮以上传文件.

I want to add a button upload to my dropzone file uploader. currently it's uploading the file directly after selecting or dragging the file into the dropzone area. What I want to do is: 1. Select or drap file to be uploaded. 2. Validate 3. Hit or press the button upload to upload the file.

N.B:仅在按下上传"按钮后才上传文件.

N.B: File is only being uploaded after pressing the button upload.

这是我的表格

<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帖子请求

Here is my php post request

 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. 添加按钮:

1. Add a button:

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

告诉Dropzone not 可以在您拖放文件时自动上传文件，因为默认情况下会自动上传.这是通过 autoProcessQueue配置选项:

Tell Dropzone not to automatically upload the file when you drop it, as it will by default. That's done with the autoProcessQueue config option:

autoProcessQueue: false

由于Dropzone现在不会自动上传文件，因此需要在单击按钮时手动告诉它执行此操作.因此，您需要为该按钮单击提供事件处理程序，该事件处理程序告诉Dropzone进行上传:

Since Dropzone will now not auto-upload the files, you need to manually tell it to do that when you click your button. So you need an event handler for that button click, which tells Dropzone to do the upload:

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

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

That will just POST the uploaded file, without any of your other input fields. You probably want to post all fields, eg your refCampaignID, a CSRF token if you have one, etc. To do that, you need to copy them into the POST before sending. Dropzone has a sending event which is called just before each file is sent, where you can add a callback:

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);
            });
        });
    }
}

这篇关于上载Dropzone提交按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！