在 Ajax 中发送文件并使用 jQuery 输入

Question

我有一个用于上传文件和输入的表单。

<form id="form">
    <input type="text" id="name">
    <input type="file" id="file">
</form>

这是我用来在 Ajax 中发送文件的内容：

$('#form').submit(function(e){
    e.preventDefault();
    var file_data = $('#file').prop('files')[0];   
    var form_data = new FormData();                  
    form_data.append('file', file_data);

    $.ajax({
        type : 'POST',
        data: form_data,                         
        url: 'upload.php',
        dataType: 'text',
        cache: false,
        contentType: false,
        processData: false,
        ...

但我没有得到输入值。

请问我在这里缺少什么？

谢谢。

Answer 1

当您需要该表单中的所有数据时，将整个表单元素传递到 FormData() 比手动追加它更简单

代替：

var file_data = $('#file').prop('files')[0];   
var form_data = new FormData();                  
form_data.append('file', file_data);

只要做：

var form_data = new FormData(this);// `this` is the form element submit event occured on

并在表单控件中添加name 属性：

<form id="form">
    <input name="name" type="text" id="name">
    <input name="file" type="file" id="file">
</form>