CODEWITHSUNDEEP
javascriptjqueryimagepreview
jonas.ley
jonas.ley

Reputation: 45

How to preview multiple inputs

I want to preview images, that the user is about to upload. Now, I know that my code works for one input and one image. As soon as I add another pair of input and image, same as the one which worked, no image is there to preview...

How can I add more inputs, each with its own image to preview that specific input?

My code looks like this:

HTML:

<input type="file" accept="image/*" onchange="previewFile()">
<img id="output1" height="100px">

and JavaScript:

function previewFile(){
        var preview = document.querySelector('img');
        var file    = document.querySelector('input[type=file]').files[0];
        var reader  = new FileReader();

        reader.onloadend = function () {
            preview.src = reader.result;
        }

        if (file) {
            reader.readAsDataURL(file);
        }
        else {
            preview.src = "";
        }
    }

I think that a Var has to be given to the function, which output I want to choose, but I am totally new to Js, so maybe You can help me!

Thanks!

Edit:

I don't want to have a "multiple" attribute in my input tag. I created multiple divs, each with a non-visible input tag and an image that overlays with absolute position. So when the user clicks the div, he can choose an image, which then fills up the whole div.

It all works fine for one div but I need 11 more, each working separately, so that the user can manage the order of his pictures he is about to upload.

So what do I have to do to make each of the 12 upload tags working separately with its own preview image?

Upvotes: 1

Views: 1873

Answers (2)

guest271314
guest271314

Reputation: 1

Edit:

I don't want to have a "multiple" attribute in my input tag. I created multiple divs, each with a non-visible input tag and an image that overlays with absolute position. So when the user clicks the div, he can choose an image, which then fills up the whole div.

It all works fine for one div but I need 11 more, each working seperately, so that the user can manage the order of his pictures he is about to upload.

So what do I have to do to make each of the 12 upload tags working seperately with its own preview image?

Element.id should be unique in document. You can pass the clicked element to previewFile() call, use .nextElementSibling to select sibling <img> element

function previewFile(input) {
  var preview = input.nextElementSibling;
  var file = input.files[0];
  var reader = new FileReader();

  reader.onloadend = function() {
    preview.src = reader.result;
  }

  if (file) {
    reader.readAsDataURL(file);
  } else {
    preview.src = "";
  }
}
<div>
  <input type="file" multiple accept="image/*" onchange="previewFile(this)">
  <img height="100px" />
</div>
<div>
  <input type="file" multiple accept="image/*" onchange="previewFile(this)">
  <img height="100px" />
</div>
<div>
  <input type="file" multiple accept="image/*" onchange="previewFile(this)">
  <img height="100px" />
</div>
<div>
  <input type="file" multiple accept="image/*" onchange="previewFile(this)">
  <img height="100px" />
</div>
<div>
  <input type="file" multiple accept="image/*" onchange="previewFile(this)">
  <img height="100px" />
</div>
<div>
  <input type="file" multiple accept="image/*" onchange="previewFile(this)">
  <img height="100px" />
</div>
<div>
  <input type="file" multiple accept="image/*" onchange="previewFile(this)">
  <img height="100px" />
</div>
<div>
  <input type="file" multiple accept="image/*" onchange="previewFile(this)">
  <img height="100px" />
</div>
<div>
  <input type="file" multiple accept="image/*" onchange="previewFile(this)">
  <img height="100px" />
</div>
<div>
  <input type="file" multiple accept="image/*" onchange="previewFile(this)">
  <img height="100px" />
</div>
<div>
  <input type="file" multiple accept="image/*" onchange="previewFile(this)">
  <img height="100px" />
</div>
<div>
  <input type="file" multiple accept="image/*" onchange="previewFile(this)">
  <img height="100px" />
</div>

Upvotes: 2

Roma
Roma

Reputation: 282

window.URL    = window.URL || window.webkitURL;
var elBrowse  = document.getElementById("browse"),
    elPreview = document.getElementById("preview"),
    useBlob   = false && window.URL; // `true` to use Blob instead of Data-URL

function readImage (file) {
  var reader = new FileReader();
  reader.addEventListener("load", function () {
    var image  = new Image();
    image.addEventListener("load", function () {
      var imageInfo = file.name    +' '+
                      image.width  +'×'+
                      image.height +' '+
                      file.type    +' '+
                      Math.round(file.size/1024) +'KB';
      elPreview.appendChild( this );
      elPreview.insertAdjacentHTML("beforeend", imageInfo +'<br>');
    });
    image.src = useBlob ? window.URL.createObjectURL(file) : reader.result;
    if (useBlob) {
      window.URL.revokeObjectURL(file); // Free memory
    }
  });
  reader.readAsDataURL(file);  
}

elBrowse.addEventListener("change", function() {
  var files  = this.files;
  var errors = "";
  if (!files) {
    errors += "File upload not supported by your browser.";
  }
  if (files && files[0]) {
    for(var i=0; i<files.length; i++) {
      var file = files[i];
      if ( (/\.(png|jpeg|jpg|gif)$/i).test(file.name) ) {
        readImage( file ); 
      } else {
        errors += file.name +" Unsupported Image extension\n";  
      }
    }
  }
  if (errors) {
    alert(errors); 
  }
});
#preview img{height:100px;}	
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<input id="browse" type="file"  multiple />
<div id="preview"></div>

Upvotes: 0

Related Questions