CODEWITHSUNDEEP
javascriptfile-io
Ryan can fly
Ryan can fly

Reputation: 123

Show all images selected in file input tag

I want user select multi files and show all images selected as preview in client side. This is my html code:

<div class="row">
        <div class="col-md-12">
            <span class="btn btn-primary btn-file">
                Browse <input type="file" name="images" multiple onchange="readURL(this);"/>
            </span>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="col-md-12" id="anhdachon">

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

my JavaScript code:

<script>
function readURL(input) {
    if (input.files) {
        var gallery = document.getElementById("#anhdachon");
        var reader = new FileReader();
        reader.onload = function(e) {
            for (var item in input.files) {
                var hinh = document.createElement("img");
                hinh.attr('src', e.target.result).width(220).height(200);
                reader.readAsDataURL(item);
                gallery.appendChild(hinh);
            }
        };
    }
}
</script>

but it does not working at all, what should I do to solve this problem?

Upvotes: 1

Views: 60

Answers (1)

Pranav C Balan
Pranav C Balan

Reputation: 115222

Remove # from getElementById() and do something like this

function readURL(input) {
  if (input.files) {
    var gallery = document.getElementById("anhdachon");
    var imageType = /^image\//;
    for (var i = 0; i < input.files.length; i++) {
      if (!imageType.test(input.files[i].type)) {
        continue;
      }
      var hinh = document.createElement("img");
      hinh.src = window.URL.createObjectURL(input.files[i])
      hinh.width = 220;
      hinh.height = 200;
      gallery.appendChild(hinh);
    }
  }
}
<div class="row">
  <div class="col-md-12">
    <span class="btn btn-primary btn-file">
                Browse <input type="file" name="images" multiple onchange="readURL(this);"/>
            </span>
  </div>
</div>
<div class="row">
  <div class="col-md-12">
    <div class="col-md-12" id="anhdachon">

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

Upvotes: 1

Related Questions