JS+HTML实现自定义上传图片按钮并显示图片功能的方法分析

下面是详细讲解“JS+HTML实现自定义上传图片按钮并显示图片功能的方法分析”的完整攻略。

1. 需求分析

我们的目标是实现在HTML页面中自定义一个上传图片按钮，并且在用户选择上传图片后，能够将图片显示在页面上。

需要具备以下功能：

自定义上传图片按钮
选择图片文件后上传并显示图片
将图片文件转换为base64编码

2. HTML布局

首先，我们需要在HTML页面中创建一个上传图片按钮和一个用于显示图片的元素。

<label for="uploadBtn" class="btn">上传图片</label>
<input type="file" id="uploadBtn" accept="image/*">
<div id="preview"></div>

在这个例子中，我们使用<label>元素和<input type="file">元素创建自定义上传按钮，并且为input元素添加了accept属性，限制了用户在选择图片时只能选择图片文件。另外，<div>元素用于在用户选择图片后，将上传的图片显示在页面上。

3. 实现上传图片功能

在<input type="file">元素中，我们可以使用onchange事件监听用户选择图片文件的行为。

<input type="file" id="uploadBtn" accept="image/*" onchange="previewFile()">

同时在页面中添加以下JS代码，实现图片上传和显示的功能。

function previewFile() {
  const preview = document.getElementById('preview');
  const file = document.querySelector('input[type=file]').files[0];
  const reader = new FileReader();

  reader.addEventListener("load", function () {
    const image = new Image();
    image.title = file.name;
    image.src = this.result;
    preview.appendChild(image);
  }, false);

  if (file) {
    reader.readAsDataURL(file);
  }
}

这段代码中，我们定义了一个名为previewFile()的函数，在用户选中图片后，它会自动执行。

在函数中，我们首先获取页面上用于预览图片的<div>元素，然后使用querySelector方法获取用户选择的图片文件。

接下来，我们使用FileReader对象将图片文件读取为base64编码，并将其设置为一个新创建的Image对象的src属性。最后，我们将创建的<img>元素添加到页面上用于展示图片的<div>元素中。

4. 完整示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Upload Image</title>
  </head>
  <body>
    <label for="uploadBtn" class="btn">上传图片</label>
    <input type="file" id="uploadBtn" accept="image/*" onchange="previewFile()">
    <div id="preview"></div>
    <script>
      function previewFile() {
        const preview = document.getElementById('preview');
        const file = document.querySelector('input[type=file]').files[0];
        const reader = new FileReader();

        reader.addEventListener("load", function () {
          const image = new Image();
          image.title = file.name;
          image.src = this.result;
          preview.appendChild(image);
        }, false);

        if (file) {
          reader.readAsDataURL(file);
        }
      }
    </script>
  </body>
</html>