Question

我希望用户选择多个文件，并在客户端显示选择作为预览的所有图像。这是我的HTML代码：

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

我的JavaScript代码：

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

但它根本不起作用，我该怎么做才能解决这个问题？

Answer 1

从#移除getElementById()并执行类似此操作

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>

显示在文件输入标签中选择的所有图像

1 个答案: