8/10/2019 api html5.pdf

http://slidepdf.com/reader/full/api-html5pdf 1/13

Check out Firefox Developer Edition, the !rst browser built for developers like you. http://mzl.la/112VrtT

Using!

les from web applicationsUsing the File API, which was added to the DOM in HTML5, it's now possible for web content to ask the user

to select local !les, then read the contents of those !les. This selection can be done by either using an

HTML <input> element, or by drag and drop.

If you want to use the DOM File API from extensions or other browser chrome code, you can; in fact, there

are some additional features to be aware of. See Using the DOM File API in chrome code for details.

Accessing selected !le(s)Consider this HTML:

The File API makes it possible to access a FileList containing File objects representing the !les selected

by the user.

If the user selects just one !le, it is then only necessary to consider the !rst !le of the list.

Accessing one selected !le using a classical DOM selector:

Accessing one selected !le using a  jQuery selector:

!"#$%& &($)*+,"-)+ ".*+"#$%&+/1

012 3)-)4&).5,"-) * .64%7)#&89)&:-)7)#&;(<.=>"#$%&>?8,"-)3@ABC1

012 3)-)4&).5,"-) * D=>E"#$%&>?89)&=A?8,"-)3@ABC

012 3)-)4&).5,"-) * D=>E"#$%&>?@AB8,"-)3@ABC

1

2

3

8/10/2019 api html5.pdf

http://slidepdf.com/reader/full/api-html5pdf 2/13

Accessing selected !le(s) on a change eventIt is also possible (but not mandatory) to access the FileList through the change event:

When the user selects a !le, the handleFiles() function gets called with a FileList object containing

File objects representing the !les selected by the user.

If you want to let the user select multiple !les, simply use the multiple attribute on the input element:

In this case, the !le list passed to the handleFiles() function contains one File object for each !le the

user selected.

Dynamically adding a change listener

If your input !eld was created using a JavaScript library such as  jQuery, you'll need to use

element.addEventListener() to add the change event listener, like this:

Note that in this case, the handleFiles() function itself is the event handler, unlike previous examples

where it was called by an event handler which passed it a parameter.

Getting information about selected !le(s)The FileList object provided by the DOM lists all the !les selected by the user, each speci!ed as a File

object. You can determine how many !les the user selected by checking the value of the !le list's length

attribute:

Individual File objects can be retrieved by simply accessing the list as an array:

!"#$%& &($)*+,"-)+ ".*+"#$%&+ 6#4F1#9)*+F1#.-)G"-)3=&F"38,"-)3?+/1

!"#$%& &($)*+,"-)+ ".*+"#$%&+ 7%-&"$-) 6#4F1#9)*+F1#.-)G"-)3=&F"38,"-)3?+/1

012 "#$%&:-)7)#& * .64%7)#&89)&:-)7)#&;(<.=+"#$%&+?C

"#$%&:-)7)#&81..:0)#&H"3&)#)2=+4F1#9)+I F1#.-)G"-)3I ,1-3)?C

,%#4&"6# F1#.-)G"-)3=? J

  012 ,"-)H"3& * &F"38,"-)3C KL #6M (6% 41# M62N M"&F &F) ,"-) -"3& LK

O

1

2

3

4

5

012 #%7G"-)3 * ,"-)38-)#9&FC1

8/10/2019 api html5.pdf

http://slidepdf.com/reader/full/api-html5pdf 3/13

This loop iterates over all the !les in the !le list.

There are three attributes provided by the File object that contain useful information about the !le.

name

The !le's name as a read-only string. This is just the !le name, and does not include any path

information.

size

The size of the !le in bytes as a read-only 64-bit integer.

type

The MIME type of the !le as a read-only string, or "" if the type couldn't be determined.

Example: Showing !le(s) size

The following example shows a possible use of the size property:

,62 =012 " * AI #%7G"-)3 * ,"-)38-)#9&FC " ! #%7G"-)3C "PP? J

  012 ,"-) * ,"-)3@"BC

  88

O

1

2

3

4

!QRSTUVW: F&7-/

!F&7-/

!F)1./

!7)&1 4F123)&*+XUGYZ+/

!&"&-)/G"-)=3? 3"[)!K&"&-)/

!342"$&/

