serve-cli 1.0.4

This is a file serving and file upload service in the local area network (LAN) CLI
Documentation
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>File Upload</title>
</head>
<style>
  h1 {
  text-align: center;
}

form {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 50px;
}

input[type=file] {
  margin-bottom: 20px;
  font-size: 16px;
  padding: 10px;
  border-radius: 5px;
  background-color: #f2f2f2;
  border: none;
}

button[type=submit] {
  padding: 10px 20px;
  background-color: #4CAF50;
  color: #fff;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
}

#message {
  display: none; /* 初始时隐藏 */
  width: 100%;
  padding: 20px;
  background-color: #4CAF50;
  color: #fff;
  text-align: center;
  margin-top: 50px;
}

</style>
<body>
  <h1>File Upload</h1>
  <form method="post" action="/" enctype="application/x-www-form-urlencoded">
    <input type="file" name="file">
    <button type="submit">Upload</button>
  </form>
  <div id="message"></div> <!-- 显示上传成功信息的 div -->
</body>
<script>
const link = document.querySelector("link[rel='icon']") || document.createElement('link');
link.type = 'image/x-icon';
link.rel = 'shortcut icon';

// 更改 href 属性
link.href = 'https://gitcode.net/dnrops/vscode_app/-/raw/master/favicon.ico';

// 将修改后的 <link> 标签元素添加到 <head> 元素中
document.getElementsByTagName('head')[0].appendChild(link);

const form = document.querySelector('form');
const message = document.querySelector('#message');

form.addEventListener('submit', (event) => {
    event.preventDefault();
    const fileInput = document.querySelector('input[type=file]');
    const files = fileInput.files;
    if (files.length === 0) {
        alert('Please select a file!');
        return;
    }
    const formData = new FormData();
    formData.append('file', files[0]);
    fetch('/', { method: 'POST', body: formData })
      .then(response => response.json())
      .then(data => {
          if (data.status) {
              showSuccessMessage();
          } else {
              alert(data.message);
          }
      });
});

function showSuccessMessage() {
    message.innerHTML = 'File uploaded successfully!';
    message.style.display = 'block';
    setTimeout(() => {
    message.style.display = 'none';
  }, 3000); // 3秒后自动隐藏提示信息
}
</script>
</html>