從圖像上傳陣列中刪除選定的圖像，而不僅僅是預覽。

Question

大家好，我正在努力解決這個問題。這裏是我的代碼：

function handleFileSelect(evt) { 
    var files = evt.target.files; 

    for (var i = 0, f; f = files[i]; i++) { 

     if (!f.type.match('image.*')) { 
     continue; 
     } 

     var reader = new FileReader(); 

     reader.onload = (function(theFile) { 
     return function(e) { 

      var span = document.createElement('span'); 
      span.innerHTML = ['<div class="col-md-6 margin-bottom-10"><div class="container_h"><img src="', e.target.result,'" alt="Avatar"class="image_h width-100" style="width:100%"></div></div></div>'].join(''); 
      document.getElementById('list').insertBefore(span, null); 
     }; 
     })(f); 

     reader.readAsDataURL(f); 
    } 
    }document.getElementById('file-input').addEventListener('change', handleFileSelect, false); 

它當我上傳圖片，但這個問題我無法從我的點擊陣列刪除一個它們完美的作品。

Answer 1

試試這個。

HTML標記：

<input type="file" id="file-input"> 

<div id="listContainer" class="lists"></div> 

JS：

function handleFileSelect(evt) { 
    var files = evt.target.files; 

    for (var i = 0, f; f = files[i]; i++) { 

     if (!f.type.match('image.*')) { 
     continue; 
     } 

     var reader = new FileReader(); 

     reader.onload = (function(theFile) { 
     return function(e) { 

      var span = document.createElement('span'); 
      span.innerHTML = ['<div class="col-md-6 margin-bottom-10"><div class="container_h"><img src="', e.target.result,'" alt="Avatar"class="image_h width-100" style="width:100%"></div></div></div>'].join(''); 
      document.getElementById('listContainer').insertBefore(span, null); 
     }; 
     })(f); 

     reader.readAsDataURL(f); 
    } 
    }document.getElementById('file-input').addEventListener('change', handleFileSelect, false); 
    var lists = document.getElementsByClassName('lists'); 
    for(var i=0; i<lists.length; i++) { 
    lists[i].addEventListener('click', function(evt) { 
     evt.target.parentNode.removeChild(evt.target); 
    }); 
    } 

工作演示：https://jsfiddle.net/r45waadf/

Answer 2

下面的代碼可以刪除圖像

<input type="file" name="" id="file-input"> 
<div id="list"></div> 


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script type="text/javascript"> 
    function handleFileSelect(evt) { 
     var files = evt.target.files; 

     for (var i = 0, f; f = files[i]; i++) { 

      if (!f.type.match('image.*')) { 
      continue; 
      } 

      var reader = new FileReader(); 

      reader.onload = (function(theFile) { 
      return function(e) { 

       var span = document.createElement('span'); 
       span.innerHTML = ['<div class="remove">remove</div><div class="col-md-6 margin-bottom-10"><div class="container_h"><img src="', e.target.result,'" alt="Avatar"class="image_h width-100" style="width:100%"></div></div></div>'].join(''); 
       document.getElementById('list').insertBefore(span, null); 
      }; 
      })(f); 

      reader.readAsDataURL(f); 
     } 
    } 

    document.getElementById('file-input').addEventListener('change', handleFileSelect, false); 
    $(document).on('click', '.remove', function(){ 
      $(this).closest('span').remove(); 
    }); 
</script>