Skip to content

Instantly share code, notes, and snippets.

@Redolance

Redolance/preview-image-in-browser.html

Created June 14, 2018 00:23
Show Gist options
  • Save Redolance/2582c6dd9e56202c7d69c0c4521a02c5 to your computer and use it in GitHub Desktop.
Save Redolance/2582c6dd9e56202c7d69c0c4521a02c5 to your computer and use it in GitHub Desktop.
Download ZIP
preview image in browser object URLs
Raw
preview-image-in-browser.html
<!-- The following code uses object URLs, which is much more efficient than data URL for viewing large images (A data URL is a huge string containing all of the file data, whereas an object URL, is just a short string referencing the file data in-memory):
-->
<!-- java script only -->
<html>
<img id="blah" alt="your image" width="100" height="100" />
<input type="file" onchange="document.getElementById('blah').src = window.URL.createObjectURL(this.files[0])">
</html>
<!-- version jquery. -->
<!-- $('your_selector').attr('src', window.URL.createObjectURL(this.files[0])) -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment