1、在网页表单中，定义input的type为file，就可以打开存储在计算机上的文件。

<!DOCTYPE html>

<head>

   <meta charset="UTF-8">

   <title>js获取外部文件内容或者目录</title>

</head>

<body>

	<input type="file" />

</body>

　　

2、从中选择某个文件，我们可以获取到什么？没错，选好文件后显出了名称，不是路径。说到这，路径怎么获取，这里有一个FileReader对象可以办到

<!DOCTYPE html>

<head>

   <meta charset="ANSI">

   <title>js获取外部文件内容或者目录</title>

</head>

<body>

	<input type="file" onchange="getFile(this)" />

	<script>

	   function getFile(target)

	   {

		 var FR=new FileReader();

		 var file=target.files;//获取FileList对象

		 console.log(file);

		 console.log(FR);

	   }

	</script>

</body>

　　

input值的改变触发onchange事件，获取并查看fileList和FileReader对象

3、FileReader对象开始连接FileList对象，获取想要的东西。其实就是需要FileList里的数据为FileReader方法的实参。我们先获取它的路径吧。

<!DOCTYPE html>

<head>

   <meta charset="ANSI">

   <title>js获取外部文件内容或者目录</title>

</head>

<body>

	<input type="file" onchange="getFile(this)" />

	<script>

	   function getFile(target)

	   {

		 var FR=new FileReader();

		 var file=target.files;//获取FileList对象

		 FR.onloadend=function(){

			 //创建img标签，并挂载body中

			 var img=document.createElement('img');

			 img.src=FR.result;//绝对路径没谁了

			 document.body.appendChild(img);

		     console.log(FR.result);

		 }

		 if(file[0]){

		     FR.readAsDataURL(file[0]);//开始读取Blob中的内容。一旦完成，result属性中将包含一个data：URL格式的字符串

		 }

	   }

	</script>

</body>

不要管路径了，现在人家和内容没有关系，我再改个方法。

<!DOCTYPE html>

<head>

   <meta charset="ANSI">

   <title>js获取外部文件内容或者目录</title>

</head>

<body>

	<input type="file" onchange="getFile(this)" />

	<script>

	   function getFile(target)

	   {

		 var FR=new FileReader();

		 var file=target.files;//获取FileList对象

		 FR.onloadend=function(){

			 //把内容加载body上

			 var textarea=document.createElement('textarea');

			 textarea.innerHTML=FR.result;//绝对路径没谁了

			 document.body.appendChild(textarea);

		     console.log(FR);

			 console.log(FR.readAsText);

		 }

		 //如果在选取文件时，没有决定哪个文件就退出，然后使用FileReader，会发生错误，说白了，FileList是空的，所以需要判断

		 if(file[0]){

		     FR.readAsText(file[0]);//开始读取Blob中的内容。一旦完成，result属性中将包含字符串以及所读取的文件内容

		 }

	   }

	</script>

</body>

　　

4、这么好用的FileReader对象，兼容性又是怎样的呢？

想要了解FileReader对象更多属性和方法，我们暂不讨论

