formData.append 来自不同输入文件的两个文件

Question

我正在尝试使用 JQuery、AJAX 和 PHP 从不同的输入文件框上传两个文件而不刷新页面。问题是文件没有上传，可能是因为我 form.append 这两个文件的方式或者我在 AJAX.

中定义“数据”的方式

这是我的 HTML 表格

     <form>
          <div class="col col-sm-12 mb-2">
              <label class="form-label">Cover Image</label>
              <input type="file" class="form-control" name="coverImage" id="coverImage">
          </div>
          
          <div class="col col-sm-12">
              <label class="form-label">File to Embed</label>
              <input type="file" class="form-control" name="fileToEmbed" id="fileToEmbed">
          </div>
      <button type="button" class="btn btn-primary" name="steganize" id="steganize">STEGANIZE</button>
          </form>

这是我尝试执行的代码。

$('#steganize').click(function(){
var file = $('#coverImage').prop("files")[0];
            var form = new FormData();
            form.append("coverImage", file);

            var file2 = $('#fileToEmbed').prop("files")[0];
            var form2 = new FormData();
            form2.append("fileToEmbed", file2);

            $.ajax({
                url: "steganize.php",
                type: "POST",
                data:  {form, form2},
                contentType: false,
                processData:false,
                success: function(result){
                    console.log(result);
                }
            });
});

也试过这个

$('#steganize').click(function(){
            var file = $('#coverImage').prop("files")[0];
            var file = $('#fileToEmbed').prop("files")[1];
            var form = new FormData();
            form.append("coverImage", file);

            $.ajax({
                url: "steganize.php",
                type: "POST",
                data:  form,
                contentType: false,
                processData:false,
                success: function(result){
                    console.log(result);
                }
            });

        });

不幸的是，这两个都不起作用。那么你知道正确的写法吗？我被困了几个小时。如果您能帮助我，请提前致谢。

Answer 1

您只能在 AJAX 请求中发送一个 FormData 对象，因此您的第二个示例接近正确。问题是您重新定义了 file 变量并且只附加了一个值。

此外，由于使用 [1]，您获取了在 fileToEmbed 输入中选择的 second 文件 - 我假设您的意思是获取首先.

正确的代码应该是这样的：

$('#steganize').click(function() {
  var coverImage = $('#coverImage').prop("files")[0];
  var fileToEmbed = $('#fileToEmbed').prop("files")[0];
  
  var form = new FormData();
  form.append("coverImage", coverImage);
  form.append("fileToEmbed", fileToEmbed);

  $.ajax({
    url: "steganize.php",
    type: "POST",
    data: form,
    contentType: false,
    processData: false,
    success: function(result) {
      console.log(result);
    }
  });
});

formData.append 来自不同输入文件的两个文件

formData.append two files from different input file

ajax

jquery