发送上传的文件和其他数据，都使用一个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);
  }
});

Answer 2

您必须将所有数据添加到 FormData 对象并将其作为数据参数传递。另外，将 processData 设置为 false 并将 contentType 设置为 false。

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,                   
    type: 'post',
    processData: false,
    contentType: false,
    complete: function(response){
            alert('Details added successfully!');
            $('#restrans').html(response.responseText);
            // console.log('hey', response.responseText);
            // editor.setValue(response.responseText);
    }
});