正文

学会JS轻松上传多张图片：快速入门技巧与实战案例

/0 浏览量
1102

在当今的互联网时代，图片上传功能已经成为许多网站和应用程序的必备功能。JavaScript（简称JS）作为前端开发的重要工具，可以帮助我们轻松实现图片的上传功能。本文将为你介绍如何使用JS轻松上传多张图片，并提供一些实战案例，帮助你快速入门。

一、基础知识

在开始编写代码之前，我们需要了解一些基础知识。

1. HTML5的<input>元素

HTML5的<input>元素新增了type="file"属性，允许用户通过文件选择器选择文件进行上传。multiple属性可以允许多选文件。

<input type="file" multiple>

2. JavaScript的FileReader对象

FileReader对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容。使用FileReader可以读取文件内容，例如图片。

var reader = new FileReader();
reader.onload = function(e) {
  // 文件读取完成后的处理
};
reader.readAsDataURL(file);

二、实现多张图片上传

下面是一个简单的多张图片上传的示例：

<input type="file" multiple id="upload-input">
<div id="preview-container"></div>

document.getElementById('upload-input').addEventListener('change', function(e) {
  var files = e.target.files;
  var previewContainer = document.getElementById('preview-container');
  previewContainer.innerHTML = ''; // 清空预览区域

  for (var i = 0; i < files.length; i++) {
    var file = files[i];
    var reader = new FileReader();
    reader.onload = function(e) {
      var img = document.createElement('img');
      img.src = e.target.result;
      previewContainer.appendChild(img);
    };
    reader.readAsDataURL(file);
  }
});

三、实战案例

1. 图片压缩上传

在实际应用中，我们可能需要将上传的图片进行压缩，以减少上传时间和服务器存储空间。以下是一个使用Canvas进行图片压缩的示例：

function compressImage(file, callback) {
  var reader = new FileReader();
  reader.onload = function(e) {
    var img = new Image();
    img.onload = function() {
      var canvas = document.createElement('canvas');
      var ctx = canvas.getContext('2d');
      var scale = 0.5; // 压缩比例
      canvas.width = img.width * scale;
      canvas.height = img.height * scale;
      ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
      canvas.toBlob(function(blob) {
        callback(blob);
      }, 'image/jpeg', 0.7); // 质量参数
    };
    img.src = e.target.result;
  };
  reader.readAsDataURL(file);
}

document.getElementById('upload-input').addEventListener('change', function(e) {
  var files = e.target.files;
  for (var i = 0; i < files.length; i++) {
    compressImage(files[i], function(blob) {
      // 上传压缩后的图片
    });
  }
});

2. 图片预览与上传

在实际应用中，我们可能需要在用户选择图片后立即展示图片预览，并在用户确认后进行上传。以下是一个简单的示例：

<input type="file" multiple id="upload-input">
<div id="preview-container"></div>
<button id="upload-btn">上传</button>

document.getElementById('upload-input').addEventListener('change', function(e) {
  var files = e.target.files;
  var previewContainer = document.getElementById('preview-container');
  previewContainer.innerHTML = ''; // 清空预览区域

  for (var i = 0; i < files.length; i++) {
    var file = files[i];
    var reader = new FileReader();
    reader.onload = function(e) {
      var img = document.createElement('img');
      img.src = e.target.result;
      previewContainer.appendChild(img);
    };
    reader.readAsDataURL(file);
  }
});

document.getElementById('upload-btn').addEventListener('click', function() {
  // 获取预览区域内的图片
  var images = document.querySelectorAll('#preview-container img');
  // 进行上传操作
});

通过以上示例，相信你已经掌握了使用JS轻松上传多张图片的技巧。在实际开发过程中，可以根据需求进行扩展和优化。祝你学习愉快！

-- 展开阅读全文 --