javascript - 使用一个 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

不完全是。您需要发单FormData data 中的对象$.ajax 的属性(property)称呼。为此，您可以使用 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，也可以简化此操作文件输入的属性，通过提供对 <form> 的引用元素到 FormData 的构造函数对象:

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

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