Search code examples
javascripthtmlfileapi

html5 FileReader , what kind of data readAsDataUrl function returns? is it url adress? or data itself?

function readURL(input){    
    if(input.files && input.files[0]){
        reader.readAsDataURL(input.files[0]);
    }
    else {
        document.images[0].src = input.value || "No file selected";
    }
}
function checkSrc(){
    var src = document.getElementById('propertyImg').getAttribute('src');
    console.debug(src);
}
<input type='file' class='width70_prop' onchange="readURL(this);"></input>
<button onclick='checkSrc()'>check</button>

I am curious what kind of data FileReader's readAsDataUrl function returns.
When I checked src attribute via above code, it was look like
ridiculously giant long string(string begins something base-64 blah blah) .
I am wondering that string refers file's address or file itself.
any help will be appreciated. thx.

Solution

  • It is the file itself, but base-64 encoded. It is also known as

    Data Uris.