HTML5文件API之FileReader

在文件上传之前，我们总想预览一下文件内容，或图片样子，html5 中FileReader正好提供了2种方法，可以在不上传文件的情况下，预览文件内容。

图片预览：readAsDataURL(file);

文件预览：readAsText();（必须保证文件编码格式与代码编码格式相同，预览中文才不会乱码）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HTML5练习</title>
  <style type="text/css">
   

  </style>
</head>
<body>
    <input type = file id = 'file'/>
    <input type = button onclick = 'readImg()' value = '读取图像'/> 
    <input type = button onclick = 'readFile()' value = '读取文件'/>
    <div id = 'result'></div>
    <script language = 'javascript'>
      function showFileName(){
        var files = document.getElementById('file').files;
        var file;
        for(var i = 0, len = files.length; i < len; i++){
          file = files[i];
          console.log(file.name);
        }
      }

      function readImg(){
        var file = document.getElementById('file').files[0];
        if(!/image\/\w+/.test(file.type)){
          alert("请确保文件为图像类型！");
          return false;
        }
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function(e){
          var result = document.getElementById('result');
          result.innerHTML = "<img src = '"+this.result+"' alt = ''/>";
        };
      }

      function readFile(){
        var  file = document.getElementById('file').files[0];
        var reader = new FileReader();
        reader.readAsText(file);
        reader.onload = function(f){
          var result = document.getElementById('result');
          result.innerHTML = this.result;
        }
      }

    </script>
</body>
</html>

只有足够努力，才能看起来毫不费力

相关阅读:
jQuery 入门 -- 事件事件绑定与事件委托
原生js实现视差风格音乐播放器
jQuery 入门
一些开放的免费接口【已失效】
php mysqli操作数据库
DOM 相关
面向对象
对象
博客园添加鼠标点击特效
正则表达式

原文地址：https://www.cnblogs.com/codelovers/p/4415590.html