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

admin管理员组

文章数量:1333054

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.

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.

• javascript
• html
• fileapi

Share Improve this question Follow asked Oct 19, 2012 at 10:15 Seho LeeSeho Lee 4,10899 gold badges3434 silver badges4242 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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

Data Uris.

It's the contents of the file encoded as Base64 string, suitable for use in a URL. See https://developer.mozilla/en-US/docs/DOM/FileReader

本文标签：