,%#4&"6# %$.1&)\"[)=? J

  012 #;(&)3 * AI

  6G"-)3 * .64%7)#&89)&:-)7)#&;(<.=+%$-61.<#$%&+?8,"-)3I

  #G"-)3 * 6G"-)38-)#9&FC  ,62 =012 #G"-)<. * AC #G"-)<. ! #G"-)3C #G"-)<.PP? J

  #;(&)3 P* 6G"-)3@#G"-)<.B83"[)C

  O

  012 3S%&$%& * #;(&)3 P + ](&)3+C

  KK 6$&"6#1- 46.) ,62 7%-&"$-)3 1$$26^"71&"6#

  ,62 =012 1_%-&"$-)3 * @+`";+I +_";+I +a";+I +U";+I +W";+I +:";+I +b";+I +V";+BI #_%-

  3S%&$%& * #c$$26^8&6G"^).=d? P + + P 1_%-&"$-)3@#_%-&"$-)B P + =+ P #;(&)3 P + ](&

  O

  KK )#. 6, 6$&"6#1- 46.)

  .64%7)#&89)&:-)7)#&;(<.=+,"-)e%7+?8"##)2fU_H * #G"-)3C  .64%7)#&89)&:-)7)#&;(<.=+,"-)\"[)+?8"##)2fU_H * 3S%&$%&C

O

!K342"$&/

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

8/10/2019 api html5.pdf

http://slidepdf.com/reader/full/api-html5pdf 4/13

Using hidden!le input elements using the click()methodStarting in Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1), you can hide the admittedly ugly !le

<input> element and present your own interface for opening the !le picker and displaying which !le or

!les the user has selected. You can do this by styling the input element with display:none and calling the

click() method on the <input> element.

Consider this HTML:

The code that handles the click event can look like this:

Obviously you can style the new button for opening the !le picker as you wish.

Selecting!les using drag and dropYou can also let the user drag and drop !les into your web application.

The !rst step is to establish a drop zone. Exactly what part of your content will accept drops may vary

depending on the design of your application, but making an element receive drop events is easy:

!KF)1./

!]6.( 6#-61.*+%$.1&)\"[)=?C+/

!,627 #17)*+%$-61.G627+/

!$/!"#$%& ".*+%$-61.<#$%&+ &($)*+,"-)+ #17)*+7(G"-)3+ 6#4F1#9)*+%$.1&)\"[)=?C+ 7%-&"$-

!$/!"#$%& &($)*+3%]7"&+ 01-%)*+\)#. ,"-)+/!K$/

!K,627/

!K]6.(/

!KF&7-/

24

25

26

27

28

29

30

31

32

!"#$%& &($)*+,"-)+ ".*+,"-):-)7+ 7%-&"$-) 144)$&*+"719)KL+ 3&(-)*+."3$-1(g#6#)+ 6#4F1#

!1 F2),*+E+ ".*+,"-)\)-)4&+/\)-)4& 367) ,"-)3!K1/

1

2

012 ,"-)\)-)4& * .64%7)#&89)&:-)7)#&;(<.=+,"-)\)-)4&+?I

  ,"-):-)7 * .64%7)#&89)&:-)7)#&;(<.=+,"-):-)7+?C

,"-)\)-)4&81..:0)#&H"3&)#)2=+4-"4N+I ,%#4&"6# =)? J

  ", =,"-):-)7? J

  ,"-):-)784-"4N=?C

  O

  )8$2)0)#&R),1%-&=?C KK $2)0)#& #10"91&"6# &6 +E+OI ,1-3)?C

1

2

3

4

5

6

7

8

9

8/10/2019 api html5.pdf

http://slidepdf.com/reader/full/api-html5pdf 5/13

In this example, we're turning the element with the ID dropbox into our drop zone. This is done by adding

listeners for the dragenter, dragover, and drop events.

We don't actually need to do anything with the dragenter and dragover events in our case, so these

functions are both simple. They just stop propagation of the event and prevent the default action from

occurring:

The real magic happens in the drop() function:

Here, we retrieve the dataTransfer !eld from the event, then pull the !le list out of it, passing that to

handleFiles(). From this point on, handling the !les is the same whether the user used the input

element or drag and drop.

Example: Showing thumbnails of user-selectedimages

012 .26$]6^C

.26$]6^ * .64%7)#&89)&:-)7)#&;(<.=+.26$]6^+?C

.26$]6^81..:0)#&H"3&)#)2=+.219)#&)2+I .219)#&)2I ,1-3)?C

.26$]6^81..:0)#&H"3&)#)2=+.21960)2+I .21960)2I ,1-3)?C

