js中如何点击一个按钮d出一个file文件框

js中点击一个按钮d出一个file文件框的步骤如下：

1.在文件夹中创建一个辩纳html文件“test”。

2.在test文件中添加一个html的框架。

3.添加两个input，一个是button，一个是file把id设置伍禅为“open”style类型设置为“display:none”不显示。

4.打开后我们发现只显示这一个“打开文件”按钮。

5.现在我们给button添加onclick事件，调用openfile触发id为“open”的file。

6.现在我们在浏览器中点击“打开文件”文件按钮就会d出选择文件路径对话框了。这样就携橘没解决了js中点击一个按钮d出一个file文件框的问题了。

创建文件

一共有3种方法可用于创建一个空文本文件，这种文件有时候也叫做文本流（text stream）。

第一种凳尺是使用CreateTextFile方法。代码如下：

var fso, f1

fso = new ActiveXObject("Scripting.FileSystemObject")

f1 = fso.CreateTextFile("c://testfile.txt", true)

第二种是使用OpenTextFile方法，并添加上ForWriting属性，ForWriting的值为2。代码如下：

var fso, ts

var ForWriting= 2

fso = new ActiveXObject("Scripting.FileSystemObject")

ts = fso.OpenTextFile("c://test.txt", ForWriting, true)

第三种是使用OpenAsTextStream方法，同样要设置好ForWriting属性。代码如下：

var fso, f1, ts

var ForWriting = 2

fso = new ActiveXObject("Scripting.FileSystemObject")

fso.CreateTextFile ("c://test1.txt")

f1 = fso.GetFile("c://test1.txt")

ts = f1.OpenAsTextStream(ForWriting, true)

（二）添加数据到文件

当文件被创建后，一般要按照“打开文件－>填写数据－>关闭文件枣穗高”的步骤实现添加数据到文件的目的。

打开文件可使用FileSystemObject对象的OpenTextFile方法，或者使用File对象的OpenAsTextStream方法。

填写数据要使用到TextStream对象的Write、WriteLine或者WriteBlankLines方法。在同族衫是实现写入数据的功能下，这3者的区别在于：Write方法不在写入数据末尾添加新换行符，WriteLine方法要在最后添加一个新换行符，而WriteBlankLines则增加一个或者多个空行。

关闭文件可使用TextStream对象的Close方法。

​​​​​​

    1 页面HTML内容

    2 获取input[file]元素    

    3 对获取的file元素 *** 作，也就是 *** 作fileReader属性    

1：Blob

2:  File

3:  FileList

4:  FileReader

FileList ：

这里，默认状态下选择文件 每次files属性上FileList对象里只有一个file文件。

file对象中包含了name 文件名size type 文件类型lastModified 最后修改时间枯蔽；

FileReader：异步读取本地文件内容；包括File 和Blob ；

    创建FileReader对象读取file文件

关于fileReader的几个属性：

FileReader.error 只读一个 DOMException 代表在读取文件中出现的错误。 FileReader.readyState 只读一个数字表明的状态FileReader。这是以下之一：

FileReader.result 只读文件的内容。该属性仅在读取 *** 作完成后才有效，并且数据的格式取决于使用哪种方法来启动读取 *** 作。

fileReader的几芹桥个事件处理程序：

1 . FileReader.onbort:在读取 *** 作中止时触发。

2 . FileReader.onerror:在读取 *** 作遇到错误时触发。

3 . FileReader.onload:在读取 *** 作成功完成时触发。

4 . FileReader.onloadstart:在开始阅读时触发。

5 . FileReader.onloadend:无论是否成功 只要读取 *** 作完成都会触发。

6 . FileReader.onprogress:阅读Blob内容时触发。

FileReader的方法：

1 . FileReader.abort()中止读取 *** 作

2 . FileReader.readAsArrayBuffer()完成时result属性包含ArrayBuffer表示文件数据

3 . FileReader.readAsBinaryString()完成时result属性将包含来自文件的原始二进制数据作为字符串。

4 . FileReader.readAsDataURL()完成时result属性包含data：表示文本数据的URL；

5 . FileReader.readAsText()完成没首州时result属性包含文本的内容作为文本字符串。

---