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

【问题标题】：Drag & Drop Upload - Remove object from input拖放上传 - 从输入中删除对象
【发布时间】：2019-02-15 17:41:00
【问题描述】：

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

    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>

【问题讨论】：

标签： javascript html file-upload drag-and-drop

【解决方案1】：

检查这个sn-p。单击文件后，按钮被删除。我用 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>

【讨论】：

一切正常，但问题和上面一样:(.

【解决方案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>

希望这会有所帮助:)

【讨论】：

一切都很好，但它会从输入中删除所有文件，而不是特定文件。我的猜测是您必须进入输入表并删除选定的表，但是每次加载文件时都会重置输入。