.26$]6^81..:0)#&H"3&)#)2=+.26$+I .26$I ,1-3)?C

1

2

3

4

5

6

,%#4&"6# .219)#&)2=)? J  )83&6$W26$191&"6#=?C

  )8$2)0)#&R),1%-&=?C

O

,%#4&"6# .21960)2=)? J

  )83&6$W26$191&"6#=?C

  )8$2)0)#&R),1%-&=?C

O

1

2

3

4

5

6

7

8

9

,%#4&"6# .26$=)? J

  )83&6$W26$191&"6#=?C

  )8$2)0)#&R),1%-&=?C

  012 .& * )8.1&1U21#3,)2C

  012 ,"-)3 * .&8,"-)3C

  F1#.-)G"-)3=,"-)3?C

O

1

2

3

4

5

6

7

8

9

8/10/2019 api html5.pdf

http://slidepdf.com/reader/full/api-html5pdf 6/13

Let's say you're developing the next great photo-sharing web site, and want to use HTML5 to display

thumbnail previews of images before the user actually uploads them. You can establish your input element

or drop zone as discussed previously, and have them call a function such as the handleFiles() function

below.

Here our loop handling the user-selected !les looks at each !le's type attribute to see if it's an image !le(by doing a regular expression match on the string "image.*"). For each !le that is an image, we create a

new img element. CSS can be used to establish any pretty borders, shadows, and to specify the size of the

image, so that doesn't even need to be done here.

Each image has the CSS class obj added to it, to make them easy to !nd in the DOM tree. We also add a

file attribute to each image specifying the File for the image; this will let us fetch the images for actually

uploading later. Finally, we use Node.appendChild() to add the new thumbnail to the preview area of 

our document.

Then we establish the FileReader to handle actually asynchronously loading the image and attaching it to

the img element. After creating the new FileReader object, we set up its onload function, then call

readAsDataURL() to start the read operation in the background. When the entire contents of the image

!le are loaded, they are converted into a data: URL, which is passed to the onload callback. Our

implementation of this routine simply sets the img element's src attribute to the loaded image, which

results in the image appearing in the thumbnail on the user's screen.

Using object URLsGecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) introduces support for the DOM

,%#4&"6# F1#.-)G"-)3=,"-)3? J

  ,62 =012 " * AC " ! ,"-)38-)#9&FC "PP? J

  012 ,"-) * ,"-)3@"BC

  012 "719)U($) * K"719)8LKC

 

", =Q,"-)8&($)871&4F="719)U($)?? J

  46#&"#%)C

  O

 

012 "79 * .64%7)#&842)1&):-)7)#&=+"79+?C

  "7984-133H"3&81..=+6]h+?C

  "798,"-) * ,"-)C

  $2)0")M81$$)#.TF"-.="79?C KK c33%7"#9 &F1& +$2)0")M+ "3 1 &F) ."0 6%&$%& MF)2) &F)

012 2)1.)2 * #)M G"-)i)1.)2=?C

  2)1.)286#-61. * =,%#4&"6#=1<79? J 2)&%2# ,%#4&"6#=)? J 1<798324 * )8&129)&82)3%-&C 

2)1.)282)1.c3R1&1XiH=,"-)?C

  O

O

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

8/10/2019 api html5.pdf

http://slidepdf.com/reader/full/api-html5pdf 7/13

window.URL.createObjectURL() and window.URL.revokeObjectURL() methods. These let you

create simple URL strings that can be used to reference any data that can be referred to using a DOM File

object, including local !les on the user's computer.

When you have a File object you'd like to reference by URL from HTML, you can create an object URL for it

like this:

The object URL is a string identifying the File object. Each time you call

window.URL.createObjectURL(), a unique object URL is created, even if you've created an object URL

for that !le already. Each of these must be released. While they are released automatically when the

document is unloaded, if your page uses them dynamically, you should release them explicitly by calling

window.URL.revokeObjectURL():

Example: Using object URLs to display imagesThis example uses object URLs to display image thumbnails. In addition, it displays other !le information

including their names and sizes. You can view the example live.

The HTML that presents the interface looks like this:

This establishes our !le <input> element, as well as a link that invokes the !le picker, since we keep the

!le input hidden to prevent that less-than-attractive UI from being displayed. This is explained in the

section Using hidden !le input elements using the click() method, as is the method that invokes the !le

picker.

The handleFiles() method follows:

