html5 utilizing FileReader to read the file.

Use FileReader to read the file can be implemented instantly preview effects, this is only in html5 functions.
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <!- instant preview feature
        Instant: When the user finishes select the picture immediately preview processing >> onchange
        Preview: readAsDataURL read through the file object () to complete 
    -> 
    < form Action = "" > 
        File: < INPUT type = "File" name = "myFile" ID = "myFile" onChange = "getFileContent ();" >  < br > 
        < INPUT type = "Submit" > 
    </ form > 
    < IMG the src = "" Alt = "" > 


    < Script > 
        / *  FileReader: read the contents of the file
        * 1.readAsText ():To read text files (TxT open files may be used), returns the text string, the default encoding is UTF-8
        * 2.readAsBinaryString (): read any type of file. Return binary strings. This method is not used to read the document presented to the 
        user to see, but stored files. For example: After reading the contents of the file, access to binary data passed to the background, the background to accept the data, then 
        data storage. 
        * 3.readAsDataURL (): read the data file acquisition period begins with a string, this string is the essence DataURL.DataURL 
        is a file (document generally refers to the image or can be embedded in the document file format) embedded in the program document. DataURL is a resource 
        string converted to base64 encoding, and content stored directly in the url >> optimized loading speed and efficiency of the site. 
        : * Abort () reads interrupt * / 
        function getFileContent () {
             // 1. Create an object file read 
            var Reader =  new new ; the FileReader ()
             / * 2. read the file, acquired DataURL
            2.1 Description of no return value: void: but after reading the file, it will read the result is stored in the object result file is read in 
            2.2 parameter need to pass a binary large object: File (for additional images can be embedded into type of document)
            2.3 files stored in the file attribute in the form element file, which is an array  
            * onloadstart: trigger to start reading* / 
            var file = document.querySelector ( " #myFile " ) .files; 
            reader.readAsDataURL (file [ 0 ])
             / * Get Data 
            * FileReader a complete event model, is used to capture the state read the file 
            * onabort: triggered when the middle read the file 
            * onerror: trigger a read error 
            * onload: file reading triggered upon successful completion 
            * onloadend: trigger reading is completed, regardless of success or failure
            * Onprogress: continuously triggered during read file 
            * / 
            reader.onload =  function () {
                 // the console.log (reader.result) 
                // Display 
                document.querySelector ( " IMG " ) .src = reader.result 
            } 
        } 
    < / Script > 
</ body > 

</ HTML >
html5 utilizing FileReader to read the file.

Guess you like
