javascript - 发送上传的文件和其他数据，两者都使用一个ajax调用

Question

我尝试在不使用表单操作的情况下发送上传的文件和输入文本数据(有 5 个文本字段)。这是正确的方法吗？如果我仅发送 form_data 或 {} 中的值而不是同时发送两者，则此代码可以正常工作。这是我的代码:

actionval = document.getElementById('action').value;
titleval = document.getElementById('title').value;
stageval = document.getElementById('stage').value;
substageval = document.getElementById('substage').value;
agentval = document.getElementById('agent').value;

var file_data = $('#uploadFileTrans').prop('files')[0];   
var form_data = new FormData();
form_data.append('file', file_data);
$.ajax({
    url: "tabs/get_old_contents.php",
    data: {form_data, insert1:actionval, insert2:titleval, insert3:stageval, insert4:substageval, insert5:agentval},                         
    type: 'post',
    complete: function(response){
    alert('Details added successfully!');
            $('#restrans').html(response.responseText);
            // console.log('hey', response.responseText);
            // editor.setValue(response.responseText);
    }
 });

php 是这样的:

$action = (isset($_POST['insert1'])?$_POST['insert1']:"");
$title = (isset($_POST['insert2'])?$_POST['insert2']:"");
$stage = (isset($_POST['insert3'])?$_POST['insert3']:"");
$substage = (isset($_POST['insert4'])?$_POST['insert4']:"");
$agent = (isset($_POST['insert5'])?$_POST['insert5']:"");
$date = date("Y/m/d");

这是上传，如果ajax的数据字段中只有form_data，则效果很好

move_uploaded_file($_FILES['file']['tmp_name'], $target_path);

Answer 1

您不能将 FormData 放入通过 AJAX 发送的对象内。您需要将其他参数添加到 FormData 对象，并将其单独用作数据。

var form_data = new FormData();
form_data.append('file', file_data);
form_data.append('insert1', actionval);
form_data.append('insert2', titleval);
form_data.append('insert3', stageval);
form_data.append('insert4', substageval);
form_data.append('insert5', agentval);
$.ajax({
  url: "tabs/get_old_contents.php",
  data: form_data,
  processData: false,
  type: 'post',
  complete: function(response) {
    alert('Details added successfully!');
    $('#restrans').html(response.responseText);
    // console.log('hey', response.responseText);
    // editor.setValue(response.responseText);
  }
});