Difference between readAsBinaryString() and readAsDataURL() in HTML5 FileReader API

Question

In the HTML5, it introduced the FileReader API. I can't really understand the difference between readAsBinaryString() and readAsDataURL(). I read docs from several places, but still can't fully understand. Can someone give some code examples to help me understand the differences?

Answer 1

If you use the readAsDataURL() you get the data back in a data URI format. So something like the src attribute here:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot">

If you use the readAsBinaryString() the result will be a the raw bits. You can then use one of the low level binary API's to manipulate the data or post it to the server.