原生js FileReader对象实现图片上传本地预览效果

2019-11-19 16:00:45

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了js实现图片上传本地预览效果的具体代码，供大家参考，具体内容如下

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> label{display: inline-block;width:200px;height:40px;border:1px solid #ccc;} .ob{background:#ccc;padding:10px;} .imgbox img{height:100px;width:100px;margin:10px;} </style></head><body> <div class="ob" id="od" draggable="true"> <input type="file" id="file" multiple="multiple"> </div> <div class="imgbox"></div> <script> //获取文件url function createObjectURL(blob){  if (window.URL){  return window.URL.createObjectURL(blob);  } else if (window.webkitURL){  return window.webkitURL.createObjectURL(blob);  } else {  return null;  } } var box = document.querySelector(".imgbox"); //显示图片box var file = document.querySelector("#file"); //file对象 var domFragment = document.createDocumentFragment(); //文档流优化多次改动dom //触发选中文件事件 file.onchange = function(e){  box.innerHTML =""; //清空上一次显示图片效果  e = e || event;  var file = this.files; //获取选中的文件对象  for(var i = 0, len = file.length; i < len; i++){  var imgTag = document.createElement("img");  var fileName = file[i].name; //获取当前文件的文件名  var url = createObjectURL(file[i]); //获取当前文件对象的URL  //忽略大小写  var jpg = (fileName.indexOf(".jpg") > -1) || (fileName.toLowerCase().indexOf(".jpg") > -1);  var png = (fileName.indexOf(".png") > -1) || (fileName.toLowerCase().indexOf(".png") > -1);  var jpeg = (fileName.indexOf(".jpeg") > -1) || (fileName.toLowerCase().indexOf(".jpeg") > -1);  //判断文件是否是图片类型  if(jpg || png || jpeg){   imgTag.src = url;   domFragment.appendChild(imgTag);  }else{   alert("请选择图片类型文件！");  }  }  //最佳显示  box.appendChild(domFragment); } </script></body></html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：JavaScript判断浏览器和hack滚动条的写法

下一篇：JavaScript解析任意形式的json树型结构展示