Home > Web Front-end > JS Tutorial > body text

Detailed introduction of native js FileReader object

零下一度
Release: 2017-07-24 14:55:27
Original
2500 people have browsed it

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>
Copy after login

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!

Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!