Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Example of use of readAsDataURL with images</title>
  <style>
  .thumb {
    height: 75px;
    border: 1px solid #000;
    margin: 10px 5px 0 0;
  }
</style>
</head>
<body>
  <label for="files">Choose multiple files:</label>
  <input type="file" id="files" multiple 
         onchange="readFilesAndDisplayPreview(this.files);"/><br/>
  <p>Preview of selected images:</p>
<output id="list"></output>
​
<script>
  function readFilesAndDisplayPreview(files) {
    // Loop through the FileList and render image files as thumbnails.
    for (var i = 0, f; f = files[i]; i++) {
​
      // Only process image files.
      if (!f.type.match('image.*')) {
        continue;
      }
​
      var reader = new FileReader();
​
      //capture the file information.
      reader.onload = function(e) {
          // Render thumbnail. e.target.result = the image content 
          // as a data URL
        
          // create the span with CSS class="thumb", for nicer layout
          var span = document.createElement('span');
          // Add an <img src=...> in the span, with src= the dataURL of
          // the image
          span.innerHTML = "<img class='thumb' src='" + e.target.result + "' alt='a picture'/>";
          // Insert the span in the output id=list
          document.getElementById('list').insertBefore(span, null);
        };
      
      // Read in the image file as a data URL.
      reader.readAsDataURL(f);
    }
  }
</script>
</body>
</html>
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
micbuffapro
0viewers