移动端（iOS/Android）文件输入失效，桌面端正常的问题排查

常见原因 #

1. 布局遮挡问题：d-flex布局下，原生file input可能被压缩或其他元素遮挡，导致移动端点击时未真正触发文件选择器，或选择后状态未正确同步。
2. 移动端事件时序差异：部分移动端浏览器中，表单submit事件触发时，file input的文件状态还未完成更新，导致files[0]为空。
3. 原生file input交互体验差：移动端原生file input的点击区域小，容易出现点击无效的情况。

解决方案 #

1. 优化HTML结构，用Label触发文件选择

将原生file input隐藏，用<label>关联它，提升点击区域和交互体验，避免遮挡问题：

<form class="d-flex" id="messageForm">
    <input type="text" class="form-control" id="messageInput" placeholder="Type your message...">
    <!-- 用Label作为可见的触发按钮 -->
    <label for="fileInput" class="btn btn-secondary ms-2">Attach File</label>
    <!-- 隐藏原生file input -->
    <input type="file" id="fileInput" name="file" class="form-control-file" style="display: none;">
    <button type="submit" class="btn btn-primary ms-2">Send</button>
</form>

2. 提前保存选中文件，避免时序问题

监听file input的change事件，提前保存选中的文件对象，在提交时直接使用，避免submit时获取不到文件：

let selectedFile = null;

// 监听文件选择事件，保存选中的文件
$('#fileInput').on('change', function() {
    selectedFile = this.files.length > 0 ? this.files[0] : null;
});

$('#messageForm').submit(function (e) {
    e.preventDefault();
    const messageContent = $('#messageInput').val();

    const formData = new FormData();
    formData.append('sender_id', sender_id);
    formData.append('referral_id', referral_id);
    formData.append('content', messageContent);
    if (selectedFile) {
        formData.append('file', selectedFile);
    }

    if (messageContent || selectedFile) {
        $.ajax({
            url: "/messages/send_message",
            type: "POST",
            data: formData,
            processData: false,
            contentType: false,
            success: function (data) {
                if (data.status === 'success') {
                    $('#messageInput').val('');
                    $('#fileInput').val('');
                    selectedFile = null; // 重置选中文件
                    fetchMessages();
                } else {
                    alert('Error sending message');
                }
            },
            error: function(xhr, status, err) {
                console.error('Upload error:', err);
                alert('Failed to send message, please retry');
            }
        });
    }
});

3. 额外排查点

• 检查移动端浏览器是否允许网站访问文件系统/相册权限；
• 确认没有其他JS代码意外重置或禁用file input；
• 测试不同移动端浏览器（如Safari、Chrome），定位是否为特定浏览器的兼容性问题。

内容的提问来源于stack exchange，提问作者Mike C.