上传图片 HTML JavaScript

在很多网站中都需要用户上传图片，本文将介绍如何使用 HTML 和 JavaScript 来实现上传图片的功能。

HTML

HTML 提供了一个 input 元素来实现上传文件的功能，如下所示：

<form>
  <label for="file">选择文件：</label>
  <input type="file" id="file" name="file">
  <button type="submit">上传</button>
</form>

其中 input 元素的 type 属性设置为 "file"，表示这是一个文件上传输入框。用户点击该输入框后，可以选择本地文件进行上传。

JavaScript

使用 JavaScript 可以让上传图片的流程更加顺畅，例如可以在用户选择文件后自动上传，或者在上传过程中显示进度条等。

选择文件

通过 JavaScript 获取 input 元素的值，即可获取用户选择的文件。代码如下所示：

const fileInput = document.getElementById("file");

fileInput.addEventListener("change", (event) => {
  const file = event.target.files[0];
  console.log(file.name);
});

上面的代码通过 addEventListener 方法给 input 元素添加了一个 change 事件监听器，当用户选择文件后就会触发该事件，并在控制台上输出文件名。

上传文件

当获取到用户选择的文件后，就可以通过 AJAX 或 Fetch API 向后端发送请求进行文件上传。

const fileInput = document.getElementById("file");

fileInput.addEventListener("change", (event) => {
  const file = event.target.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);
  });
});

上面的代码使用了 Fetch API，将用户选择的文件包装成了一个 FormData 对象，并通过 POST 请求将其发送到后端的 /upload 接口。后端接口需要进行相应的文件接收和处理，这里不再赘述。

总结

以上就是使用 HTML 和 JavaScript 实现上传图片的方法，可以根据实际需要进行相应的处理，例如显示上传进度等。总之，上传文件需要谨慎，防止出现文件覆盖、文件名包含恶意代码等安全问题。