FileReader对象异步获取外部文件的内容的更多相关文章

  1. .NetCore获取json文件配置内容

    .netcore中的数据配置及内容用了json文件代替了之前framework的xml文件,那么json中的数据该怎么获取呢?下面讲解json文件在.net core中的获取方法. 首先,新建一个.n ...

  2. 获取properties文件的内容

    获取properties文件的内容 public void test() throws Exception{ String resource = "application.propertie ...

  3. 前端用js获取本地文件的内容

    这里要写成input的形式 调用upload函数 传递的参数就表示所选的文件<input type="file" onchange="upload(this)&qu ...

  4. 你知道怎么从jar包里获取一个文件的内容吗

    目录 背景 报错的代码 原先的写法 编写测试类 找原因 最终代码 背景 项目里需要获取一个excle文件,然后对其里的内容进行修改,这个文件在jar包里,怎么尝试都读取不成功,但是觉得肯定可以做到,因 ...

  5. Java thymeleaf模板获取资源文件的内容

    我们在某些时候可能需要获取配置文件properties中的配置信息,而不需要用Java传给模板,在模板中就可以直接获取 我们需要在resources/下定义国际化配置文件即可,注意名称必须中messa ...

  6. C#Winform版获取Excel文件的内容

    public MainForm() { InitializeComponent(); //this.ofd_in.DefaultExt = ".xlsx"; this.ofd_in ...

  7. 读取本地文件理解FileReader对象的方法和事件以及上传按钮的美化。

    一.FileReader对象 用来把文件读入内存,并且读取文件中的数据.FileReader对象提供了异步API,使用该API可以在浏览器主线程中异步访问文件系统,读取文件中的数据. 浏览器支持情况, ...

  8. php获取远程文件内容的函数

    一个简单的php获取远程文件内容的函数代码,兼容性强.直接调用就可以轻松获取远程文件的内容,使用这个函数也可获取图片.代码如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 ...

  9. Spring（二）--FactoryBean、bean的后置处理器、数据库连接池、引用外部文件、使用注解配置bean等

    实验1:配置通过静态工厂方法创建的bean  [通过静态方法提供实例对象,工厂类本身不需要实例化!] 1.创建静态工厂类 public class StaticFactory { private st ...

随机推荐

  1. 安卓中不同APP之间的消息通信

    昨天在腾讯实习生招聘初试面试时面试官问道我关于两个APP之间相互通信的方式,当时自己回道到了contentProvider与BroadcastReceiver.但他接着问还有没有其它的方式,我跟他说可 ...

  2. 手动开发动态资源之servlet初步

    1.1 静态资源和动态资源的区别 静态资源:当用户多次访问这个资源,资源的源代码永远不会改变的资源. 动态资源:当用户多次访问这个资源,资源的源代码可能会发送改变. 1.2动态资源的开发技术 Serv ...

  3. 1033. To Fill or Not to Fill (25) -贪心算法

    题目如下: With highways available, driving a car from Hangzhou to any other city is easy. But since the ...

  4. (NO.00003)iOS游戏简单的机器人投射游戏成形记(十六)

    回到MainScene.m中添加selectRobot方法: -(void)selectRobot:(Robot *)robot{ LevelRestrict *lr = [LevelRestrict ...

  5. Java中的五种单例模式

    Java模式之单例模式: 单例模式确保一个类只有一个实例,自行提供这个实例并向整个系统提供这个实例. 特点: 1,一个类只能有一个实例 2 自己创建这个实例 3 整个系统都要使用这个实例 例: 在下面 ...

  6. iOS中GET 和 POST 数据请求

    iOS中GET 和 POST 网络数据请求 同步请求和异步请求的差别: 1.同步请求,有主线程完成网路请求任务,在数据没有请求之前,用户的所有的交互事件应用都无法处理,会造成一种卡顿现象,影响用户体验 ...

  7. 导航控制器&nbsp;UI_08（上）

    主要内容:UINavigationController 重要:属性传值(向后一个界面传值).代理传值(向前相邻的界面传值).单例传值(不相邻的界面向前传值) 1.UINavigationControl ...

  8. Chapter 2 User Authentication, Authorization, and Security（5）：使用固定服务器角色

    原文出处:http://blog.csdn.net/dba_huangzj/article/details/38844999,专题目录:http://blog.csdn.net/dba_huangzj ...

  9. 敏捷测试（4）--基于story的敏捷基础知识

    基于story的敏捷基础知识----需求管理(一) 基于story进行需求管理 (1)使用story模式来管理需求,将庞大的MRD划分为一个个合适粒度,且可独立交付的story(通常每个story能在 ...

  10. Android进程通信之一：两种序列化方式

    2月下旬辞职了,去海南度假到现在,领略了一把三亚风情也算任性和 然而这样任性带来的后果就是..不行了我必须吐槽一句.. 没毕业的找工作就这么难嘛!投了57家一家面试机会都没有,好歹给个面试机会啊!!本 ...