Multiple image files and using file reader to preview

Question

I have to upload multiple image file and I need to show the the preview of the image. But the problem I'm facing using following javascript is image got changed when i upload the other image, means when i upload the feature_image , the product_image which i uploaded earlier being replaced by the new one and there is code redundancy there as i used same function for different different id, how do I solve the issue with optimized solution..Thanks in Advance

HERE is the HTML part:

<div class="form-group">
  <label>Product Image</label>
      <input type="file" name="product_image"  id="product_image" width="200px">
      <img src="" id="product-img-tag" width="200px" />  
</div>
<div class="form-group">
    <label>Feature Image</label>
       <input type="file" name="feature_image"  id="feature_image" width="200px">
       <img src="" id="feature-img-tag" width="200px" /> 
</div>
<div class="form-group">
    <label>Slurp Image</label>
       <input type="file" name="slurp_image"  id="slurp_image" width="200px">
       <img src="" id="slurp-img-tag" width="200px" />    
</div>

Here is the javascript part :

   function readURL(input) {
   if (input.files && input.files[0]) {
                  var reader = new FileReader();

                  reader.onload = function (e) {
                      $('#product-img-tag').attr('src', e.target.result);
                  }
                  reader.readAsDataURL(input.files[0]);
              }
          }
          $("#product_image").change(function(){
              readURL(this);
          });

                   function readURL(input) {
              if (input.files && input.files[0]) {
                  var reader = new FileReader();

                  reader.onload = function (e) {
                      $('#feature-img-tag').attr('src', e.target.result);
                  }
                  reader.readAsDataURL(input.files[0]);
              }
          }
          $("#feature_image").change(function(){
              readURL(this);
          });

                   function readURL(input) {
              if (input.files && input.files[0]) {
                  var reader = new FileReader();

                  reader.onload = function (e) {
                      $('#slurp-img-tag').attr('src', e.target.result);
                  }
                  reader.readAsDataURL(input.files[0]);
              }
          }
          $("#slurp_image").change(function(){
              readURL(this);
          }); 

Answer 1

Optimized solution : don't use a FileReader, use the URL.createObjectURL(blob) method.

When the blobs passed to this method come from an <input type="file"> , the URI returned is a direct pointer to the file on the user system, hence it is faster, less memory consumptive and easier to use (since synchronous) than a FileReader and its toDataURL method.

Short version with your markup

 // attach our event listener on all the inputs document.querySelectorAll('input[type="file"]').forEach(function(input){ input.addEventListener('change', readURL); }); function readURL(evt) { // here we can use 'this', it will be the input var img = this.nextElementSibling; // not really needed in this case but it's a good habit to revoke the blobURI when done img.onload = function(){URL.revokeObjectURL(this.src)}; img.src = URL.createObjectURL(this.files[0]); } 

 <div class="form-group"> <label>Product Image</label> <input type="file" name="product_image" id="product_image" width="200px"> <img src="" id="product-img-tag" width="200px" /> </div> <div class="form-group"> <label>Feature Image</label> <input type="file" name="feature_image" id="feature_image" width="200px"> <img src="" id="feature-img-tag" width="200px" /> </div> <div class="form-group"> <label>Slurp Image</label> <input type="file" name="slurp_image" id="slurp_image" width="200px"> <img src="" id="slurp-img-tag" width="200px" /> </div> 

Longer version based on ids

 document.querySelectorAll('input[type="file"]').forEach(function(input){ input.addEventListener('change', readURL); }); function readURL(evt) { var img_id; switch(this.id){ case "product_image" : img_id = "product-img-tag"; break; case "feature_image" : img_id = "feature-img-tag"; break; case "slurp_image" : img_id = "slurp-img-tag"; break; } var img = document.getElementById(img_id); if(!img){ return; } img.onload = function(){URL.revokeObjectURL(this.src)}; img.src = URL.createObjectURL(this.files[0]); } 

 <div class="form-group"> <label>Product Image</label> <input type="file" name="product_image" id="product_image" width="200px"> <img src="" id="product-img-tag" width="200px" /> </div> <div class="form-group"> <label>Feature Image</label> <input type="file" name="feature_image" id="feature_image" width="200px"> <img src="" id="feature-img-tag" width="200px" /> </div> <div class="form-group"> <label>Slurp Image</label> <input type="file" name="slurp_image" id="slurp_image" width="200px"> <img src="" id="slurp-img-tag" width="200px" /> </div>