HTML5代码如何实现文件上传 HTML5代码中File API的运用解析

<input type="file" id="fileInput" />
<script>
document.getElementById('fileInput').addEventListener('change', function(e) {
  const file = e.target.files[0];
  if (!file) return;

  const reader = new FileReader();
  reader.onload = function(event) {
    console.log('文件内容：', event.target.result);
  };
  reader.readAsText(file); // 以文本形式读取
});
</script>

<input type="file" accept="image/*" id="imageInput" />
<img id="preview" src="" alt="预览" style="max-width: 300px;" />

<script>
document.getElementById('imageInput').addEventListener('change', function(e) {
  const file = e.target.files[0];
  if (!file || !file.type.startsWith('image/')) return;

  const reader = new FileReader();
  reader.onload = function(event) {
    document.getElementById('preview').src = event.target.result;
  };
  reader.readAsDataURL(file);
});
</script>

<input type="file" multiple id="multiFile" />
<ul id="fileList"></ul>

<script>
document.getElementById('multiFile').addEventListener('change', function(e) {
  const files = e.target.files;
  const list = document.getElementById('fileList');
  list.innerHTML = '';

  Array.from(files).forEach(file => {
    const li = document.createElement('li');
    li.textContent = `名称: ${file.name}，大小: ${file.size} 字节，类型: ${file.type}`;
    list.appendChild(li);
  });
});
</script>

<input type="file" id="uploadFile" />
<button onclick="upload()">上传</button>

<script>
function upload() {
  const fileInput = document.getElementById('uploadFile');
  const file = fileInput.files[0];
  if (!file) {
    alert("请选择文件");
    return;
  }

  const formData = new FormData();
  formData.append('uploaded_file', file);

  fetch('/upload', {
    method: 'POST',
    body: formData
  })
  .then(response => response.json())
  .then(data => {
    console.log('上传成功：', data);
  })
  .catch(error => {
    console.error('上传失败：', error);
  });
}
</script>