使用一次 ajax 调用上传 xml 文件和图像文件以及相同的提交

Question

我想使用一个 ajax 发送上传的图像并上传 XML 到 PHP 文件。我用了两个表单数据，这样的做法对吗

<input type="file" class="form-control-file" name="fileToUpload" id="uploadFile"/>
<input type="file" name="imageToUpload" id="uploadImg"/>
<input type="submit" id="upload_xml" name="transcriptform" value="Upload File" class="btn btn-info">

Ajax 通话：

$('#upload_xml').on('click', function() {
   var file_data = $('#uploadFile').prop('files')[0];   
   var form_data = new FormData();
   form_data.append('file', file_data);

   var img_data = $('#uploadImg').prop(files('files')[0];
   var img_form = new FormData();
   img_form.append('img', img_data);

         $.ajax({
             url: "get_old_contents.php",
           //dataType: 'script',
           //cache: false,
             contentType: false,
             processData: false,
             data: form_data,img_form;      //is this correct                  
             type: 'post',
             complete: function(response){
             $('#res').html('Your files are uploaded successfully!');                
          }
      });
  });

Answer 1

不完全是。您需要在 $.ajax 调用的 data 属性中发送单个 FormData 对象。为此，您可以使用 append() 将两个文件添加到一起，如下所示：

$('#yourForm').on('submit', function(e) {
   e.preventDefault();
   var form_data = new FormData();
   var file_data = $('#uploadFile').prop('files')[0];   
   var img_data = $('#uploadImg').prop('files')[0];

   form_data.append('file', file_data);
   form_data.append('img', img_data);

   $.ajax({
     // ...
     data: form_data,
  });
});

如果您可以更改文件输入的 name 属性，您也可以简化此操作，方法是向 FormData 对象的构造函数提供对 <form> 元素的引用：

<input type="file" class="form-control-file" name="file" id="uploadFile"/>
<input type="file" name="img" id="uploadImg"/>

$('#yourForm').on('submit', function(e) {
   e.preventDefault();
   var form_data = new FormData(this);    
   $.ajax({
     // ...
     data: form_data,
  });
});

请注意，在这两种情况下，您都应该挂钩到 form 元素的 submit 事件，而不是单击按钮，并在事件参数上使用 preventDefault()停止标准表单提交的处理程序。

使用一次 ajax 调用上传 xml 文件和图像文件以及相同的提交

Uploading xml file and image file together with same submit using one ajax call

javascript

ajax

jquery

file-upload

image-uploading