Question

我的HTML代码是这样的：

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

我的javascript代码是这样的：

$(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);
};

演示是这样的：https://jsfiddle.net/oscar11/ob8aas23/

当我上传一张图片时，会显示图片

但是当我上传多张图片时，只显示一张图片

我该如何解决这个问题？

Answer 1

问题是只有一个img代码，但要显示多个图片，则需要相同数量的img代码。因此，最好循环遍历files.length并动态创建图像标记并向其添加源

$(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>

Answer 2

第一个问题是当您选择多个来源时，您没有迭代列表。

第二个问题是只有一个img标签显示结果。

我已更新代码

<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

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

Answer 3

要显示多图像，您必须循环浏览文件并附加img标签以显示多个pal文件。

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>

Answer 4

您的代码仅针对一张图片设置，因此只显示了一张图片。确保在上载发生时动态添加新图像。这是一个例子（也是 https://jsfiddle.net/ob8aas23/3/）：

HTML

<input type='file' multiple/>

JS

$(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)
}

Answer 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>

如何显示多个图像？

5 个答案: