按钮 onclick 上传 - HTML

在前端开发中，经常需要实现用户上传文件的功能。HTML 提供了 input 元素可以用于文件上传，但如果想要通过点击一个按钮来触发上传的动作，就需要使用 onclick 事件。

HTML 实现

在 HTML 中，使用 input 元素的 type 属性为 file 可以创建一个文件上传框：

<input type="file" id="upload-input">

然而，这样的上传框并没有触发上传功能的按钮。为了实现我们的需求，我们需要再创建一个 button 元素：

<button onclick="upload()">上传文件</button>

onclick 事件绑定了一个名为 upload() 的函数，我们需要在 JavaScript 中实现这个函数。

JavaScript 实现

function upload() {
  // 找到上传框
  const input = document.getElementById('upload-input');
  // 获取选中的文件
  const file = input.files[0];
  // 创建表单数据对象
  const formData = new FormData();
  formData.append('file', file);
  // 发送请求
  fetch('/upload', {
    method: 'POST',
    body: formData
  }).then(response => {
    // 处理响应结果
    console.log(response);
  }).catch(error => {
    // 处理上传失败的情况
    console.error(error);
  });
}

这个 upload() 函数的实现可以分为三步：

1. 找到上传框：我们需要获得 input 元素的引用，以便从中获取用户选择的文件。
2. 获取选中的文件：用户选择的文件会被存储在 input.files 属性中，其中的第一个文件为用户选择的文件。
3. 发送请求：我们使用 fetch() 函数来发送 POST 请求，发送成功后会得到一个响应结果。

在这个实现中，我们使用了 FormData 对象来创建表单数据。当我们想要上传文件时，使用 FormData 比直接传输二进制数据更加方便。我们在表单数据中添加一个名为 file 的键值对，并将用户选中的文件赋值给它。

完整代码

<input type="file" id="upload-input">
<button onclick="upload()">上传文件</button>
<script>
function upload() {
  const input = document.getElementById('upload-input');
  const file = input.files[0];
  const formData = new FormData();
  formData.append('file', file);
  fetch('/upload', {
    method: 'POST',
    body: formData
  }).then(response => {
    console.log(response);
  }).catch(error => {
    console.error(error);
  });
}
</script>

以上就是通过按钮 onclick 实现文件上传的 HTML 和 JavaScript 实现方式。