html5 自动读取文件,Javascript使用HTML5 File Api进行文件读取

javascript 使用Html File Api进行文件读取，注意“读取”是只读不写，不可以主动获取浏览器所在主机的文件列表。

Html5 中 FileApi主要有 FileUpload, File,FileList,FileError，Blob，FileReader,DataTransfer。

这里主要测试File.因此有必要给一个 test target

1

2

3

一. FileUpload是本质是file input的封装，也是 html4.01 和 xhtml 1.0 的api 这里不在多讲

二. File 是文件对象html5的对象，在html5中，每一个被加入到file input中的文件都是一个对象，注意，这个对象一般无法手动生成(安全性考虑)。

1

2

3

4

5

6

7

8

9

10var upfile = document.querySelector('#upfile');

upfile.onchange = function(evt)

{

var e = evt || window.event;

if(upfile.files.length>0)

{

alert((upfile.files[0] instanceOf File));

}

}

File的公开Api有(文件路径无法看见吧)

1

2

3

4lastModified

lastModifiedDate

name

type

三.FileList是一个文件列表 List，这个api很少

1

2

3

4

5

6

7

8

9

10var upfile = document.querySelector('#upfile');

upfile.onchange = function(evt)

{

var e = evt || window.event;

if(upfile.files)// upfile.files，一般来说这个对象也是由系统提供的，不可以自己生成

{

alert(upfile.files);

}

}

主要api属性

1

2length

item(index)

四.FileError这个类可以自己生成，主要用来提示文件操作中的错误，以下基本为常量，可直接使用【类名.属性】

1

2

3

4

5

6

7

8

9

10

11

12ABORT_ERR:3

ENCODING_ERR:5

INVALID_MODIFICATION_ERR:9

INVALID_STATE_ERR:7

NOT_FOUND_ERR:1

NOT_READABLE_ERR:4

NO_MODIFICATION_ALLOWED_ERR:6

PATH_EXISTS_ERR:12

QUOTA_EXCEEDED_ERR:10

SECURITY_ERR:2

SYNTAX_ERR:8

TYPE_MISMATCH_ERR:11

五.Blob是二进制数据，在某些时候，为了让数据库能够存储各类数据，手写需要把数据转为Blob数据才行，在H5中有如下例子

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19var htmlParts = ["hey!"];

var myBlob =new Blob(htmlParts, {"type" :"text\/xml" });//2个参数都是可选，第一个是数组，第二个是 mine-type

//下面是一个利用Blob对象，生成可下载文件的例子。

var blob =new Blob(["Hello World"]);

var a = document.createElement("a");

a.href = window.URL.createObjectURL(blob);

a.download ="hello-world.txt";

a.textContent ="Download Hello World!";

body.appendChild(a);

//也可以和FormData配合使用来上传文件

var formData =new FormData();

// Files formData.append(field, file, filename);

// Blobs formData.append(field, blob, filename);

//当然也可以使用ajax直接发送数据

xhr.send(blob);//目前未见到如何使用，希望读者自行检索网络相关信息

六.FileReader文件读物器，用于读取客户端文件到，注意，文件读取完毕后并不会载入缓存

1

2

3

4

5

6

7

8

9

10

11

12

13var upfile = document.querySelector('#upfile');

var fileReader =new FileReader();

fileReader.onload = function(evt)

{

if(FileReader.DONE==fileReader.readyState)

{

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

img.src =this.result;//是Base64的data url数据

document.body.appendChild(img);

console.log(fileReader);

}

}

fileReader.readAsDataURL(upfile.files[0]);

相关api

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19error:null

onabort:null

onerror:null

onload:null

onloadend:null

onloadstart:null

onprogress:null

readyState:

result:

DONE:2

EMPTY:0

LOADING:1

abort:

function abort()

function readAsBinaryString:

function readAsBinaryString(File Object)

function readAsDataURL(File Object)

function readAsDataURL(File Object)

function readAsText(File Object);

七.DataTransfer 与DataTransferItemList数据传输对象，这类API主要应用于页面数据的交互，如拖拽上传，拖拽选择等方面

注意：这个对象时事件由对象来生成，所以一般和拖拽搭配使用

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35HTML>

#div1, #div2

{float:left; width:100px; height:35px; margin:10px;padding:10px;border:1px solid #aaaaaa;}

function allowDrop(ev)

{

ev.preventDefault();

}

function drag(ev)

{

ev.dataTransfer.setData("Text",ev.target.id);

}

function drop(ev)

{

ev.preventDefault();

var data=ev.dataTransfer.getData("Text");

ev.target.appendChild(document.getElementById(data));

}

或者拖拽外部文件进行数据复制和传输

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54 html>

www.meiweimimi.com/fqa/

将文件拖到此处

function dropHandler(e)

{

e.stopPropagation();

e.preventDefault();

var files = e.dataTransfer.files;

for(var i =0, len = files.length; i 

{

var f = files[i];

console.log(f);

}

}

function dragOverHandler(e)

{

e.stopPropagation();

e.preventDefault();

e.dataTransfer.dragEffect ='copy';//设置当拖拽到指定区域时，让文件可被复制

}

function dragStartHandler(e)

{

}

var drag = document.getElementById('drag');

drag.addEventListener('drop', dropHandler,false);

drag.addEventListener('dragover', dragOverHandler,false);

drag.addEventListener('dragover', dragStartHandler,false);

这些DataTransfer的是主要api

其中 setDragImage是拖拽时要显示的效果图，evt.dataTransfer.setDragImage(imageObject,x,y);

if (event.dataTransfer.setDragImage) {

var rainbow = document.getElementsByTagName('img')[0];

event.dataTransfer.setDragImage (rainbow, 0, 0);

}

try doing it