在 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>

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

Send file in Ajax and input with jQuery

ajax

upload

jquery