Dropzonejs如何在按下提交按钮时发送表单字段并上传文件答案

【问题标题】：Dropzonejs How to send form fields and upload the file when submit button is pressedDropzonejs如何在按下提交按钮时发送表单字段并上传文件
【发布时间】：2016-02-23 08:19:44
【问题描述】：

我是 jQuery 和 Dropzone.js 的新手，所以，我的问题是我无法使用上传的文件发送表单数据。这是我的代码：

表格：

<form class="form-horizontal" id="validation-form" method="get">

  <div class="form-group">
    <label class="control-label col-xs-12 col-sm-3 no-padding-right" for="carrier">Carrier</label>

    <div class="col-xs-12 col-sm-6">
      <select id="carrier" name="carrier" class="select2" data-placeholder="Select...">
        <option value="">&nbsp;</option>
        <option value="FEDEX">FEDEX</option>
        <option value="UPS">UPS</option>
        <option value="DHL">DHL</option>
        <option value="USPS">USPS</option>
        <option value="Others">Others</option>
      </select>
    </div>
  </div>

拖放区部分：

<div id="dropzone" class="dropzone alert alert-success ">
  <div class="dz-message dropzone-previews">
    <h2 lighter block green>Drag PDF.</h2>
    <span class="glyphicon glyphicon-send"></span>
  </div>
</div>

这是我的dropzone脚本代码：

<script type="text/javascript" >
  $(document).ready(function() {
    Dropzone.autoDiscover = false;
    $("#dropzone").dropzone({
      url: "uploads.php",
      autoProcessQueue: false,
      previewsContainer: ".dropzone-previews",
      uploadMultiple: false,
      addRemoveLinks: false,
      //addRemoveLinks: true,
      maxFiles: 1,
      maxFileSize: 1000,
      dictResponseError: "Ha ocurrido un error en el server",
      acceptedFiles: 'application/pdf',
    });
  });
</script>

这就是能够发送表单数据的ajax。

submitHandler: function(form, file) {
    $("#loading").html('<img src="imagenes/cargando.gif" width="50" height="50" /><br /><a href="#">Grabando Pre-Alerta</a>');

    $.ajax({
      type: 'POST',
      url: "uploads.php",
      data: {
        carrier: $("#carrier").val(),
        store: $("#tienda").val(),
        valor: $("#valor").val(),
        descripcion_envio: $("#confirmacion").val(),
        tracking_number: $("#tracking").val()
      },
      dataType: 'json',
      success: function(data) {


        $("#loading").html('');
        if (data.resultado == "false") {
          $('#texto_popup_error').html("Usuario o contraseña incorrectos");
          $('#errorIngreso').modal('show')
        } else {
          if (data.no_prealerta == "0") {
            $('#texto_popup_error').html("Error al grabar la PreAlerta o bien ya fue grabada. Intente de nuevo. Si tiene el mismo error su Tracking Number ya fue grabado.");
            $('#errorIngreso').modal('show')
          } else {
            document.getElementById("tienda").value = "";
            document.getElementById("valor").value = "";
            document.getElementById("confirmacion").value = "";
            document.getElementById("tracking").value = "";

            $('#texto_popup_error').html("No. de alerta generada: " + data.no_prealerta);
            $('#errorIngreso').modal('show')

          }
        }

      }
    });
  },
  invalidHandler: function(form) {}
});

所以，问题是如何在按下提交按钮的同时从 .ajax 上传文件和发送数据。

【问题讨论】：

标签： php jquery html ajax dropzone.js

【解决方案1】：

您可以捕获dropzone 函数的sending 事件并将您的表单值直接附加到它，而不是调用一个全新的ajax 请求：

$("#dropzone").dropzone({
    url: "uploads.php",
    //....etc
    sending: function(file, xhr, formData) {
       formData.append("carrier", $('#carrier').val());
       formData.append("store", $('#tienda').val());
       formData.append("valor", $('#valor').val());
       formData.append("descripcion_envio", $('#confirmacion').val());
       formData.append("tracking_number", $('#tracking').val()); 
    }
    //...etc
});

【讨论】：

你知道吗？如何调用 $("#dropzone").dropzone autoProcessQueue:();？在 submitHandler 中：函数（表单、文件）

【解决方案2】：

Dropzone 有不同的事件，其中之一是“发送”

你可以这样做：

$(document).ready(function(){
    Dropzone.autoDiscover = false;
    $("#dropzone").dropzone({
        url: "uploads.php",
        autoProcessQueue: false,
        previewsContainer: ".dropzone-previews",
        uploadMultiple: false,
        addRemoveLinks: false,
        //addRemoveLinks: true,
        maxFiles: 1,
        maxFileSize: 1000,
        dictResponseError: "Ha ocurrido un error en el server",
        acceptedFiles: 'application/pdf',
        init: function () {
            //append the data in the formData object.
            this.on("sending", function (file, xhr, formData, e) {
                formData.append("carrier", $('#carrier').val());
                formData.append("store", $('#tienda').val());
                formData.append("valor", $('#valor').val());
                formData.append("descripcion_envio", $('#confirmacion').val());
                formData.append("tracking_number", $('#tracking').val()); 
            }
        }                                        
    });
 });

【讨论】：