上传文件对话框触发后的处理没有执行

Question

        // 监听步骤履历表的上传按钮
        table.on('tool(stepHistory)', function (obj) {
            var data = obj.data;
            if (obj.event === 'upload') {
                // 触发文件选择对话框
                document.getElementById('fileInput').click();
                // 文件选择后的处理
                document.getElementById('fileInput').onchange = function () {
                    if (this.files.length === 0) return;
                    uploadFile(this.files[0], data);
                };
            }
        });

        function uploadFile(file, rowData)
         {

               // 检查文件大小
              if (file.size > 300 * 1024 * 1024) {
                layer.msg("文件大小超过300MB限制");
                return;
               }
                var formData = new FormData();
                formData.append('file', file);

                // 构造文件命名信息
                var fileInfo =
              {
                productNo: escapeHTML($("#productNo").val()),                  // 产品图号                                 
                subLotId: escapeHTML($("#subLotId").val()),                    // 序列号
                processTextNo: rowData.PROCESSTEXTNO,                           // 工序文本码
                stepSeq: rowData.STEPSEQ ,                                    // 步骤序号
                timestamp: DateTime.Now.ToString("yyyyMMddHHmmss")             // 当前时间
               };
              
            formData.append('fileInfo', JSON.stringify(fileInfo));

            $.ajax({
                url: '../ProdResults/SaveFileWithNaming', 
                type: 'POST',
                data: formData,
                headers: {
                    "__RequestVerificationToken": $("input[name=__RequestVerificationToken]").val()
                },
                processData: false,
                contentType: false,

                beforeSend: function (xhr)
                {
                    const fileInput = document.getElementById('fileInput');
                    const files = fileInput.files;

                    // 设置最大文件大小（300MB）
                    const maxSizeMB = 300;
                    const maxSizeBytes = maxSizeMB * 1024 * 1024;

                    // 验证文件大小
                    if (files.length > 0) {
                        for (let i = 0; i < files.length; i++) {
                            const fileSize = files[i].size;
                            const fileName = files[i].name;

                            // 检查文件大小是否超过限制
                            if (fileSize > maxSizeBytes) {
                                // 计算文件大小（MB）
                                const fileSizeMB = (fileSize / (1024 * 1024)).toFixed(2);

                                // 关闭加载动画
                                layer.closeAll();

                                // 显示错误提示
                                layer.msg(`文件 ${fileName} 超过大小限制！<br>当前大小: ${fileSizeMB}MB<br>最大允许: ${maxSizeMB}MB`, {
                                    icon: 2,
                                    time: 5000 // 5秒后自动关闭
                                });

                                // 中止AJAX请求
                                xhr.abort();
                                return false;
                            }
                        }
                    }

                    // 文件验证通过，显示加载动画
                    layer.load(2);
                    
                },

                success: function (res) {
                    layer.closeAll('loading');
                    if (res.success) {
                        layer.msg('文件上传成功，保存为: ' + res.fileName);
                    } else {
                        layer.msg(res.message || '文件保存失败');
                    }
                },
                error: function () {
                    layer.closeAll('loading');
                    layer.msg('文件保存出错');
                }
             });
           }

Answer 1

让【宝码香车】来帮你解答，本回答参考DeepSeek编写，并整理提供。

如果还有疑问可以点击头像关注私信或评论。如果答案让您满意，请采纳、点赞、关注，非常感谢！

文件上传对话框触发后处理未执行问题分析

根据您提供的代码，问题出现在文件上传对话框触发后的处理逻辑没有执行。以下是可能的原因和解决方案：

问题原因分析

1. 事件监听时机问题：onchange 事件监听是在点击上传按钮后才设置的，如果用户在此之前已经选择了文件，则不会触发

1. DOM元素问题：fileInput 元素可能不存在或未正确初始化

1. 事件冒泡/阻止问题：可能有其他事件处理程序阻止了默认行为

解决方案

方案1：预先绑定事件监听器

// 在页面加载时就绑定事件监听
$(function() {
    document.getElementById('fileInput').onchange = function() {
        if (this.files.length === 0) return;
        // 这里需要获取当前行的数据，可以通过全局变量或data属性存储
        var rowData = $(this).data('currentRow');
        if (rowData) {
            uploadFile(this.files[0], rowData);
        }
    };
    
    // 监听步骤履历表的上传按钮
    table.on('tool(stepHistory)', function(obj) {
        var data = obj.data;
        if (obj.event === 'upload') {
            // 存储当前行数据到fileInput元素
            document.getElementById('fileInput').setAttribute('data-current-row', JSON.stringify(data));
            // 触发文件选择对话框
            document.getElementById('fileInput').click();
        }
    });
});

方案2：使用Promise确保顺序执行

table.on('tool(stepHistory)', function(obj) {
    var data = obj.data;
    if (obj.event === 'upload') {
        // 创建临时input元素
        var input = document.createElement('input');
        input.type = 'file';
        input.style.display = 'none';
        
        // 添加到DOM
        document.body.appendChild(input);
        
        // 触发文件选择
        input.click();
        
        // 监听变化
        input.onchange = function() {
            if (this.files.length === 0) return;
            uploadFile(this.files[0], data);
            // 移除临时input
            document.body.removeChild(input);
        };
    }
});

方案3：确保DOM元素存在

<!-- 确保在HTML中有这个元素 -->
<input type="file" id="fileInput" style="display: none;">

完整修复代码示例

// 确保DOM加载完成后执行
$(function() {
    // 预先创建并隐藏文件输入元素
    if (!document.getElementById('fileInput')) {
        var input = document.createElement('input');
        input.type = 'file';
        input.id = 'fileInput';
        input.style.display = 'none';
        document.body.appendChild(input);
    }


    // 预先绑定change事件
    document.getElementById('fileInput').onchange = function() {
        if (this.files.length === 0) return;
        var rowData = JSON.parse(this.getAttribute('data-row') || {};
        uploadFile(this.files[0], rowData);
    };


    // 监听步骤履历表的上传按钮
    table.on('tool(stepHistory)', function(obj) {
        var data = obj.data;
        if (obj.event === 'upload') {
            // 存储当前行数据
            document.getElementById('fileInput').setAttribute('data-row', JSON.stringify(data));
            // 触发文件选择
            document.getElementById('fileInput').click();
        }
    });
});


// uploadFile函数保持不变...

文件上传流程

通过以上修改，应该能解决文件选择后处理逻辑不执行的问题。关键点在于确保事件监听器在文件选择前就已绑定，并且正确处理了行数据的传递。