使用Ajax+FormData上传文件时，如何同时提交文件名与文件内容？

你好呀！看了你的代码，发现几个小问题导致文件名没传过去，咱们一步步来修正：

先说说你的代码里的问题点： #

• Ajax请求写在了submit事件外面：点击提交按钮时，根本不会触发你写的Ajax逻辑，反而可能走了表单的默认提交行为，导致数据没正确传递
• Ajax的data参数格式错误：你写了data:{data,data }，这是无效语法，应该直接传递创建好的FormData对象
• file变量的来源不明确：你直接用了file，但没看到你是怎么获取这个文件对象的，得确保它是从文件输入框拿到的正确对象

修正后的完整代码 #

首先确保你的HTML表单加上enctype="multipart/form-data"（上传文件必须的）：

<form id="upload_csv" enctype="multipart/form-data">
  <input type="file" name="csv_file" id="csv_file">
  <button type="submit">上传文件</button>
</form>

然后修改JavaScript代码：

$('#upload_csv').on("submit", function(e){ 
    // 第一步：阻止表单默认提交行为，避免页面刷新
    e.preventDefault();
    
    // 创建FormData，自动包含表单里的所有字段（包括文件）
    var data = new FormData(this); 
    
    // 获取文件输入框里的文件对象
    var fileInput = $('#csv_file')[0];
    if(fileInput.files.length > 0) {
        var file = fileInput.files[0];
        // 添加文件名到FormData中，后端可以通过test_filename这个键拿到
        data.append('test_filename', file.name);
    }
    
    // 发起Ajax请求，注意要写在事件处理函数内部！
    $.ajax({ 
        url:"uploadfileprocess", 
        method:"POST", 
        data: data, // 直接传递FormData对象
        contentType:false, 
        cache:false, 
        processData:false, 
        success: function(response){ 
            alert(response); 
            if(response=='Error1') { 
                alert("Invalid File"); 
            } else if(response == "Error2") { 
                alert("Please Select File"); 
            } else { 
                $('#importfiletodb').html(response); 
            } 
        },
        // 加上错误处理，方便调试
        error: function(xhr, status, err) {
            console.log('上传出错了:', err);
        }
    });
});

后端怎么接收数据（以PHP为例） #

假设你用PHP处理请求，后端可以这样获取文件名和文件内容：

// 获取前端传递的文件名
$fileName = $_POST['test_filename'];

// 获取上传的文件
$uploadedFile = $_FILES['csv_file'];
// 读取文件内容
$fileContent = file_get_contents($uploadedFile['tmp_name']);

// 接下来就可以把$fileName和$fileContent插入到数据库里啦

这样修改后，文件名和文件内容就能一起提交到后端，然后存入数据库了～

内容的提问来源于stack exchange，提问作者Sho