原生JS 读取图片文件，并显示预览

<div class="form-group">
  <label for="exampleInputFile">文章封面</label>
  <input name="cover" type="file" onchange="fileChange(this)" id="file">
  <div class="thumbnail-waper">
    <img class="img-thumbnail" src="" id="preview">
  </div>
</div>

// 处理预览上传图片文件
var file = document.getElementById("file");
var preview = document.getElementById("preview");
// 当用户选择完文件以后
function fileChange() {
  // 创建文件读取对象
  var reader = new FileReader();
  // 用户选择的文件列表
  // console.log(this.files[0]);
  // 读取文件
  reader.readAsDataURL(this.files[0]);
  // 监听onload事件
  reader.onload = function() {
    console.log(reader.result);
    // 将读取的结果显示在页面中
    preview.src = reader.result;
  }
}

最后

以上就是简单黄豆为你收集整理的原生JS 读取图片文件，并显示预览的全部内容，希望文章能够帮你解决原生JS 读取图片文件，并显示预览所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。