file API

  The client directly accesses the files of the user's computer. Before 2000, the <input type="file"> field was added to the form.  
  The file API is a secure way to provide web development, so that the client can better access the user's files and fields.
Some interfaces directly accessing file information - files collection. Read file data with fileReader type.

files collection

Name: The name of the local file  
Size: The byte size of the file  
type: MIME type of Characters and Files  
lastModifiedDate: The last time the file was modified (chrome implements this attribute)

fileReader type

    readAsText(file, encoding): Read files in plain text.
    ReadAs Data URL (file): Read the file and save it in the result attribute as a URL.  
    ReadAs BinaryString (file): Read the file and save a string in the result attribute, a character
 For a byte.
    ReadAs Array Buffer (file): Read the file and save an Array Buffer containing the contents of the file in
 In the result attribute.  
    (file-file collection; encoding-encoding type)

Event

    Because the data is read asynchronously, fileReader provides several events.
    Programs events: Triggered every 50 ms.
    Error event: If the file cannot be read, it will trigger. There is an attribute error.code attribute. 1 indicating that the file was not found, and 2 indicating that the file was not found.
Security error, 3 means read interrupt, 4 means file unreadable, 5 means coding error.  
    load event: Triggered after the file is fully read.
    Interruption also triggers abort events and loadend events after load and error events.

Chestnut

When the user uploads the picture, it can be displayed on the page immediately.

//html
<label for="file">
    <input type="file" name="file" id="file" accept="image/*">
    <span id="output"></span>
</label>
//js
function showFileImg(ele, dist){
    const filesList = document.querySelector(ele);
    const output    = document.querySelector(dist);
    
    filesList.addEventListener('change', function(event) {
        //Instance fileReader object
        const reader = new FileReader();
        //Get a collection of files
        let files  = event.target.files[0];
       
        if(/image/.test(files.type)){
            //Read the file and save it in result through the URL class
            reader.readAsDataURL(files);
            //Event
            reader.onload = function(){
                //Get picture data and insert display nodes
                let html = '<img src=' + reader.result + '>';
                output.innerHTML = html;
            }
            
        } else {
            return false;
        }
    });
}
const fileImgA = new showFileImg('#file', '#output');

Read the drag-and-drop file, create a custom location, and display the file information when the user drags and drops the file into a custom location.

//html
<div id="drop_zone">Drop files here</div>
<output id="output"></output>

//js
function dropFile() {
    const droptarget = document.querySelector('#drop_zone');
    const output     = document.querySelector('#output');

    let info         = '';
    
    function handleEvent(event) {
        event.preventDefault();
        
        let files, i, len;
        if(event.type == 'drop') {
            let files = event.dataTransfer.files;
            let i     = 0;
            let len   = files.length;
            
            while(i < len){
                info += files[i].name + '(' + files[i].type + ',' + files[i].size + ')<br/>'
                i++;
            }
            output.innerHTML = info;
        }
    } 

    droptarget.addEventListener('dragenter', handleEvent);
    droptarget.addEventListener('dragover', handleEvent);
    droptarget.addEventListener('drop', handleEvent);
}
dropFile();