JavaScript图片预览

使用createObjectURL实现图片预览

1.添加页面元素

添加用来显示图片的<img>元素

  <img id="image-preview" src="">

添加一个file类型的<input>，用来打开图片

  <input type="file" id="file-upload" accept="image/*">

2.给<input>元素注册事件

主要的逻辑都在previewImage函数中，稍晚完善。

var inputEle = document.getElementById('file-input');
window.addEventListener(inputEle, 'change', previewImage);
function previewImage(event) {
  console.log(event);
}

3.完善图片预览函数

取得选中的file对象

  const imageFiles = event.target.files;

使用URL.createObjectURL创建file对象的object url createObjectURL创建的形式是 blob:http://localhost...

  const imageUrl = URL.createObjectURL(imageFiles[0]);

使用页面上的<img>元素显示图片

  const imagePreviewEle = document.getElementById('image-preview');
  imagePreviewEle.src = imageUrl;

完整代码如下：

使用FileReader实现图片预览

1.添加页面元素

添加用来显示图片的<img>元素

  <img id="image-preview" src="">

添加一个file类型的<input>，用来打开图片

  <input type="file" id="file-upload" accept="image/*">

2.给<input>元素注册事件

主要的逻辑都在previewImage函数中，稍晚完善。

var inputEle = document.getElementById('file-input');
window.addEventListener(inputEle, 'change', previewImage);
function previewImage(event) {
  console.log(event);
}

3.完善图片预览函数

取得选中的file对象

  const imageFiles = event.target.files;

创建FileReader对象

  var fr = new FileReader();

在FileReader的onload事件处理函数中显示图片

  document.getElementById(imgId).src = e.target.result;
  fr.onloadend = function(e) {
    imagePreviewEle.src = e.target.result;
  }

使用FileReader的readAsDataURL读取图片
readAsDataURL生成的url的格式是图像文件的base64编码url
效果如：data:image/gif;base64,R0lGODlhAAXQAvcfAAAAACQAAE.....
读取完成之后会触发onload事件,在onload事件中通过e.target.result获取

fr.readAsDataURL(imageFiles[0]);

完整代码如下：