012 6]h)4&XiH * M"#.6M8XiH842)1&)S]h)4&XiH=,"-)S]h?C1

M"#.6M8XiH82)06N)S]h)4&XiH=6]h)4&XiH?C1

!"#$%& &($)*+,"-)+ ".*+,"-):-)7+ 7%-&"$-) 144)$&*+"719)KL+ 3&(-)*+."3$-1(g#6#)+ 6#4F1#

!1 F2),*+E+ ".*+,"-)\)-)4&+/\)-)4& 367) ,"-)3!K1/ 

!."0 ".*+,"-)H"3&+/

  !$/e6 ,"-)3 3)-)4&).Q!K$/

!K."0/

1

2

3

4

5

M"#.6M8XiH * M"#.6M8XiH jj M"#.6M8M)]N"&XiHC

012 ,"-)\)-)4& * .64%7)#&89)&:-)7)#&;(<.=+,"-)\)-)4&+?I

  ,"-):-)7 * .64%7)#&89)&:-)7)#&;(<.=+,"-):-)7+?I

1

2

3

4

8/10/2019 api html5.pdf

http://slidepdf.com/reader/full/api-html5pdf 8/13

This starts by fetching the URL of the <div> with the ID fileList. This is the block into which we'll insert

out !le list, including thumbmails.

If the FileList object passed to handleFiles() is null, we simply set the inner HTML of the block to

display "No !les selected!". Otherwise, we start building our !le list, as follows:

1. A new unordered list (<ul>) element is created.

2. The new list element is inserted into the <div> block by calling its element.appendChild()

method.

3. For each File in the FileList represented by files:

1. Create a new list item (<li>) element and insert it into the list.

2. Create a new image (<img>) element.

  ,"-)H"3& * .64%7)#&89)&:-)7)#&;(<.=+,"-)H"3&+?C

,"-)\)-)4&81..:0)#&H"3&)#)2=+4-"4N+I ,%#4&"6# =)? J

  ", =,"-):-)7? J

  ,"-):-)784-"4N=?C

  O

  )8$2)0)#&R),1%-&=?C KK $2)0)#& #10"91&"6# &6 +E+

OI ,1-3)?C

,%#4&"6# F1#.-)G"-)3=,"-)3? J

  ", =Q,"-)38-)#9&F? J

  ,"-)H"3&8"##)2fU_H * +!$/e6 ,"-)3 3)-)4&).Q!K$/+C

  O )-3) J

  012 -"3& * .64%7)#&842)1&):-)7)#&=+%-+?C

  ,62 =012 " * AC " ! ,"-)38-)#9&FC "PP? J

  012 -" * .64%7)#&842)1&):-)7)#&=+-"+?C

  -"3&81$$)#.TF"-.=-"?C

 

012 "79 * .64%7)#&842)1&):-)7)#&=+"79+?C  "798324 * M"#.6M8XiH842)1&)S]h)4&XiH=,"-)3@"B?C

  "798F)"9F& * kAC

  "7986#-61. * ,%#4&"6#=)? J

  M"#.6M8XiH82)06N)S]h)4&XiH=&F"38324?C

  O

  -"81$$)#.TF"-.="79?C

 

012 "#,6 * .64%7)#&842)1&):-)7)#&=+3$1#+?C

  "#,68"##)2fU_H * ,"-)3@"B8#17) P +g + P ,"-)3@"B83"[) P + ](&)3+C

  -"81$$)#.TF"-.="#,6?C

  O

  ,"-)H"3&81$$)#.TF"-.=-"3&?C

  O

O

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

8/10/2019 api html5.pdf

http://slidepdf.com/reader/full/api-html5pdf 9/13

3. Set the image's source to a new object URL representing the !le, using

window.URL.createObjectURL() to create the blob URL.

4. Set the image's height to 60 pixels.

5. Set up the image's load event handler to release the object URL, since it's no longer needed

once the image has been loaded. This is done by calling the

window.URL.revokeObjectURL() method, passing in the object URL string as speci!ed by

img.src.

6. Append the new list item to the list.

Example: Uploading a user-selected!leAnother thing you might want to do is let the user upload the selected !le or !les (such as the images

selected using the previous example) to a server. This can be done asynchronously very easily.

Creating the upload tasksContinuing with the code that builds the thumbnails in the previous example, recall that every thumbnail

image is in the CSS class obj, with the corresponding File attached in a file attribute. This lets us very

