FileReader vs. window.URL.createObjectURL

by

There is difference.

  1. time
  • createObjectURL is synchronously executed (immediately)
  • FileReader.readAsDataURL is asynchronously executed (after some time)
  1. memory usage
  • createObjectURL returns url with hash, and store object in memory until document triggers unload event (e.g. document close) or execute revokeObjectURL
  • FileReader.readAsDataURL returns base64 that contains many characters, and use more memory than blob url, but removes from memory when you don’t use it (by garbage collector)
  1. support
  • createObjectURL from IE 10 and all modern browsers
  • FileReader.readAsDataURL from IE 10 and all modern browsers

For me, is better to use blob url’s (via createObjectURL), it is more efficient and faster, but if you use many object urls, you need to
release these urls by revokeObjectURL (to free memory).

For example, you can call URL.revokeObjectURL inside an Image onload handler and the Image object will keep the image data, without losing it, Nahuel Greco (c).

More Related Contents:

  1. How to set a value to a file input in HTML?
  2. JavaScript file upload size validation
  3. How to check file MIME type with javascript before upload?
  4. Upload multiple image using AJAX, PHP and jQuery
  5. How to check file input size with jQuery?
  6. Check image width and height before upload with Javascript
  7. JavaScript: Upload file
  8. Validation of file extension before uploading file
  9. How to instantiate a File object in JavaScript?
  10. Remember and Repopulate File Input [duplicate]
  11. How to resolve the C:\fakepath?
  12. How to convert Blob to File in JavaScript
  13. Client Checking file size using HTML5?
  14. How to remove one specific selected file from input file control
  15. Get Base64 encode file-data from Input Form
  16. drag drop files into standard html file input
  17. How to select multiple files with ?
  18. How to upload a file using jQuery.ajax and FormData
  19. Is it possible to check dimensions of image before uploading?
  20. Javascript: Uploading a file… without a file
  21. How to have jQuery restrict file types on upload?
  22. Composing multipart/form-data with a different Content-Type on each parts with Javascript (or Angular)
  23. JavaScript Play Uploaded Audio
  24. Ajax file upload
  25. How to disable Express BodyParser for file uploads (Node.js)
  26. Uploading multiple files asynchronously by blueimp jquery-fileupload
  27. copying the value of a form’s file input field to another form’s input field
  28. A file input button for all browsers, is this possible?
  29. Remove selected file(s) before upload with Javascript
  30. trigger file upload dialog using javascript/jquery

Leave a Comment