Question

我正在尝试创建一个拖放式上传文件。一切正常，唯一的问题是从列表中删除单个文件。我希望单击“删除”后，该文件将从列表中删除，并且不再由文件浏览器标记。

    function handleFileSelect(evt) {
        var files = evt.target.files;

        for (var i = 0, f; f = files[i]; i++) {

            var reader = new FileReader();

            reader.onload = (function(theFile) {
                return function(e) {
                    // Render thumbnail.
                    var div = document.createElement('div');
                    div.className = "upload-file";
                    div.innerHTML = ['<span>[DELETE]</span> ', escape(theFile.name)].join('');
                    document.getElementById('list').insertBefore(div, null);
                };
            })(f);

            reader.readAsDataURL(f);
        }
    }

    document.getElementById('files').addEventListener('change', handleFileSelect, false);

.space {
  border: 2px solid darkorange;
  width: 300px;
}
.upload-file {
  display: inline-block;
  background-color: #012345;
  color: #fff;
  border-radius: 20px;
  padding: 4px 10px;
  margin: 5px;
}
span {
  color: red;
  font-weight: 700;
  cursor: pointer;
}

<div class="space">
    <input type="file" id="files" name="files[]" multiple />
    <output id="list"></output>
</div>

Answer 1

检查此代码段。单击后，文件和按钮将被删除。我已经使用jQuery解决了这个问题。

function handleFileSelect(evt) {
        var files = evt.target.files;

        for (var i = 0, f; f = files[i]; i++) {

            var reader = new FileReader();

            reader.onload = (function(theFile) {
                return function(e) {
                    // Render thumbnail.
                    var div = document.createElement('div');
                    div.className = "upload-file";
                    div.innerHTML = ['<span>[DELETE]</span> ', escape(theFile.name)].join('');
                    document.getElementById('list').insertBefore(div, null);
                };
            })(f);

            reader.readAsDataURL(f);
        }
    }

    document.getElementById('files').addEventListener('change', handleFileSelect, false);
    $(document).on('click', '.upload-file span', function(){
      $('#files').val("");
      $(this).closest('.upload-file').remove();
    });

.space {
  border: 2px solid darkorange;
  width: 300px;
}
.upload-file {
  display: inline-block;
  background-color: #012345;
  color: #fff;
  border-radius: 20px;
  padding: 4px 10px;
  margin: 5px;
}
span {
  color: red;
  font-weight: 700;
  cursor: pointer;
}

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<div class="space">
    <input type="file" id="files" name="files[]" multiple />
    <output id="list"></output>
</div>

Answer 2

您需要将点击事件附加到跨度，并删除该特定事件上的父节点本身

  function handleFileSelect(evt) {
        var files = evt.target.files;
        
 
        for (var i = 0, f; f = files[i]; i++) {

            var reader = new FileReader();

            reader.onload = (function(theFile) {
           
                return function(e) {
                    // Render thumbnail.
                    var div = document.createElement('div');
                    div.className = "upload-file";
                    div.innerHTML = ['<span onclick="deleteit(event)" >[DELETE]</span> ', escape(theFile.name)].join('');
                    document.getElementById('list').insertBefore(div, null);
                };
            })(f);

            reader.readAsDataURL(f);
        }
    }
    
   

    document.getElementById('files').addEventListener('change', handleFileSelect, false);

.space {
  border: 2px solid darkorange;
  width: 300px;
}
.upload-file {
  display: inline-block;
  background-color: #012345;
  color: #fff;
  border-radius: 20px;
  padding: 4px 10px;
  margin: 5px;
}
span {
  color: red;
  font-weight: 700;
  cursor: pointer;
}

<div class="space">
    <input type="file" id="files" name="files[]" multiple />
    <output id="list"></output>
</div>
<script>
   function deleteit(event) {         event.target.parentNode.parentNode.removeChild(event.target.parentNode);
   }
</script>

希望这会有所帮助：）

拖放上传-从输入中删除对象

2 个答案: