js实现纯前端的图片预览

当我们需要上传图片时，通常会希望在上传前先对图片进行预览，以确保上传的图片符合要求。下面我将详细讲解如何在前端使用JavaScript实现纯前端的图片预览，整个流程分为以下几步：

1、获取文件上传控件，并绑定change事件

我们首先需要获取文件上传控件，这可以使用HTML的input标签完成，再将change事件绑定到上传控件上。当用户选择文件上传时，触发该事件。

<input type="file" id="fileInput" onchange="previewImage(event)">

2、获取选中图片文件并生成URL

当用户选择文件时，我们需要获取选中的文件，并通过JavaScript的File API将其转换成url方便展示。

function previewImage(event) {
  const file = event.target.files[0];
  const imgUrl = URL.createObjectURL(file);
  // 接下来进行图片展示
}

3、将URL转换成img元素展示

我们需要将生成的url转换成展示图片的img元素，这可以在页面中使用img标签实现。

function previewImage(event) {
  const file = event.target.files[0];
  const imgUrl = URL.createObjectURL(file);
  const imgElement = document.createElement('img');
  imgElement.setAttribute('src', imgUrl);
  document.body.appendChild(imgElement);
}

4、添加具有样式的img元素

为了使展示的图片更美观，我们需要为生成的img元素添加样式，如图片宽度、高度、边框等等。

function previewImage(event) {
  const file = event.target.files[0];
  const imgUrl = URL.createObjectURL(file);
  const imgElement = document.createElement('img');
  imgElement.setAttribute('src', imgUrl);
  imgElement.setAttribute('class', 'preview-image');
  document.body.appendChild(imgElement);
}

.preview-image {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
}

至此，我们就完成了纯前端的图片预览功能。

下面是两条示例说明：

示例1

我们在页面中添加一个上传控件和一个用来展示图片的div元素，并使用JavaScript将选中的图片作为子元素添加到div中。

<input type="file" id="fileInput" onchange="previewImage(event)">
<div id="previewBox"></div>

function previewImage(event) {
  const file = event.target.files[0];
  const imgUrl = URL.createObjectURL(file);
  const imgElement = document.createElement('img');
  imgElement.setAttribute('src', imgUrl);
  imgElement.setAttribute('class', 'preview-image');
  document.getElementById('previewBox').appendChild(imgElement);
}

.preview-image {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
}

示例2

我们在页面中添加一个上传控件，用户可以通过控件上传多个图片，我们在界面中用ul和li标签展示这些图片。

<input type="file" id="fileInput" multiple="multiple" onchange="previewImages(event)">
<ul id="previewList"></ul>

function previewImages(event) {
  const files = event.target.files;
  for (let i = 0; i < files.length; i++) {
    const file = files[i];
    const imgUrl = URL.createObjectURL(file);
    const imgElement = document.createElement('img');
    imgElement.setAttribute('src', imgUrl);
    imgElement.setAttribute('class', 'preview-image');
    const liElement = document.createElement('li');
    liElement.appendChild(imgElement);
    document.getElementById('previewList').appendChild(liElement);
  }
}

.preview-image {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
}