Javascript图片上传前的本地预览实例

下面是“Javascript图片上传前的本地预览实例”的完整攻略。

知识储备

在开始我们的实例之前，需要对以下知识进行了解：

• 用户通过 <input type="file"> 选择本地图片，设置 onchange 事件来获取图片的文件信息；
• 利用 FileReader 对文件进行读取，获取读取后的文件对象；
• 将文件对象转化为图片的 url 地址，实现本地预览效果；
• 最后通过 ajax 请求将图片上传至服务器。

实例操作步骤

步骤一、HTML结构

首先我们需要构建一个选择文件的 <input> 元素和一个显示图片的 <img> 元素。代码如下：

<input type="file" id="fileInput">
<img id="previewImg">

步骤二、监听文件选择事件

通过 addEventListener 监听文件选择事件，当用户选择完文件后，将触发 handleFileSelect 这个函数，代码如下：

document.getElementById('fileInput').addEventListener('change', handleFileSelect, false);

function handleFileSelect(event) {
  const file = event.target.files[0];
  console.log(file);
}

步骤三、读取文件并显示预览图像

通过 FileReader 将选择的图片文件转化成 url 地址，然后赋值给 <img> 元素，实现图片的本地预览功能。代码如下：

function handleFileSelect(event) {
  const file = event.target.files[0];
  const imageType = /^image\//;
  if (!imageType.test(file.type)) {
    alert('请选择图片文件！');
    return;
  }

  const reader = new FileReader();
  reader.onload = function(event) {
    document.getElementById('previewImg').src = event.target.result;
  };
  reader.readAsDataURL(file);
}

步骤四、使用 ajax 将图片上传至服务器

最后，我们利用 ajax 将图片上传至服务器，具体上传实现方式可以根据项目需要进行调整，以下示例为上传至阿里云 OSS 的实现方式。

function uploadToOss(file) {
  const client = new OSS({
    accessKeyId: 'your accessKey',
    accessKeySecret: 'your accessSecret',
    region: 'your region',
    bucket: 'your bucket'
  });
  const storeAs = 'your object key';
  client.multipartUpload(storeAs, file).then(function (result) {
    console.log(result);
  }).catch(function (err) {
    console.log(err);
  });
}

以上就是 Javascript 图片上传前的本地预览实例的完整攻略了。

示例说明

示例一

通过文件选择框选择本地图片，实现预览效果，并将图片上传至阿里云 OSS 中，具体演示可以查看这个demo。

示例二

通过拖拽文件到页面中实现本地预览效果，并将图片上传到服务器中，具体演示可以查看这个demo。