js上传图片预览的实现方法

下面是关于“js上传图片预览的实现方法”的完整攻略。

一、实现思路

实现图片上传预览功能，我们需要以下几步：

HTML页面中新增一个input元素用于文件上传；
给这个input元素绑定change事件，当用户选择一个本地图片进行上传时，就会触发change事件；
获取用户上传的图片文件，并通过FileReader API将它读成DataURL格式的图像；
创建一个Image元素，将DataURL设置为它的src属性值；
将Image元素添加到HTML页面中，实现预览效果。

二、代码实现

以下是代码实现的详细步骤，以及两个具体的示例。

步骤一：HTML页面

首先，在HTML页面中新建一个input元素，用于上传图片。

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

步骤二：绑定change事件

绑定change事件，当用户选择图片时触发。

const uploadInput = document.querySelector('#upload-input');

uploadInput.addEventListener('change', handleUploadImage);

步骤三：获取用户上传的图片文件

在handleUploadImage()函数中，我们需要获取用户选择的文件并判断是否为图片格式，如果是图片格式，则继续读取该图片文件。

function handleUploadImage(event) {
  const file = event.target.files[0];
  if (file.type.startsWith('image/')) {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function () {
        ...
    };
  } else {
    alert('请选择一张图片进行上传');
  }
}

步骤四：读取图片文件

在onload()回调函数中，我们将把图片数据读取成DataURL格式的字符串。

function handleUploadImage(event) {
  const file = event.target.files[0];
  if (file.type.startsWith('image/')) {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function () {
        const imgSrc = reader.result;
        ...
    };
  } else {
    alert('请选择一张图片进行上传')
  }
}

步骤五：创建Image元素

在onload()回调函数内部，我们创建一个Image元素并设置其src属性，用于显示所上传的图片。

function handleUploadImage(event) {
  const file = event.target.files[0];
  if (file.type.startsWith('image/')) {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function () {
      const imgSrc = reader.result;
      const image = new Image();
      image.src = imgSrc;
      ...
    };
  } else {
    alert('请选择一张图片进行上传')
  }
}

步骤六：预览上传的图片

将Image元素添加到HTML页面中，完成图片上传预览功能。

function handleUploadImage(event) {
  const file = event.target.files[0];
  if (file.type.startsWith('image/')) {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function () {
      const imgSrc = reader.result;
      const image = new Image();
      image.src = imgSrc;
      const preview = document.querySelector('#preview');
      preview.innerHTML = '';
      preview.appendChild(image);
    };
  } else {
    alert('请选择一张图片进行上传')
  }
}

示例一

在这个示例中，我们将上传的图片显示在了HTML页面上。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Upload Preview Example</title>
    <style>
      img {
        max-width: 300px;
      }
    </style>
  </head>
  <body>
    <input type="file" id="upload-input">
    <div id="preview"></div>
    <script>
      const uploadInput = document.querySelector('#upload-input');
      uploadInput.addEventListener('change', handleUploadImage);

      function handleUploadImage(event) {
        const file = event.target.files[0];
        if (file.type.startsWith('image/')) {
          const reader = new FileReader();
          reader.readAsDataURL(file);
          reader.onload = function () {
            const imgSrc = reader.result;
            const image = new Image();
            image.src = imgSrc;
            const preview = document.querySelector('#preview');
            preview.innerHTML = '';
            preview.appendChild(image);
          };
        } else {
          alert('请选择一张图片进行上传');
        }
      }
    </script>
  </body>
</html>

示例二

这个示例演示了如何在canvas元素上绘制所上传的图片。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Upload Preview Example</title>
    <style>
      canvas {
        max-width: 300px;
      }
    </style>
  </head>
  <body>
    <input type="file" id="upload-input">
    <canvas id="preview"></canvas>
    <script>
      const uploadInput = document.querySelector('#upload-input');
      uploadInput.addEventListener('change', handleUploadImage);

      function handleUploadImage(event) {
        const file = event.target.files[0];
        if (file.type.startsWith('image/')) {
          const reader = new FileReader();
          reader.readAsDataURL(file);
          reader.onload = function () {
            const imgSrc = reader.result;
            const image = new Image();
            image.src = imgSrc;
            const preview = document.querySelector('#preview');
            const ctx = preview.getContext('2d');
            image.onload = function () {
              preview.width = image.width;
              preview.height = image.height;
              ctx.drawImage(image, 0, 0);
            };
          };
        } else {
          alert('请选择一张图片进行上传');
        }
      }
    </script>
  </body>
</html>

在这个示例中，我们获取了canvas元素的上下文对象，并在drawImage()方法中将Image元素绘制到canvas上。最后，我们还通过设置canvas元素的宽高，使它的大小与上传的图片一致。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：js上传图片预览的实现方法 - Python技术站