1

I'm working on a bootstrap webpage and want to take an image the user inputs and shows a preview in a modal. The modal includes user text, which all works fine.

The code for the modal is as followed(up to the picture):

<div class="modal modal-wide fade" id="previewModal" tabindex="-1" role="dialog" aria-labelledby="previewModalTitle" aria-hidden="true">
<div class="modal-dialog modal-lg">
    <div class="modal-content">
         <div class="modal-header">
             <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                 <h4 class="modal-title" id="previewModalTitle">Your Newstream Preview</h4>
         </div>
          <div class="modal-body">
              <div id="previewNewstreamImage" class="carousel slide">
                 <div class="carousel-inner">       
                    <div class="item active">
                        <img id='previewNewstreamImageFile' src="http://CrowdNe.ws/assets/img/newstreamPosters/droneSunset.jpg" >

Which is being updated by this carousel:

   <div id="myCarousel" class="carousel slide">
   <div class="carousel-inner">       
    <div class="item active">
     <img src="picture here" >  <div class="container"><!-- container -->
      <div align="center"> 
       <div class="findStream">
        <h2  style="color:#FFFFFF;">Upload  Main Image</h2>
         <div align="center">
         <form role="form">
     <div class="form-group" style="color:#FFFFFF;"> <!--form group  -->
       <input type='file' id="myFile" onChange="readURL(this)" />
     </div><!--/div row.newstreamImage --> 
   </form>
      </div>  
              <p  style="color:#FFFFFF;">Images are optional but <em>highly</em> recommended. <br>
                Best image dimension is 800px by 400px, jpg or png. File sizes less than 500k.</p>

       </div>
      </div>
     </div>
    </div>

   </div>
   <!-- /.carousel -->
 </div>
</div>

And and then calling JavaScript like so:

var picture = document.getElementById("myFile").value;
        document.getElementById("previewNewstreamImageFile").src = picture;

Thanks!

DaniP
  • 36,081
  • 8
  • 59
  • 70
Anthony Bonarrigo
  • 180
  • 4
  • 18

1 Answers1

0

  function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object

    // 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();

      // Closure to capture the file information.
      reader.onload = (function(theFile) {
        return function(e) {
          // Render thumbnail.
          var span = document.createElement('span');
          span.innerHTML = ['<img class="thumb" src="', e.target.result,
                            '" title="', escape(theFile.name), '"/>'].join('');
          document.getElementById('list').insertBefore(span, null);
        };
      })(f);

      // Read in the image file as a data URL.
      reader.readAsDataURL(f);
    }
  }

  document.getElementById('files').addEventListener('change', handleFileSelect, false);
  .thumb {
    height: 75px;
    border: 1px solid #000;
    margin: 10px 5px 0 0;
  }
<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>

Attribution: http://www.html5rocks.com/en/tutorials/file/dndfiles/

Roger
  • 146
  • 5