Question

我有这个表格，我可以在提交表格之前选择多个图像并预览所选图像。但是只显示了1张图像。我想显示所有选定的图像。请帮忙。

<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" id="newstatus" runat="server">
    <div style="display: inline-flex">
      <div style="width: 160px">
        <input type="file" name="file-5[]" id="file-5" class="inputfile inputfile-4" data-multiple-caption="{count} files selected" multiple />
        <label for="file-5">
        <span style="display: none;">Choose a file&hellip;</span></label>
        <img id="status-img" src="#" alt="" width="150" height="150" /><br />
      <input type="submit" name="post" value="Post" class="post-btn" id="submit" />
    </div>
  </form>

使用Javascript：

<script>
function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
            $('#status-img').attr('src', e.target.result);
            $('.removeimg').fadeIn();
        }
        reader.readAsDataURL(input.files[0]);
    }
}

$("#file-5").change(function(){
    readURL(this);
});
</script>

Answer 1

您必须循环所选图像的数量并使用数据进行播放。

HTML代码：添加预览div。

npm

JS代码：

<div id="imgs"></div>

在预览中显示多个图像

1 个答案: