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

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>