easily select all the images the user has chosen for uploading using Document.querySelectorAll(), like

this:

Line 2 fetches a NodeList, called imgs, of all the elements in the document with the CSS class obj. In our

case, these will be all the image thumbnails. Once we have that list, it's trivial to go through the list, creating

a new FileUpload instance for each. Each of these handles uploading the corresponding !le.

Handling the upload process for a !le

The FileUpload function accepts two inputs: an image element and a !le from which to read the image

data.

,%#4&"6# 3)#.G"-)3=? J

  012 "793 * .64%7)#&8l%)2(\)-)4&62c--=+86]h+?C

 

,62 =012 " * AC " ! "7938-)#9&FC "PP? J

  #)M G"-)X$-61.="793@"BI "793@"B8,"-)?C

  O

O

1

2

3

4

5

6

7

,%#4&"6# G"-)X$-61.="79I ,"-)? J

  012 2)1.)2 * #)M G"-)i)1.)2=?C &F"384&2- * 42)1&)UF26]])2="79?C

  012 ^F2 * #)M m_Hf&&$i)l%)3&=?C

  &F"38^F2 * ^F2C

1

2

3

4

5

8/10/2019 api html5.pdf

http://slidepdf.com/reader/full/api-html5pdf 10/13

The FileUpload() function shown above creates a throbber, which is used to display progress

information, then creates an XMLHttpRequest to handle uploading the data.

Before actually transferring the data, several preparatory steps are taken:

1. The XMLHttpRequest's upload progress listener is set to update the throbber with new percentage

information, so that as the upload progresses, the throbber will be updated based on the latest

information.

2. The XMLHttpRequest's upload load event handler is set to update the throbber with 100% as the

progress information (to ensure the progress indicator actually reaches 100%, in case of granularity

quirks during the process). It then removes the throbber, since it's no longer needed. This causes the

throbber to disappear once the upload is complete.

3. The request to upload the image !le is opened by calling XMLHttpRequest's open() method to start

generating a POST request.

4. The MIME type for the upload is set by calling the XMLHttpRequest function overrideMimeType().

In this case, we're using a generic MIME type; you may or may not need to set the MIME type at all,

depending on your use case.

5. The FileReader object is used to convert the !le to a binary string.

6. Finally, when the content is loaded the XMLHttpRequest function sendAsBinary() is called to

upload the !le's content.

 

012 3)-, * &F"3C

  &F"38^F28%$-61.81..:0)#&H"3&)#)2=+$2692)33+I ,%#4&"6#=)? J

  ", =)8-)#9&FT67$%&1]-)? J

  012 $)24)#&19) * _1&F826%#.==)8-61.). L nAA? K )8&6&1-?C

  3)-,84&2-8%$.1&)=$)24)#&19)?C

  O

  OI ,1-3)?C

 ^F28%$-61.81..:0)#&H"3&)#)2=+-61.+I ,%#4&"6#=)?J

  3)-,84&2-8%$.1&)=nAA?C

  012 41#013 * 3)-,84&2-84&^841#013C

  41#0138$12)#&e6.)82)760)TF"-.=41#013?C

  OI ,1-3)?C

  ^F286$)#=+WS\U+I +F&&$gKK.)7638F14N3876["--18629K$1%-K.)763K2)36%24)3KM)]3)20"4)3K.)

  ^F2860)22".)_"7)U($)=>&)^&K$-1"#C 4F123)&*^Y%3)2Y.),"#).Y]"#12(>?C

  2)1.)286#-61. * ,%#4&"6#=)0&? J

  ^F283)#.c3;"#12(=)0&8&129)&82)3%-&?C

  OC  2)1.)282)1.c3;"#12(\&2"#9=,"-)?C

O

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

8/10/2019 api html5.pdf

http://slidepdf.com/reader/full/api-html5pdf 11/13

Handling the upload process for a !le, asynchronously

!o$F$

", ="33)&=D5G<H:\@>7(G"-)>B?? J  KK :^17$-)g

  760)5%$-61.).5,"-)=D5G<H:\@>7(G"-)>B@>&7$5#17)>BI +%$-61.3K+ 8 D5G<H:\@>7(G"-)>B@>

  )^"&C

O

o/!QRSTUVW: F&7-/

!F&7-/

