前端文件上传并预览实现教程 - JavaScript 代码示例

前端实现文件上传并预览

本文将介绍如何使用 JavaScript 实现前端文件上传功能，并提供代码示例展示如何通过 FileReader 对象预览上传的文件。

1. HTML 部分

在 HTML 中，创建一个文件上传表单，包含一个 input 类型为 'file' 的元素，以及一个用于触发预览的按钮。

<form enctype='multipart/form-data'>
  <input type='file' id='fileInput' name='fileInput' />
  <br/>
  <button id='previewButton' type='button'>预览</button>
</form>

2. JavaScript 部分

在 JavaScript 中，需要为按钮添加 'click' 事件监听器，以及为文件上传表单添加 'submit' 事件监听器。在 'submit' 事件监听器中，可以使用 FormData 对象来将文件上传到服务器。在 'click' 事件监听器中，可以通过 FileReader 对象来预览上传的文件。

// 获取 input 元素和按钮元素
var fileInput = document.getElementById('fileInput');
var previewButton = document.getElementById('previewButton');

// 为按钮添加 'click' 事件监听器
previewButton.addEventListener('click', function() {
  // 获取上传的文件
  var file = fileInput.files[0];
  // 如果文件为空，则不进行预览
  if (!file) {
    return;
  }
  // 创建 FileReader 对象
  var reader = new FileReader();
  // 设置 FileReader 对象的 'onload' 事件监听器，当文件读取完成后触发
  reader.onload = function() {
    // 创建一个 img 元素，用于显示预览图像
    var img = document.createElement('img');
    img.src = reader.result;
    // 将 img 元素添加到页面上
    document.body.appendChild(img);
  };
  // 读取文件
  reader.readAsDataURL(file);
});

// 为文件上传表单添加 'submit' 事件监听器
form.addEventListener('submit', function(event) {
  // 阻止默认提交行为
  event.preventDefault();
  // 创建 FormData 对象
  var formData = new FormData(form);
  // 发送上传请求
  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/upload');
  xhr.send(formData);
});

代码说明

1. 在 'click' 事件监听器中，我们使用 FileReader 对象来读取上传的文件。FileReader 对象的 readAsDataURL() 方法可以将文件读取为 Data URL 格式，方便在页面上显示预览图像。
2. 在 'submit' 事件监听器中，我们使用 FormData 对象来封装上传的文件数据。FormData 对象可以将表单数据以键值对的形式进行封装，并发送到服务器。
3. 最后，使用 XMLHttpRequest 对象发送上传请求，将 FormData 对象中的数据发送到服务器。

通过以上代码，可以实现文件上传并预览的功能。当用户点击预览按钮时，即可在页面上显示上传的文件预览图像。当用户提交文件时，文件将被上传到服务器。

注意： 上述代码仅供参考，实际应用中可能需要根据具体需求进行调整。