利用input type=file和FileReader API实现在浏览器客户端通过选择对话框读取文件

最新推荐文章于 2024-03-20 12:15:12 发布

孙群

最新推荐文章于 2024-03-20 12:15:12 发布

阅读量3.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： Web 文章标签： file input 浏览器 api function html5

本文链接：https://blog.youkuaiyun.com/iispring/article/details/8021683

Web 专栏收录该内容

36 篇文章

订阅专栏

本文介绍如何使用HTML5的input type=file和FileReader API在浏览器端读取用户选择的本地文件。通过示例代码展示了读取文本文件的具体实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如题，利用input type=file和FileReader API实现在浏览器客户端通过选择对话框读取文件，代码如下，以读取文本文件为例：

<!DOCTYPE html>
<html>
  <head>
    <title><input> File Selection</title>
  </head>
  <body>
    <h1>HTML5 <input> File Selection</h1>
    <h3>Example 1</h3>
    <input type="file" id="fileSelector" multiple />
    <script type="text/javascript">
      var message = [];

      if (!document.getElementById('fileSelector').files) {
        message = '<p>浏览器不支持FileReader API</p>';
      
        document.querySelector('body').innerHTML = message;
      }
      else {
        document.getElementById('fileSelector').addEventListener('change', handleFileSelection, false);
      }
      
      function handleFileSelection(evt) {    
        var files = evt.target.files;  
        if (!files) {
          msa.alert("<p>At least one selected file is invalid - do not select any folders.</p><p>Please reselect and try again.</p>");
          return;
        }
		
		var fileType = files[0].type;
		
		reader = new FileReader();
		
		if (fileType.indexOf('text/plain') == -1) {
            alert('请选择文本文件~');
            return;
        }

        reader.onload = function(e) {
			console.log(this.result);
        }
        reader.readAsText(files[0]);
      }
    </script>
  </body>
</html>