使用单个请求将数据和文件提交到服务器答案

【问题标题】：Use single request for both data and file submission to server使用单个请求将数据和文件提交到服务器
【发布时间】：2021-08-04 16:48:07
【问题描述】：

一个dropzone js需要创建一个新表单，但我想使用同一个表单来发布数据和图像，我该如何实现这一点，任何想法。

<form method="POST" enctype="multipart/form-data">
  <input type="text" name="name" id="name">
  <!-- how to replace this field with dropzone but in this form in order to use the same ajax as below -->
  <input type="file" name="photo" id="photo">
  <button type="submit">send</button>
</form>

$("form").on('submit', function(e) {
  $.ajax({
    url: 'add.php',
    type: 'POST',
    data: new FormData(this),
    dataType: 'JSON',
    contentType: false,
    cache: false,
    processData: false,
  }).done(function(data) {
    if (data.success == false) {
      if (data.errors.name) {
        $('#name').append('<span class="text-danger">' + data.errors.name + '</span>');
      }
      if (data.errors.photo) {
        $('#photo').append('<span class="text-danger">' + data.errors.photo + '</span>');
      }
    }
  });
  
  e.preventDefault();
});

【问题讨论】：

标签： php jquery ajax dropzone.js

【解决方案1】：

您需要将 dropzone 文件单独附加到 FormData。这是我的解决方案，

$(document).ready(function () {
    // get a reference to photo dropzone
    var photoDropzone = Dropzone.forElement('#photo-dropzone');

    $("form").submit(function (e) {
        e.preventDefault();
        // create the complete FormData here
        var fd = new FormData(this);
        // append dropzone files into the form data
        for (var i = 0; i < photoDropzone.files.length; i++) {
            fd.append('file[]', photoDropzone.files[i]);
        }

        $.ajax({
            url: 'add.php',
            type: 'POST',
            data: fd,
            dataType: 'JSON',
            contentType: false,
            cache: false,
            processData: false,
        }).done(function (data) {
            console.log('done');
            if (data.success == false) {
                if (data.errors.name) {
                    $('#name').append('<span class="text-danger">' + data.errors.name + '</span>');
                }
                if (data.errors.photo) {
                    $('#photo').append('<span class="text-danger">' + data.errors.photo + '</span>');
                }
            }
        });
    });
})

<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.2/dropzone.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.2/basic.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.2/min/dropzone.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
    // prevent auto processing in dropzone configuration
    Dropzone.options.photoDropzone = {
        autoProcessQueue: false
    };
</script>

<form method="POST" enctype="multipart/form-data">
    <input type="text" name="name" id="name">
    <button type="submit">send</button>
</form>
<!-- add dropzone form in the same page -->
<form action="add.php" class="dropzone" id="photo-dropzone">

【讨论】：