使用 DropzoneJs 发送单独的输入类型文件答案

【问题标题】：sending a separate input type file with DropzoneJs使用 DropzoneJs 发送单独的输入类型文件
【发布时间】：2018-01-03 14:09:05
【问题描述】：

我在我的注册表单中使用 dropzoneJS。我有带有 DropZone 的表单和一个单独的输入文件类型。我可以将其他输入文本与 dropzone 一起发送，但输入文件类型不能。我正在使用 AJAX 请求来上传文件并发送附加数据。

这是我的表格

<form enctype="multipart/form-data">
  <input type="text" name="name" id="name" placeholder="Full Name" >
  <input type="email" name="email" id="email" placeholder="Email Address" >
  <input type="password" name="password" id="password" >

  <input type="file" name="avatar" id="avatar" >

  <div class="dropzone-container file_upload" id="file_upload_container">
      <div class="dz-message default-dropzone-text" data-dz-message>
         <span class="text-default">Drag or click here to upload your credentials (i.e. Certificates, CV etc.)</span>
       </div>
       <div class="fallback">
            <input name="file[]" type="file" id="file" multiple required />
       </div>
  </div>
  <button type="button" id="submit">Submit</button>
</form>

这是我的 javascript 代码

Dropzone.autoDiscover = false;
var myDropzone = new Dropzone("div.file_upload", {
    url : sendData,
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
    },
    autoProcessQueue: false,
    addRemoveLinks: true,
    uploadMultiple: true,
    parallelUploads: 100,
    maxFiles: 100,
    acceptedFiles: 'application/pdf, .doc, .docx, .pub, .jpeg, .jpg, .png, .gif, .xls, .xlsx, .ppt, .pptx',
    maxFilesize: 500,
    paramName: "file",
    init: function(){
        $("#submit").click(function(e) {
          e.preventDefault();
          e.stopPropagation();
          myDropzone.processQueue();
        })
        this.on("sendingmultiple", function(data, xhr, formData) {
            formData.append("name", $("#name").val());
            formData.append("email", $("#email").val());
            formData.append("password",$('#password').val());
            formData.append("avatar",$('#avatar'));
        });
        this.on("successmultiple", function(files, response) {
            console.log(response);
        });
        this.on("errormultiple", function(files, response) {
          myDropzone.removeAllFiles();
        });
    }
});

【问题讨论】：

标签： javascript jquery ajax dropzone.js

【解决方案1】：

好的，我知道了，我试图向 API 发送一个对象而不是实际的文件，所以我替换了

formData.append("avatar",$('#avatar'));

与

formData.append("avatar",$('#avatar')[0].files[0]);

它成功了！

【讨论】：