Home > Article > Web Front-end > Detailed introduction of native js FileReader object

Detailed introduction of native js FileReader object

零下一度Original: 2017-07-24 14:55:272501browse

The example of this article shares with you the specific code of js to achieve the local preview effect of image upload for your reference. The specific content is as follows

<!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>
 <p class="ob" id="od" draggable="true">
 <input type="file" id="file" multiple="multiple">
 </p>
 <p class="imgbox"></p>
 <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>

The above is the detailed content of Detailed introduction of native js FileReader object. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of the usage of Javascript's decorator mode compared with php and pythonNext article：Detailed explanation of the usage of Javascript's decorator mode compared with php and python

See more

Detailed introduction of native js FileReader object

Related articles