html5 file api 读取本地文件

最新推荐文章于 2023-03-21 09:35:15 发布

jdk137

最新推荐文章于 2023-03-21 09:35:15 发布

阅读量1.1k

点赞数

分类专栏： html5 文章标签： js html5 file-api

本文链接：https://blog.csdn.net/jdk137/article/details/50454597

版权

html5 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

read local file’s text content through html5 file api

demo



<!DOCTYPE html>
<html lang="en">
<head>
  <title>html5 file api.js</title>
  <meta charset="utf-8" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <style>


  input.upload {
    display: none;
  }


  textarea {
    width: 300px;
    height: 200px;
  }


  </style>
</head>
<body>
  <button class="upload">upload</button>
  <input type="file" class="upload"/><br>
  <textarea></textarea>
</body>
<script>
      // click button to trigger file upload
      $('button.upload').on('click', function () {
        $('input.upload').focus().trigger('click');
      });
      $('body').on('change', 'input.upload', function(event) {
        var input = event.target;
        var reader = new FileReader();
        reader.onload = function(){
          var text = reader.result;
          var $editor = $('textarea');
          $editor.val($editor.val() + ';' + text);
        };


        // prevent always upload the first file.
        var $input = $('input.upload');
        $input.replaceWith($input.clone(true));


        reader.readAsText(input.files[0]);
      });


</script>
</html>

jdk137

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5 file api 读取本地文件

webdev-gadgets-readLocalFileread local file’s text content through html5 file apidemo<!DOCTYPE html><html lang="en"><head> <title>html5 file api.js</title> <meta charset="utf-8" /> <script src=
复制链接

扫一扫

专栏目录