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?

PaulMest · Accepted Answer · 2020-06-18 22:42:44Z

14

If you use 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 readAsBinaryString(), the result will be the raw bits. You can then use one of the low level binary APIs to manipulate the data or post it to the server.

edited Jun 18, 2020 at 22:42

PaulMest

15.3k10 gold badges57 silver badges54 bronze badges

answered Nov 29, 2011 at 9:18

Maurice

27.7k5 gold badges52 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related