Dzwebs.Net

撰写电脑技术杂文十余年

jquery html5 读取本地文件示例代码

Admin | 2016-7-29 9:39:27 | 被阅次数 | 6619

温馨提示!

如果未能解决您的问题,请点击搜索;登陆可复制文章,点击登陆

  有了html5之后,通过jquery读取本地文件,就变得非常简单了。下面是例子,请大家过目。

  首先,头文件添加如下的引用。

  <script type="text/javascript" src="jQuery.js"></script>

  接着,网页中添加如下的标签。

  <div id="fileDisplayArea"></div>

  最后,就是JS代码了。

  <script type="text/javascript">  
window.onload = function()
{
    var fileInput = document.getElementById("fileInput");
    var fileDisplayArea = document.getElementById("fileDisplayArea");

    fileInput.addEventListener('change', function(e)
    {
        var file = fileInput.files[0];
        var textType = /text.*/;

        if (file.type.match(textType))//文本类型的文件
        {
            var reader = new FileReader();
            reader.readAsText(file);    
            reader.onload = function(e)
            {
                var GetStr=reader.result.split("\n");//读取记事本文件,换行符为\n
                for(var i=0;i<GetStr.length;i++)
                {                   
                    //alert(GetStr[i].split(",")[0]);

      alert(GetStr[i]);

                }
            }
        }
        else
        {
            fileDisplayArea.innerText = "不支持该类型的文件!"
        }
    });
}

  </script>

  提示:注意哦,例子中的文本文件,内容形如:

  19126210091383,姓名,26,36,30,信息技术
  19126210091485,姓名,26,36,1,信息技术
  19126210091486,姓名,24,36,2,信息技术
  19126210090715,姓名,22,36,3,信息技术
  19126210091220,姓名,20,36,4,信息技术


网站备案号:

网站备案号:滇ICP备11001339号-7

版权属性:

Copyright 2007-2021-forever Inc. all Rights Reserved.

联系方式:

Email:dzwebs@126.com QQ:83539231