How can I display multiple image?

问题

My html code is like this :

<input type='file' multiple/>
<img id="myImg" src="#" alt="your image" />

My javascript code is like this :

$(function () {
    $(":file").change(function () {
        if (this.files && this.files[0]) {
            var reader = new FileReader();
            reader.onload = imageIsLoaded;
            reader.readAsDataURL(this.files[0]);
        }
    });
});

function imageIsLoaded(e) {
    $('#myImg').attr('src', e.target.result);
};

Demo is like this : https://jsfiddle.net/oscar11/ob8aas23/

When I upload one image, it display the image

But when I upload more than 1 image, shown only one image

How can I solve this problem?

回答1:

The issue is there is only one img tag but for multiple images to be displayed , equal number of img tags will be required. So it will be better to to loop through the files.length and dynamically create a image tag and add source to it

$(function() {
  $(":file").change(function() {
    if (this.files && this.files[0]) {
      for (var i = 0; i < this.files.length; i++) {
        var reader = new FileReader();
        reader.onload = imageIsLoaded;
        reader.readAsDataURL(this.files[i]);
      }
    }
  });
});

function imageIsLoaded(e) {
  $('#myImg').append('<img src=' + e.target.result + '>');
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='file' multiple/>
<div id="myImg">
</div>

回答2:

The first issue is when you select multiple sources you are not iterating the list.

The second issue is there is only one img tag where the result is displayed.

I have updated the code

<input type='file' multiple/>
<div class="img-container">

</div>


$(function () {
    $(":file").change(function () {
        /*if (this.files && this.files[0]) {
            var reader = new FileReader();
            reader.onload = imageIsLoaded;
            reader.readAsDataURL(this.files[0]);
        }*/
            var noOfFiles = this.files.length;
        for(var i=0; i < noOfFiles; i++){        
              var reader = new FileReader();
            reader.onload = imageIsLoaded;
            reader.readAsDataURL(this.files[i]);
        }        
    });
});

function imageIsLoaded(e) {
var imgTmpl = '<img src='+e.target.result+'>';
    $('.img-container').append(imgTmpl);


};

jsfiddle for the same

https://jsfiddle.net/karthick6891/ob8aas23/1/

回答3:

To display multipal image you must loop through the file and append img tag to display multi-pal file.

var selDiv = "";
document.addEventListener("DOMContentLoaded", init, false);
function init() {
  document.querySelector('#files').addEventListener('change', handleFileSelect, false);
  selDiv = document.querySelector("#selectedFiles");
}

function handleFileSelect(e) {

  if (!e.target.files || !window.FileReader) return;

  selDiv.innerHTML = "";

  var files = e.target.files;
  var filesArr = Array.prototype.slice.call(files);
  filesArr.forEach(function(f,i) {
    var f = files[i];
    if (!f.type.match("image.*")) {
      return;
    }

    var reader = new FileReader();
    reader.onload = function(e) {
      var html = "<img src=\"" + e.target.result + "\">" + f.name + "<br clear=\"left\"/>";
      selDiv.innerHTML += html;
    }
    reader.readAsDataURL(f);
  });

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" id="files" name="files" multiple accept="image/*"><br/>

<div id="selectedFiles"></div>

回答4:

Your code was setup only for one image, so only one was displayed. Make sure you dynamically add new images when the upload happens. Here is example (also on https://jsfiddle.net/ob8aas23/3/ ):

HTML

<input type='file' multiple/>

$(function () {
    $(":file").change(function () {
        if (this.files) {
         for(var i = 0, len = this.files.length; i<len ; i++) {
            var reader = new FileReader();
            reader.onload = imageIsLoaded;
            reader.readAsDataURL(this.files[i]);
         }
        }
    });
});

function imageIsLoaded(e) {
  var newImage =  $( '<img id="myImg" alt="your image" />' )
  newImage.attr('src', e.target.result)
  $('body').append(newImage)
}

回答5:

$(function() {
  $(":file").change(function() {
    if (this.files && this.files[0]) {
      for (var i = 0; i < this.files.length; i++) {
        var reader = new FileReader();
        reader.onload = imageIsLoaded;
        reader.readAsDataURL(this.files[i]);
      }
    }
  });
});

function imageIsLoaded(e) {
  $('#myImg').append('<img src=' + e.target.result + '>');
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='file' multiple/>
<div id="myImg">
</div>

来源：https://stackoverflow.com/questions/44061461/how-can-i-display-multiple-image

标签

javascript

jquery

html

upload