正文

学会JS轻松预览图片：图片上传、缩略图展示，让你的网页更生动

/0 浏览量
0616

在网页设计中，图片是传达信息和增强视觉效果的重要元素。通过JavaScript，我们可以轻松实现图片上传和缩略图展示的功能，让网页更加生动和互动。下面，我将详细介绍如何使用JavaScript来实现这一功能。

图片上传

首先，我们需要一个表单来上传图片。HTML部分如下：

<form id="image-upload-form">
  <input type="file" id="image-input" accept="image/*">
  <button type="submit">上传图片</button>
</form>
<div id="image-preview"></div>

接下来，我们需要使用JavaScript来处理图片上传的事件。以下是JavaScript代码：

document.getElementById('image-upload-form').addEventListener('submit', function(event) {
  event.preventDefault(); // 阻止表单默认提交行为

  var fileInput = document.getElementById('image-input');
  var file = fileInput.files[0];
  var reader = new FileReader();

  reader.onload = function(e) {
    var img = document.createElement('img');
    img.src = e.target.result;
    document.getElementById('image-preview').appendChild(img);
  };

  reader.readAsDataURL(file);
});

这段代码首先阻止了表单的默认提交行为，然后获取用户选择的图片文件。接着，使用FileReader对象读取文件内容，并将其转换为DataURL。最后，将读取到的图片创建为img元素，并添加到页面上。

缩略图展示

为了更好地展示上传的图片，我们可以创建一个缩略图展示区域。以下是HTML代码：

<div id="thumbnail-preview"></div>

然后，使用JavaScript为每个上传的图片创建缩略图：

document.getElementById('image-upload-form').addEventListener('submit', function(event) {
  event.preventDefault(); // 阻止表单默认提交行为

  var fileInput = document.getElementById('image-input');
  var file = fileInput.files[0];
  var reader = new FileReader();

  reader.onload = function(e) {
    var img = document.createElement('img');
    img.src = e.target.result;
    img.style.width = '100px';
    img.style.height = '100px';
    document.getElementById('image-preview').appendChild(img);

    // 创建缩略图
    var thumbnail = document.createElement('img');
    thumbnail.src = e.target.result;
    thumbnail.style.width = '50px';
    thumbnail.style.height = '50px';
    document.getElementById('thumbnail-preview').appendChild(thumbnail);
  };

  reader.readAsDataURL(file);
});

在这段代码中，我们为每个上传的图片创建了一个50像素×50像素的缩略图，并将其添加到thumbnail-preview区域。

总结

通过以上步骤，我们可以轻松地使用JavaScript实现图片上传和缩略图展示功能。这不仅可以让网页更加生动，还可以提高用户体验。希望这篇文章能帮助你掌握这一技能。

-- 展开阅读全文 --