Picture upload related

html: content

<p>
    <label>Please select a file:</label>
    <input type="file" id="file" />
    <input type="button" value="Read image" onclick = "readAsDataURL()"/>
    <input type="button" value="Read binary data" onclick = "readAsBinaryString()"/>
    <input type="button" value="Read text file" onclick = "readAsText()"/>
</p>
<div id="result"></div>

js content:

var result = document.getElementById("result");
if(typeof FileReader == 'undefined') {
    result.innerHTML = "Sorry, your browser doesn't support FileReader";
}
// Read the file into the page in the form of Data URL
function readAsDataURL(){
    // Check for image type
    var simpleFile = document.getElementById("file").files[0];
    if(!/image\/\w+/.test(simpleFile.type)) {
        alert("Please make sure the file type is image type");
        return false;
    }
    var reader = new FileReader();
    console.log('reader------->', reader);
    console.log('simpleFile------>', simpleFile);
    // //Read the file into the page in the form of Data URL
    reader.readAsDataURL(simpleFile);
    reader.onload = function(e){
        console.log('this----->', this);  //this is:{ readState:2,result:'data:image/ipeg;base64 ,****',...}
        console.log('e---->', e);
        console.log('this.result', this.result);
        result.innerHTML = '<img src="'+this.result+'" alt=""/>';
    }
}
// //Read files into pages in binary form
function readAsBinaryString(){
    // Check for image type
    var simpleFile = document.getElementById("file").files[0];
    if(!/image\/\w+/.test(simpleFile.type)) {
        alert("Please make sure the file type is image type");
        return false;
    }
    var reader = new FileReader();
    // Read files into pages in binary form
    reader.readAsBinaryString(simpleFile);
    reader.onload = function(e){
        // Display binary data on page
        //result.innerHTML = this.result;
        //Binary data can be accessed through** window.btoa() method to base64 data**
        var src = "data:" + simpleFile.type + ";base64," + window.btoa(this.result);
        result.innerHTML = '<img src ="'+src+'"/>';
    }
}
// //Read the file into the page as text
function readAsText(){
    var simpleFile = document.getElementById("file").files[0];
    var reader = new FileReader();
    // Read the file as text into the page
    reader.readAsText(simpleFile);
    reader.onload = function(e){
        result.innerHTML = this.result;

        console.log('this.result---', this.result)
    }
}

In HTML5, btoa method and atob method support base64 encoding. b can be understood as a string of binary data, and a can be understood as a string of class code. The usage of btoa is as follows:

var result = window.btoa(data);// Convert binary data to base64 data

The method is used to encode a string with base64. The method uses a parameter. The parameter value is a Unicode string composed of a string of binary data. The method returns the encoded string with base64 format.

The atob method is used as follows:

var result = window.atob(data); //Convert base64 data to binary data

Key content
The method is used to decode a string in base64 format after being encoded by base64. The method uses a parameter whose value is a string after being encoded by base64. The method returns a string of Unicode characters composed of binary data after being decoded;

reference resources: https://www.cnblogs.com/tugenhua0707/p/4605593.html

Tags: html5 encoding

Posted on Thu, 28 May 2020 12:29:52 -0400 by rajivgonsalves