HTML5文件API之FileReader

HTML5 FileReader 文件预览

最新推荐文章于 2024-03-11 15:00:43 发布

weixin_34122810

最新推荐文章于 2024-03-11 15:00:43 发布

阅读量56

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/codelovers/p/4415590.html

本文介绍如何使用HTML5的FileReader API实现文件内容及图片的预览功能，包括readAsDataURL和readAsText两种方法，并提供了一个示例代码。

在文件上传之前，我们总想预览一下文件内容，或图片样子，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>