顯示在文件輸入標記中選擇的所有圖像

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>