Drag & Drop Upload - Удалить объект из ввода - PullRequest
Новая
       16

Drag & Drop Upload - Удалить объект из ввода

0 голосов
/ 11 сентября 2018

Я пытаюсь создать файл для перетаскивания. Все работает, единственная проблема - удалить отдельные файлы из списка. Мне бы хотелось, чтобы после нажатия кнопки УДАЛИТЬ файл был удален из списка, и он больше не будет помечен проводником. 

    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>

Ответы [ 2 ]

0 голосов
/ 11 сентября 2018

Вам нужно прикрепить событие клика к диапазону и удалить сам родительский узел для этого конкретного события 

  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>

Надеюсь, это поможет:)

0 голосов
/ 11 сентября 2018

Проверьте этот фрагмент. После нажатия файл и кнопка удаляются. Я использовал 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>
...