HTML5 File interface (using files on Web pages ),

HTML5 File interface (using files on Web pages ),

The File interface provides File-related information and runs JavaScript to access the content of the File on the web page.

The File object comes from the FileList object returned by the user using the input tag and from the ransfer object of the drag-and-drop operation. A File object is a special Blob that can be used in any context that can use Blob.

To use a File on a web page, the following objects are usually involved: File object, FileList object, and FileReader object.

FileList object

FileList comes from the files attribute of the input element and the drag and drop API (when a file is dragged, event. DataTransfer. files is a FileList object)

 

<input id="fileItem" type="file">

 

var fileList = document.getElementById('fileItem').files

Standard attributes of the FileList object

Length: this read-only property, which returns the length of the File object contained in the FileList object.

Standard Method of FileList object

Item (index): gets the File object at the specified position in the FileList object. It can be abbreviated as an array index.

File object

Each item of the FileList object is a File object. A File object is a special Blob.

Standard attributes of a File object

1. lastModified: the time when the returned file was modified. This time is the number of milliseconds that passed by 00:00, January 1, January 1, 1970. Is a read-only attribute

2. name: return the file name referenced by the file object. This is a read-only attribute.

3. type: return the file type referenced by the file object. It is MINE type, which is a read-only attribute.

4. size: returns the file size referenced by the file object. This is a read-only attribute.

Standard Method of File object

The method is not defined separately for the File object, but it has methods inherited from the Blob Object.

FileReader object

The FileReader object enables web applications to asynchronously read files on users' computers.

FileReader () is a constructor that creates a new FileReader object.

 

var fileReader = new FileReader();

 

Standard attributes of the FileReader object

1. error: An error occurred during file reading.

2. result: return the object content. The returned value type is String or ArrayBuffer. This attribute is valid only after the read operation is complete.

3. readyState: returns the current status of the read operation. The possible value is 0: reading is not started yet, 1: Reading is in progress, and 2: Reading is completed.

Standard Method of FileReader object

1. abort (): The read operation is interrupted. The value of readyState is changed to 2.

2. readAsArrayBuffer (Blob): Read a specified Blob, such as a File object (the File object is a special Blob ). As long as the read is complete, the value of the readyState attribute changes to 2, and the result attribute is an ArrayBuffer that represents the file data.

3. readAsDataURL (Blob): Read the specified Blob, such as a File object (the File object is a special Blob ). As long as the read is complete, the value of the readyState attribute changes to 2. The result attribute is a URL indicating the file data, and the data format is a base64 encoded string.

<input type="file" onchange="previewFile()"><br>

function previewFile() {  var preview = document.querySelector('img');  var file    = document.querySelector('input[type=file]').files[0];  var reader  = new FileReader();  reader.addEventListener("load", function () {    preview.src = reader.result;  }, false);  if (file) {    reader.readAsDataURL(file);  }}

4. readAsText (Boob, encoding): Read a specified Blob, such as a File object (the File object is a special Blob ). As long as the read is complete, the value of the readyState attribute changes to 2. The result attribute is a text string that represents the file data. The second parameter is optional and is used to specify the encoding method of the text string in the result property, which defaults to the UTF-8.

FileReader object event

1. abort: triggered when the read operation is terminated.

2. error: triggered when an error occurs during the read operation.

3. load: triggered when the read operation is successful.

4. loadend: triggered when the read operation ends. It cannot be whether the read is successful or the read fails.

5. loadStart: triggered when the read operation starts.

6. process: triggered during the read process.

Use Files in web Applications

Using the file objects in HTML5, you can access the selected local files and read the content in these files. The file object either comes from the input element or the drag and drop interface.

Select an object through the input element

<input type="file" id="input">

Access the file selected through input

var selectedFile = document.getElementById('input').files[0];

The preceding code snippet can only select one file at a time. If you want to select multiple files at a time, you need to add a multiple attribute to the input element and set the multiple attribute to true. You cannot select multiple files at a time before Gecko 1.9.2.

Select a file through the drag and drop interface

For the drag and drop interface, you can view the HTML5 DragEvent.

Step 1: Create a placement area. A common element, such as div and p.

Step 2: Add drop, dragenter, and dragover event handlers to the placement area. The key role is the drop event handler.

The following is an example of displaying a thumbnail:

<div id='dropbox' class='dropbox'></div>

.dropbox{ border:solid 3px red; height:400px; width:auto;      }

Var dropbox; dropbox = document. getElementById ("dropbox"); // register the event handler dropbox. addEventListener ("dragenter", dragenter, false); dropbox. addEventListener ("dragover", dragover, false); dropbox. addEventListener ("drop", drop, false); function dragenter (e) {e. stopPropagation (); e. preventDefault ();} function dragover (e) {e. stopPropagation (); e. preventDefault ();} function drop (e) {e. stopPropagation (); e. prevent Default (); var dt = e. dataTransfer; var files = dt. files; handleFiles (files);} function handleFiles (files) {for (var I = 0; I <files. length; I ++) {var file = files [I]; var imageType =/^ image \ //; if (! ImageType. test (file. type) {continue;} var img = document. createElement ("img"); img. file = file; dropBox. appendChild (img); var reader = new FileReader (); reader. onload = function () {img. src = reader. result;}; reader. readAsDataURL (file );}}