Dropzone在上传时提交按钮

我想在我的dropzone文件上传器中添加一个按钮上传。 目前，在选择或拖动文件到dropzone区域后，它会直接上传文件。 我想要做的是：1。选择或暂停要上传的文件。 2.validation3.点击或按下上传按钮上传文件。

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

这是我的表格 

 
  
 CampaignID\" />

这是我的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); } };

这是我的phppost请求 

  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. 添加一个按钮：

  2. 删除时，告诉Dropzone 不要自动上传文件，因为默认情况下会这样。 这是通过autoProcessQueue配置选项完成的 ： 

     autoProcessQueue: false

  3. 由于Dropzone现在不会自动上传文件，因此您需要在单击按钮时手动告诉它执行此操作。 所以你需要一个事件处理程序来点击该按钮，告诉Dropzone进行上传： 

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

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

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