HTML5 FILE interface uses files to download on the web page

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

The File object comes from the FileList object returned by the user to select the file with the input tag, from the Datatransfer object of the drag and drop operation. The File object is a special blob that can be used in any context that can be used in Blob.

To use files on the web page, the objects that usually need to be involved are: File object, FileList object, FileReader object.

FileList comes from two places, the Files property of the Input element and the DRAG and Drop API (when the file is dragged, the event.datatransfer.files is a FileList object)

 <input id = fileitem type = file> var fileList = document.GetelementByid ('fileitem'). Files

Length: This attribute only returns the length of the File object contained in the FileList object.

item (INDEX): Get the file object specified in the designated position in the FileList object. It can be briefed in the form of several array indexes

Each of the FileList object is the File object. File object is a special blob.

1.lastmodify: The time when the file is revised, this time is the milliseconds passed at 0:0:00 on January 1, 1970. It is a readable attribute

2.Name: The file name of the file referenced by the file object, which is a readable attribute

3.Type: The file type of the file referenced by the file object is MINE TYPE, which is a readable attribute.

4.Size: The file size of the file referenced by the file object, this one -read attribute.

There is no way to define the FILE object alone, but it has a way to inherit from the BLOB object.

The FileReader object enables Web applications to read files on the user computer asynchronously.

Filereader () is a constructor that can create a new Filereader object through it.

var filereader = new filereader ();

1.error: Returns the error that occurs during the reading process.

2.Result: Returns the content of the file, and the type is worthy to type or ArrayBuffer. This attribute is legal only after reading the operation.

3.ReadyState: Returns the current state of the operation. The possible value is 0: I have not started to read yet, 1: Reading, 2: Reading is completed.

1.abort (): Interrupt read operation. The value of ReadyState becomes 2. 2.

2. ReadasArrayBuffer (BLOB): Read the specified blob, such as a File object (File object is a special blob). As long as the read is completed, the value of the ReadyState property will become 2, and the result attribute is an ArrayBuffer that represents file data.

3. Readasdataurl (blob): Read the specified blob, such as a File object (a special blob). As long as the read is completed, the value of the readyState attribute will become 2. The result attribute is a URL that represents the file data, and the data format is the base64 -encoded string string

 <input type = file onChange = PreviewFile ()> <br> <IMG SRC = Height = 200 VAR Preview = Document.queeryselector ('IMG'); VAR FILE = DOCUMENT.QUERYSELECTOR ( 'Input [type = file]'). FILES [0]; VAR Reader = New FileRereader (); Reader.adDeventListener (load, function () {preview.src = Reader.Result;}, if (FIL) { Dataurl (file);}}

4. Readastext (Boob, Encoding): Read the specified blob, such as a File object (File object is a special blob). As long as you read it, the value of the readyState property will become 2, and the result attribute is a text string that represents the file data. The second parameter is optional. It is used to specify the encoding method of the Chinese text string of the result attribute, and the default is UTF-8.

1.Abort: Termination when reading operation.

2. ERROR: Triggered when reading operations during the operation.

3.Load: Triggered when reading the operation successfully.

4.Loadend: Triggered at the end of the read operation. Can't read success or failure.

5.LoadStart: Triggered at the beginning of the read operation.

6.Process: Triggered during the reading process.

Using the file object in HTML5, you can access the local files selected and read the content in these files. The file object is either from the INPUT element or the Drag and Drop interface.

 <input type = file ID = input>

Access files selected through input

 var selectfile = document.GetelementByid ('input'). Files [0];

You can only choose one file at a time at a time. If you choose multiple files at a time, you need to add a Multiple attribute to the INPUT element and set the Multiple attribute to my true. Select multiple files at a time before GECKO 1.9.2.

For the Drag and Drop interface, you can view HTML5 DRAGEVENT.

Step 1: Create a placement area. An ordinary element, such as div, P, etc.

Step 2: Add Drop, DRAGENTER, DRAGOVER event processing program to the placed area. The key role is the Drop event processing program.

Below is an example of a short -drawing diagram:

 <div ID = 'Dropbox' Class = 'Dropbox'> </div> .dropbox {border: solid 3px red; height: 400px; width: auto;}

 Var Dropbox; Dropbox = Document.GetelementByid (Dropbox); // Registration event processing program Dropbox.adDeventListener (DRAGENTER, DRAGENTER, FALSE); Ener (Dragover, Dragover, FALSE); Dropbox.addeventListener (Drop, Drop, FALSE) ; functions (e) {e.StopPropagation (); e.preventdeFault ();} Function dragover (e) {e.stopPropagation (); e.PreventDefault (); rop (e) {e.stopPropagation () ; E.PreventDefault (); 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.face = file ; Dropbox .appndchild (IMG); VAR Reader = New FileRereader (); Reader.Onload = Function () {img.src = Reader.Result;}; Reader.Readasdataurl (File);}}

The above is the HTML5 FILE interface introduced by Xiaobian to download files on the web page. I hope it will be helpful to everyone. If you have any questions, please leave me a message. Xiaobian will reply to everyone in time. Thank you very much for your support for the VEVB Wulin website!