txt-novel-reader/test_file_select.html at master · TY-teo/txt-novel-reader · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE html>
<html>
<head>
    <title>测试文件选择功能</title>
    <style>
        body { font-family: Arial, sans-serif; padding: 2rem; }
        .test-btn { background: #3498db; color: white; padding: 1rem 2rem; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; margin: 1rem 0; }
        .log { background: #f5f5f5; padding: 1rem; border-radius: 5px; margin: 1rem 0; font-family: monospace; }
    </style>
</head>
<body>
    <h1>文件选择功能测试</h1>

    <h2>测试1：直接HTML onclick</h2>
    <input type="file" id="testFileInput1" accept=".txt" style="display: none;">
    <button class="test-btn" onclick="document.getElementById(\"testFileInput1\").click()">
        HTML onclick方式
    </button>

    <h2>测试2：JavaScript addEventListener</h2>
    <input type="file" id="testFileInput2" accept=".txt" style="display: none;">
    <button class="test-btn" id="testBtn2">
        JavaScript addEventListener方式
    </button>

    <h2>测试3：原始按钮（复制自小说阅读器）</h2>
    <input type="file" id="fileInput" accept=".txt" style="display: none;">
    <button class="btn btn-primary" onclick="document.getElementById(\"fileInput\").click()">
        选择文件
    </button>

    <div class="log" id="log">
        <strong>测试日志：</strong><br>
        准备测试文件选择功能...
    </div>

    <script>
        const log = document.getElementById("log");

        function addLog(message) {
            log.innerHTML += "<br>" + new Date().toLocaleTimeString() + ": " + message;
        }

        // 测试1的事件监听
        document.getElementById("testFileInput1").addEventListener("change", function(e) {
            addLog("测试1 - 文件选择成功：" + (e.target.files[0] ? e.target.files[0].name : "无文件"));
        });

        // 测试2的事件绑定
        document.getElementById("testBtn2").addEventListener("click", function() {
            addLog("测试2 - 按钮被点击");
            document.getElementById("testFileInput2").click();
        });

        document.getElementById("testFileInput2").addEventListener("change", function(e) {
            addLog("测试2 - 文件选择成功：" + (e.target.files[0] ? e.target.files[0].name : "无文件"));
        });

        // 测试3的事件监听
        document.getElementById("fileInput").addEventListener("change", function(e) {
            addLog("测试3 - 原始按钮文件选择成功：" + (e.target.files[0] ? e.target.files[0].name : "无文件"));
        });

        addLog("所有测试已准备就绪，请点击按钮测试");
    </script>
</body>
</html>