Update uploadfile1.html

Qing9935 · May 22, 2024 · 23921b3 · 23921b3
1 parent 3602f44
commit 23921b3
Showing 1 changed file with 166 additions and 0 deletions.
diff --git a/uploadfile1.html b/uploadfile1.html
@@ -164,3 +164,169 @@ <h2>Upload a File</h2>
     </script>
 </body>
 </html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>File Upload Form</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            background-color: #f9f9f9;
+            margin: 0;
+            padding: 0;
+        }
+
+        .container {
+            max-width: 600px;
+            margin: 50px auto;
+            padding: 20px;
+            background-color: #fff;
+            border-radius: 8px;
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+        }
+
+        h2 {
+            margin-bottom: 20px;
+            color: #333;
+            text-align: center;
+        }
+
+        form {
+            text-align: center;
+        }
+
+        label {
+            font-weight: bold;
+            display: block;
+            margin-bottom: 10px;
+        }
+
+        #fileInput {
+            margin-bottom: 20px;
+            padding: 10px;
+            border: 1px solid #ccc;
+            border-radius: 4px;
+        }
+
+        button {
+            padding: 10px 20px;
+            background-color: #2e80b6;
+            color: #fff;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            transition: background-color 0.3s ease;
+        }
+
+        button:hover {
+            background-color: #d0d5da;
+        }
+
+        .output {
+            margin-top: 20px;
+            padding: 20px;
+            border: 1px solid #ccc;
+            background-color: #f0f0f0;
+            border-radius: 4px;
+            white-space: pre-wrap;
+        }
+
+        #progressBarContainer {
+            margin-top: 20px;
+            display: none;
+        }
+
+        #progressBar {
+            width: 100%;
+            height: 20px;
+            background-color: #e0e0e0;
+            border-radius: 4px;
+            overflow: hidden;
+        }
+
+        #progressBarFill {
+            height: 100%;
+            background-color: #4caf50;
+            width: 0; /* 初始宽度为0 */
+            transition: width 0.3s ease;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h2>Upload a File</h2>
+        <form id="uploadForm" enctype="multipart/form-data">
+            <label for="fileInput">Choose a file:</label>
+            <br>
+            <input type="file" id="fileInput" name="file" placeholder="Choose a file" />
+            <br>
+            <button type="submit">Upload</button>
+        </form>
+
+        <div id="progressBarContainer">
+            <div id="progressBar">
+                <div id="progressBarFill"></div>
+            </div>
+        </div>
+
+        <div id="output" class="output"></div>
+    </div>
+
+    <script>
+        document.getElementById('uploadForm').addEventListener('submit', function(event) {
+            event.preventDefault(); // 阻止表单的默认提交行为
+
+            var output = document.getElementById('output');
+            var progressBarContainer = document.getElementById('progressBarContainer');
+            var progressBarFill = document.getElementById('progressBarFill');
+            var fileInput = document.getElementById('fileInput');
+            var file = fileInput.files[0];
+
+            if (file) {
+                progressBarContainer.style.display = 'block'; // 显示进度条
+
+                var progress = 0;
+                var interval = setInterval(function() {
+                    progress += 10; // 每次增加10%
+                    progressBarFill.style.width = progress + '%'; // 更新进度条宽度
+
+                    if (progress >= 100) {
+                        clearInterval(interval); // 停止增加进度
+
+                        // 上传完成后隐藏进度条
+                        progressBarContainer.style.display = 'none';
+
+                        // 上传完成后显示文件内容
+                        displayFileContent(file);
+                    }
+                }, 500); // 每500ms增加一次进度
+            } else {
+                // 输出没有选择文件的信息
+                output.textContent = 'No file selected. Please choose a file to upload.';
+            }
+        });
+
+        function displayFileContent(file) {
+            var output = document.getElementById('output');
+            var reader = new FileReader();
+
+            reader.onload = function(e) {
+                var fileContent = e.target.result;
+                var customMessage = 'Upload successful!!!\n';
+                customMessage += 'RESULTS:\n' + fileContent;
+
+                // 输出自定义信息到页面
+                output.textContent = customMessage;
+            };
+
+            reader.onerror = function(e) {
+                output.textContent = 'Error reading file';
+            };
+
+            reader.readAsText(file);
+        }
+    </script>
+</body>
+</html>