動態刪除附件？

Question

我有上傳文件形式..

<form enctype="multipart/form-data" name="" action="" method="POST"> 
<input type="file" name="file[]" id="files" multiple /> 
<div id="selectedFiles"></div> 
<form> 

而且一個JavaScript函數來顯示的名稱和大小。

<script> 
    var selDiv = ""; 

    document.addEventListener("DOMContentLoaded", init, false); 

    function init() { 
     document.querySelector('#files').addEventListener('change', handleFileSelect, false); 
     selDiv = document.querySelector("#selectedFiles"); 
    } 

    function handleFileSelect(e) { 

     if(!e.target.files) return; 

     selDiv.innerHTML = ""; 


     var files = e.target.files; 
     for(var i=0; i<files.length; i++) { 
      var f = files[i]; 

      selDiv.innerHTML += "<span class='attach'>" + f.name + " <" + f.size + " bytes>" + "</span>"; 

     } 

    } 
    </script> 

是他們的任何人都知道如何使附件上的刪除功能？

例如：

圖像顯示上傳的文件..和紅色的「X」是刪除... 誰能請幫助我？使用javascript ..

Answer 1

請參閱下面的註釋。

<form action="some.php" method="post" id="form"> 
    <input type="file" id="file" multiple style="display: none;" /> 
    <button type="button" id="button">Select files</button> 
    <div id="selectedFiles"></div> 
    <button type="submit" id="submit">Upload</button> 
<form> 

var selDiv = document.querySelector("#selectedFiles"); 
document.querySelector("#button").addEventListener("click", function() { 
    document.querySelector("#file").click(); 
}, false); 
document.querySelector("#file").addEventListener("change", function() { 
    var files = this.files; 
    for (var i = 0; i < files.length; ++i) { 
     var file = files[i], 
      span = document.createElement("span"); 
     span.className = "attach"; 
     span.innerHTML = file.name+" <"+file.size+" bytes>"; 
     span.file = file; 
     var remove = document.createElement("span"); 
     remove.innerHTML = "Remove"; 
     span.appendChild(remove); 
     selDiv.appendChild(span); 
     remove.addEventListener("click", function() { 
      this.parentNode.removeChild(this); 
     }, false); 
    } 
}, false); 
document.querySelector("#form").addEventListener("submit", function(e) { 
    var files = selDiv.querySelectorAll("span.attach"), 
     data = new FormData(), 
     xmlhttp = new XMLHttpRequest(); 
    for (var i = 0; i < files.length; ++i) { 
     data.append("file[]", files[i].file); 
    } 
    xmlhttp.onreadystatechange = function() { 
     if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
      selDiv.innerHTML = "Uploading completed!"; 
     } 
    } 
    xmlhttp.open("POST", "upload.php", true); 
    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
    xmlhttp.send(data); 
    return false; 
}, false);