Safari浏览器focus函数失效致文档上传保存失败问题求助

问题根源 #

你当前代码的核心问题有两个：

• 错误使用focus事件作为文件上传触发时机：文件输入框在用户选择文件后会失去焦点，不会触发focus，这在Safari中表现得尤为明显，Chrome中也无法按预期触发。
• 仅针对Safari绑定事件，Chrome完全没有处理逻辑，自然无法工作。

修复方案 #

改用change事件（所有浏览器通用，文件选择完成后会触发），同时移除不必要的浏览器UA判断，统一处理逻辑：

修复后的代码 #

$(document).on("change", ".docs_field", function(){
    console.log("文件已选择，开始上传");
    var base_url = $('#base_url').val();
    var _token = $('#_token').val();
    var activeField = $(this);
    var lead_id = $("#lead_id").val();
    var file = this.files[0];
    
    // 先判断是否选择了文件
    if (!file) return;
    
    var ids = $(this).attr('name');
    var formData = new FormData();
    
    formData.append('lead_id', lead_id);
    formData.append('ids', ids);
    formData.append('_token', _token); // 将CSRF Token放入FormData，比设置请求头兼容性更好
    
    var reader = new FileReader();
    reader.readAsDataURL(file);
    
    reader.onload = function() {
        formData.append('file_data', reader.result);
        
        var xhr = new XMLHttpRequest();
        xhr.open('POST', base_url + "auto_save_doc.php", true);
        
        xhr.onload = function() {
            if (xhr.status >= 200 && xhr.status < 300) {
                console.log("响应内容", xhr.responseText);
                console.log("上传成功");
                try {
                    var result = JSON.parse(xhr.responseText);
                    var docu_ids = result['document_id'];
                    activeField.next().val(docu_ids);
                } catch (e) {
                    console.error("响应解析失败", e);
                }
            } else {
                console.error("上传失败，状态码：", xhr.status);
            }
        };
        
        // 新增网络错误处理
        xhr.onerror = function() {
            console.error("网络请求出错");
        };
        
        xhr.send(formData);
    };
    
    // 新增文件读取错误处理
    reader.onerror = function() {
        console.error("文件读取失败");
    };
});

关键改进点 #

• 替换事件类型：用change替代focus，确保用户选择文件后立即触发上传逻辑，兼容所有主流浏览器。
• 移除UA判断：统一处理Chrome和Safari，无需针对特定浏览器编写分支代码。
• 增加校验与错误处理：添加文件存在判断、响应解析异常捕获、网络错误处理，避免代码崩溃。
• 优化CSRF Token传递：将Token放入FormData中，比设置请求头更适配不同浏览器的表单提交规则。
• 完善日志输出：更清晰的日志信息，便于调试排查问题。

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