js实现上传图片并显示图片名称

下面是实现“js实现上传图片并显示图片名称”的完整攻略。

1. 实现上传图片功能

首先，我们需要在HTML代码中添加一个文件上传控件：

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

然后在JavaScript代码中添加文件上传的逻辑处理：

const uploadInput = document.getElementById('upload');
uploadInput.addEventListener('change', (event) => {
  const file = event.target.files[0];
  console.log(file.name); // 打印文件名
  // 在这里可以将文件上传到服务器或者进行其他处理
});

此时选择文件后，控制台会输出文件名称。

2. 显示上传图片名称

我们可以通过以下几种方式在页面中展示上传的图片名称：

2.1. 在页面中显示文件名

在HTML代码中添加一个用于存放文件名的容器：

<div id="fileName"></div>

然后在JavaScript代码中将文件名显示在该容器中即可：

const uploadInput = document.getElementById('upload');
const fileNameContainer = document.getElementById('fileName');
uploadInput.addEventListener('change', (event) => {
  const file = event.target.files[0];
  fileNameContainer.innerHTML = file.name;
  // 在这里可以将文件上传到服务器或者进行其他处理
});

选择文件后，文件名就会出现在id为fileName的div标签中。

2.2. 上传图片预览

这种方式不仅可以显示图片名称，还可以在页面中预览上传的图片。

在HTML代码中添加一个img标签：

<img id="preview" src="" alt="">

在JavaScript代码中添加文件上传的逻辑处理：

const uploadInput = document.getElementById('upload');
const previewImg = document.getElementById('preview');
uploadInput.addEventListener('change', (event) => {
  const file = event.target.files[0];

  // 读取文件并显示预览
  const reader = new FileReader();
  reader.onload = (event) => {
    previewImg.src = event.target.result;
  };
  reader.readAsDataURL(file);

  console.log(file.name); // 打印文件名
  // 在这里可以将文件上传到服务器或者进行其他处理
});

选择文件后，该图片会自动显示在页面中，并在控制台输出该图片的名称。

示例代码

可以参考以下示例代码进行实验：

<body>
  <label for="upload">选择文件：</label>
  <input type="file" id="upload" name="upload">

  <div id="previewContainer">
    <img id="preview" src="" alt="">
  </div>

  <div id="fileName"></div>

  <script>
    const uploadInput = document.getElementById('upload');
    const fileNameContainer = document.getElementById('fileName');
    const previewImg = document.getElementById('preview');

    uploadInput.addEventListener('change', (event) => {
      const file = event.target.files[0];

      // 读取文件并显示预览
      const reader = new FileReader();
      reader.onload = (event) => {
        previewImg.src = event.target.result;
      };
      reader.readAsDataURL(file);

      fileNameContainer.innerHTML = file.name;

      // 在这里可以将文件上传到服务器或者进行其他处理
    });
  </script>
</body>

在这个示例中，上传的图片会在预览区域中显示，并且在页面上显示该图片的名称。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：js实现上传图片并显示图片名称 - Python技术站