使用Ajax上传文件遇问题：无法获取正确的文件输入值

你遇到的C:/fakepath/xxx是浏览器的安全限制导致的——为了保护用户本地文件系统的隐私，浏览器会刻意隐藏真实的本地文件路径，所以通过val()只能拿到这个伪路径，根本没法用它来获取实际的文件数据。

要正确处理文件上传，你得用浏览器的File API来获取文件对象，而不是试图拿文件路径。下面是具体的解决步骤和代码示例：

1. 正确获取选中的文件 #

不要用val()，而是直接获取文件输入元素的files属性，它返回的是一个FileList对象，包含了所有选中的文件：

var fileInput = document.getElementById('uploadFile');
// 或者用jQuery的方式：$('#uploadFile')[0].files
var selectedFiles = fileInput.files;

2. 用FormData包装文件数据 #

AJAX上传文件必须借助FormData对象来封装文件和表单数据，这样才能正确模拟表单的multipart/form-data提交方式。修改你的uploadFile()函数如下：

function uploadFile() {
    // 获取文件输入控件和选中的文件
    var fileInput = $('#uploadFile')[0];
    var files = fileInput.files;
    
    // 如果没有选中文件，直接返回
    if (files.length === 0) {
        alert('请选择要上传的文件');
        return;
    }
    
    // 创建FormData对象，用于封装上传数据
    var formData = new FormData();
    
    // 遍历所有选中的文件，添加到FormData中
    for (var i = 0; i < files.length; i++) {
        formData.append('input_upload_file[]', files[i], files[i].name);
    }
    
    // 添加CSRF令牌（Laravel必备）
    formData.append('_token', '{{ csrf_token() }}');
    
    // 发送AJAX请求
    $.ajax({
        url: '/your-upload-endpoint', // 替换成你的后端上传接口地址
        method: 'POST',
        data: formData,
        // 这两个参数必须设置为false，否则jQuery会破坏FormData的结构
        contentType: false,
        processData: false,
        success: function(res) {
            console.log('上传成功！', res);
            // 这里可以添加上传成功后的逻辑，比如提示用户、刷新页面等
        },
        error: function(xhr, status, err) {
            console.error('上传失败:', err);
            alert('文件上传失败，请重试');
        }
    });
}

几个关键注意事项 #

• 你的表单已经设置了enctype="multipart/form-data"，这很重要，保持这个设置不要改
• 后端处理时，比如Laravel框架，可以通过$request->file('input_upload_file')获取到上传的文件数组，然后进行存储等操作
• 如果你的上传按钮是放在表单内部的<button type="submit">，记得要阻止表单的默认提交行为，比如在函数开头加event.preventDefault()

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