Dropzonejs How to send form fields and upload the

问题:

I'm new in jQuery and Dropzone.js, So, my issue is that I'm unable to send form data with uploaded file. this is my code:

Form:

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

Dropzone Part:

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

This is my script code of the 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>

And this is the ajax that is able to send the data of the form.

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

So, the question is how to upload file and send the data from .ajax at the same time when press submit button.

回答1:

Instead of invoking an entirely new ajax request, you can just capture the sending event of the dropzone function and append your form values directly to it:

$("#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
});

回答2:

Dropzone has different events and one of them is "sending"

You can do something like this:

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