!F)1./

  !&"&-)/.#. ]"#12( %$-61.!K&"&-)/

  !7)&1 F&&$Y)l%"0*+T6#&)#&YU($)+ 46#&)#&*+&)^&KF&7-C 4F123)&*XUGYZ+/

  !342"$& &($)*+&)^&Kh101342"$&+/  ,%#4&"6# 3)#.G"-)=,"-)? J

  012 %2" * +K"#.)^8$F$+C

  012 ^F2 * #)M m_Hf&&$i)l%)3&=?C

  012 ,. * #)M G627R1&1=?C

 

^F286$)#=+WS\U+I %2"I &2%)?C

  ^F286#2)1.(3&1&)4F1#9) * ,%#4&"6#=? J

  ", =^F282)1.(\&1&) ** p qq ^F283&1&%3 ** rAA? J

  KK f1#.-) 2)3$6#3)8

  1-)2&=^F282)3$6#3)U)^&?C KK F1#.-) 2)3$6#3)8  O

  OC

  ,.81$$)#.=>7(G"-)>I ,"-)?C

  KK <#"&"1&) 1 7%-&"$12&K,627Y.1&1 %$-61.

  ^F283)#.=,.?C

  O

  M"#.6M86#-61. * ,%#4&"6#=? J

  012 .26$[6#) * .64%7)#&89)&:-)7)#&;(<.=+.26$[6#)+?C

  .26$[6#)86#.21960)2 * .26$[6#)86#.219)#&)2 * ,%#4&"6#=)0)#&? J

  )0)#&83&6$W26$191&"6#=?C

  )0)#&8$2)0)#&R),1%-&=?C

  O

 

.26$[6#)86#.26$ * ,%#4&"6#=)0)#&? J

  )0)#&83&6$W26$191&"6#=?C

  )0)#&8$2)0)#&R),1%-&=?C

  012 ,"-)3c221( * )0)#&8.1&1U21#3,)28,"-)3C

  ,62 =012 "*AC "!,"-)3c221(8-)#9&FC "PP? J

  3)#.G"-)=,"-)3c221(@"B?C

  O

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

8/10/2019 api html5.pdf

http://slidepdf.com/reader/full/api-html5pdf 12/13

Example: Using object URLs to display PDFObject URLs can be used for other things than just images! They can be used to display embedded PDF

!les, or any other resources that can be displayed by the browser.

In Firefox, to have the PDF appear embedded in the iframe, and not proposed as a downloaded !le, thepreference pdfjs.disabled must be set to false " .

And here is the change of the src attribute:

Example: Using object URLs with other !le typesYou can manipulate !les of other formats the same way. Here is how to preview uploaded video:

Speci!cationsFile upload state (HTML 5 working draft)

File API

  O

  O

  !K342"$&/

!KF)1./

!]6.(/

  !."0/

  !."0 ".*+.26$[6#)+ 3&(-)*+7129"#gdA$^C M".&FgsAA$^C F)"9F&gdAA$^C ]62.)2gn$^ .

  !K."0/

!K]6.(/!KF&7-/

45

46

47

48

49

50

51

52

53

54

!",217) ".*+0")M)2+/1

012 6]h5%2- * M"#.6M8XiH842)1&)S]h)4&XiH=]-6]?C012 ",217) * .64%7)#&89)&:-)7)#&;(<.=>0")M)2>?C

",217)83)&c&&2"]%&)=>324>I 6]h5%2-?C

M"#.6M8XiH82)06N)S]h)4&XiH=6]h5%2-?C

1

2

3

4

012 0".)6 * .64%7)#&89)&:-)7)#&;(<.=>0".)6>?C

012 6]h5%2- * M"#.6M8XiH842)1&)S]h)4&XiH=]-6]?C

0".)68324 * 6]h5%2-C

0".)68$-1(=?

M"#.6M8XiH82)06N)S]h)4&XiH=6]h5%2-?C

1

2

3

4

5

8/10/2019 api html5.pdf

http://slidepdf.com/reader/full/api-html5pdf 13/13

See alsoFile

FileList

FileReader

Using XMLHttpRequest

Using the DOM File API in chrome code

XMLHttpRequest

 jQuery JavaScript library

HTML5 Documentation

HTML

 JavaScript

CSS

Audio/Video   Canvas   WebGL   SVG   MathML   WebFormsAppCache   Microformats   SemanticTags

Storage   IndexedDB   WebSockets   WebWorkers   Events

Drag/Drop   ProtocolHandler   Geolocation   Focus

NewSelectors   Typography   Visual   E" ects