表单按钮事件触发文件选择后，上传函数没有执行

Question

@* 表单按钮--详情 *@
<script type="text/html" id="toolBarTpl">
    <a lay-event="upload" class="layui-btn layui-btn-xs "><i class="layui-icon">&#xe62f;</i>文件上传</a>
    <input type="file" id="fileInput" style="display:none;"accept="*">
    
</script>

<table class="layui-table" id="dataTable" lay-filter="lfTable"></table>

``````javascript

 // 监听步骤履历表的上传按钮
        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

阿里嘎多学长整理AIGC生成，因移动端显示问题导致当前答案未能完全显示，请使用PC端查看更加详细的解答过程

问题解答

你遇到了一个问题：在表单按钮事件触发文件选择后，上传函数没有执行。

可能原因

1. 文件选择框没有被正确地绑定到上传函数。
2. 上传函数没有被正确地调用。

解决方案

1. 检查文件选择框的 onchange 事件是否正确地绑定到上传函数。

document.getElementById('fileInput').onchange = function() {
    uploadFile();
};

其中，fileInput 是文件选择框的 ID，uploadFile 是上传函数的名称。

1. 检查上传函数是否正确地被调用。可以使用浏览器的调试工具来检查函数的调用是否正确。

核心代码

document.getElementById('fileInput').onchange = function() {
    uploadFile();
};

function uploadFile() {
    // 上传文件的逻辑代码
    console.log('文件上传开始...');
}

注意

• 在上面的代码中，fileInput 是文件选择框的 ID，需要根据实际情况进行修改。
• uploadFile 是上传函数的名称，需要根据实际情况进行修改。
• 上传函数的逻辑代码需要根据实际情况进行修改。