Shulou(Shulou.com)06/01 Report--

In this article, the editor introduces in detail "what are the objects of HTML5's File API", the content is detailed, the steps are clear, and the details are handled properly. I hope that this article "what are the objects of HTML5's File API" can help you solve your doubts? let's follow the editor's way of thinking to learn new knowledge.

The File API contains the following objects.

 FileList interface.

It contains a set of File objects, so we usually use it to get files. There are two ways to get FileList objects: the first is through tags

For example, var fileList = document.getElementById ('input-file'). Files can get all selected file objects

The dataTransfer of Drag & Drop API also contains a FileList object, and you will see how to read files in this way in a later example.

 Blob interface.

Blob (Binary Large Object) refers to a binary large object that represents the original binary data of a file.

The size property of the Blog interface represents the size of the binary stream, the type attribute represents the file type, and the slice function is used to split the Blob object.

 File interface.

It inherits from the Blob interface, describes a file in FileList, and contains read-only information about the file. Its name attribute represents the file name, and the lastModifiedDate attribute represents the last time the file was modified.

 FileReader interface.

It provides a way to read files and an event model to get read data.

 FileError and FileException.

They define errors and exceptions in the use of File API.

1. Previous similar solutions

Previously, JavaScript did not allow access to local files. To achieve functions such as file upload, you must resort to browser-specific plug-ins, such as ActiveX or Flash in IE.

2. Advantages of File API

File API provides a variety of Web applications to operate on local files, and ensures the security of operations through the sandbox mechanism. With File API, our Web application no longer needs to consider the compatibility of all browsers, and it becomes easier to write and maintain the code.

3. Check whether the browser supports File API

The code to determine whether the current browser supports File API is as follows:

If (typeof window.FileReader = = 'undefined') {

/ / this browser does not support File API

}

4. Read file function

Reading files by File API mainly includes the following functions:

 readAsBinaryString (blob). This function takes a Blob object as an argument and reads the contents of the file in the form of a binary string.

 readAsText (blob). This function takes a Blob object as a parameter and reads the contents of the file in text, which is encoded in UTF-8 by default.

 readAsDataURL (blob). This function takes a Blob object as a parameter and reads the contents of the file in an encrypted Data URL way. Data URL protocol is defined by RFC2397. For more information, please see http://www.ietf.org/rfc/rfc2397.txt. If you want to display the picture directly on the page, you usually use readAsDataURL to read the content of the picture, which is used in the later example.

 readAsArrayBuffer (blob). This function takes a Blob object as an argument and reads the contents of the file as an ArrayBuffer object.

The argument to the above function can also be a File object because File inherits from the Blob interface.

5. A simple example

Combined with the drag-and-drop API introduced earlier, we implement a simple example of drag-and-drop and display a picture. The detailed function is to drag and drop an image file from the Windows file system to the browser page, where the page will add a white virtual effect on the edge of the image and display it.

In this example, we will use HTML5's File API and Drag & Drop API, as well as css3's Mask feature.

The HTML and CSS code for this example is as follows:

# box {/ * Container basic style * /

Border: 2px gray dotted

Width: 171px

Height: 158px

Line-height: 158px

Text-align: center

Mask-image: url (mask.png); / * Mask image to achieve virtual effect * /

-webkit-mask-image: url (mask.png); / * WebKit compatible writing of Mask, which is only supported by WebKit kernel browsers.

Mask * /

Mask-clip: content; / * controls the display area of the masked image and does not block the frame. You can remove it and see what the effect is * /

-webkit-mask-clip: WebKit compatible writing of content; / * Mask. Currently, only WebKit kernel browsers support Mask * /

}

# box.hover {/ * style when dragging the mouse over the container * /

Border: 2px olive solid

}

# box.drop {/ * Container style after placing pictures * /

Border: 2px blue solid

}

The JavaScript code for this example is as follows:

Var box = document.getElementById ('box')

/ / check whether File API is supported

If (typeof window.FileReader = = 'undefined') {

Alert ('this browser does not support File API')

}

Box.ondragover = function (event) {/ / when dragging the mouse over the container

Th [XSS _ clean] = 'can be dragged here'

This.className = 'hover'

Event.dataTransfer.dropEffect = "copy"

Return false

}

Box.ondragleave = function () {/ / when removed

Th [XSS _ clean] =''

This.className =''

Return false

}

Box.ondragend = function () {/ / when dragging ends

This.className =''

Return false

}

Box.ondrop = function (event) {/ / drag in progress

Th [XSS _ clean] =''

This.className = 'drop'

Var file = event.dataTransfer.files [0]; / / obtained through the dataTransfer of Drag & Drop API

/ / File object

Var reader = new FileReader ()

Reader.onload = function (event) {/ / after a successful read

Box.style.background = 'url (' + event.target.result +') no-repeat center'

/ / set the content of the read image to the background of the container

}

Reader.onerror = function (event) {/ / read failed operation

Alert (event.target.error.code)

}

Reader.readAsDataURL (file); / / read the file by DataURL

Event.preventDefault ()

}

The effect of the box before dragging and dropping, the box in dragging and dropping, and the box after dragging and dropping is as follows:

The actual effect of dragging and dropping is that when the picture is dragged into the frame, the frame becomes an olive solid line, and the text inside the frame shows "can be dragged here"; when the picture is dragged out of the box, the frame is restored to the original gray dashed frame, and the text in the frame disappears; after the picture is placed in the frame, the frame becomes a solid blue frame, and the edge of the picture shows a white virtual effect. You can drag a number of pictures into the box to see their effect after the edge white virtual treatment, which is very convenient and practical.

Four possible mistakes

(1) incorrect handling of onerror event parameters

The parameter that the onerror event accepts is the event event, not the error object, and to get the error message, you can use event.target.error.code, which has the following types.

 NOT_FOUND_ERR (value 1, error not found in file)

 SECURITY_ERR (value 2, security permission error)

 ABORT_ERR (value 3, error abandoned by read operation)

 NOT_READABLE_ERR (value 4, unreadable error)

 ENCODING_ERR (value 5, coding error)

(2) call File API in the local Web page

The contents of the file cannot be read by calling File API in the local Web page, which is controlled by HTML5's security mechanism. When File API is called on the local page, the error code that can be caught in the onerror event of FileReader is 2, corresponding to the SECURITY_ERR mentioned above, which indicates that the error is caused by file security permissions.

If you want to write an example of File API yourself, you must remember to put the page on a Web server built with Apache or IIS.

(3) browser default behavior is not blocked.

Both dragover and dragend events must use either event.preventDefault or return false (friends familiar with JavaScript should be well aware of the difference between the two) to block the browser's default behavior. If you do not use this method, the browser will open and display the dragged picture after dragging and dropping.

(4) Open the sample page using a non-WebKit kernel browser

Currently, the Mask effect of CSS3 can only be displayed normally in WebKit kernel browsers. Other modern browsers can support the functions of dragging and dropping images, but cannot see the white virtual effect on the edges of images.

After reading this, the article "what are the File API objects of HTML5" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself to understand it. If you want to know more about related articles, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.