Browser - Action File

The only control is in an HTML form, you can upload files

<input type="file">

Typically, files uploaded by the back-end server processing, JavaScript can be done to check for the file extension when you submit the form, in order to prevent users to upload invalid file formats:

var f = document.getElementById('test-file-upload');
var filename = f.value; // 'C:\fakepath\test.png'
if (!filename || !(filename.endsWith('.jpg') || filename.endsWith('.png') || filename.endsWith('.gif'))) {
    alert('Can only upload image file.');
    return false;
}

file API

Because JavaScript files uploaded to user operation is very limited, in particular, can not read the contents of the file, making the web a lot to manipulate files had to use third-party plug-ins such as Flash to achieve.

With the popularity of HTML5, the new File API allows JavaScript to read the contents of the file, the file for more information.

The HTML5 File API provides Fileand FileReaderthe two main objects, you can get information about the file and read the file.

The following example demonstrates how to read a user selected image file, and a <div>preview image:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .imageView{
                width: 300px;
                height: 300px;
                background-repeat: no-repeat;
                background-size:contain;
                background-position: center;
            }
        </style>
    </head>

    <body>
        <input type="file" id="test-image-file" />
        <p id="test-file-info"></p>
        <img id="test-image-preview" class="imageView"></p>
    </body>
    <script>
        var
            fileInput = document.getElementById('test-image-file'),
            info = document.getElementById ( ' Test-File-info ' ), 
            preview = document.getElementById ( ' Test-Image-preview ' );
         // monitor change event: 
        fileInput.addEventListener ( ' change ' , function () {
             // Clear background image: 
            preview.style.backgroundImage =  '' ;
             // to check whether the selected file: 
            iF ( ! fileInput.value) { 
                info.innerHTML =  'Did not select the file ' ;
                 return ; 
            } 
            // Get File reference: 
            var File = fileInput.files [ 0 ];
             // Get File Info: 
            info.innerHTML =  ' file: '  + file.name +  ' <br> '  + 
                ' size: '  + file.size +  ' <br> '  + 
                ' Review: '  + file.lastModifiedDate;
             IF (file.type ==!  ' Image / JPEG '  && file.type ==!  ' Image / PNG '  && file.type ==!  ' Image / GIF ' ) { 
                Alert ( ' not a valid image file! ' );
                 Return ; 
            } 
            // read file: 
            var Reader =  new new the FileReader (); 
            reader.onload =  function (E) {
                 var 
                    Data = e.target.result; //'data: image / jpeg; base64 , / 9j / 4AAQSk ... (base64 encoded) ...'            
                preview.style.backgroundImage =  ' URL ( '  + Data +  ' ) ' ; 
            }; 
            // read a document in the form of DataURL: 
            reader.readAsDataURL (File); 
        }); 
    </ Script > 

</ HTML >

Original Address: https: //www.liaoxuefeng.com/wiki/1022910821149312/1023022494381696

Browser - Action File

file API

Guess you like