Загрузка нескольких файлов в другую папку с функцией добавления и удаления в JavaScript (необходимо удалить один файл за один вход) - PullRequest
1 голос
/ 07 ноября 2019

Как удалить один конкретный выбранный файл из управления входным файлом, когда я выбираю несколько файлов?

Здесь загрузка нескольких файлов с другой папкой с функцией добавления и удаления.

Функция удаления работает нормальноНо мне нужно удалить один файл при загрузке нескольких файлов.

Кто-нибудь знает, как удалить выбранный файл из файла ввода?

var fileInput = document.getElementById('term_upload');
var filesList = document.getElementById('fileList');
var idBase = "fileInput_";
var idCount = 0;

var inputFileOnChange = function() {
  var existingLabel = this.parentNode.getElementsByTagName("LABEL")[0];
  var isLastInput = existingLabel.childNodes.length <= 1;

  if (!this.files[0]) {
    if (!isLastInput) {
      this.parentNode.parentNode.removeChild(this.parentNode);
    }
    return;
  }

  for (var v = 0; v < this.files.length; v++) {
    //var existingLabel1 = this.parentNode.getElementsByTagName("LABEL");
    var filename = this.files[v].name;
    //var filename = this.files[0].name;
    //alert(filename);
    var deleteButton = document.createElement('span');
    //alert(deleteButton.length);
    deleteButton.innerHTML = '&times;';

    deleteButton.onclick = function(e) {
      //this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
      this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
    }

    var filenameCont = document.createElement('span');
    filenameCont.innerHTML = filename;
    //existingLabel1.innerHTML = "";
    existingLabel.appendChild(filenameCont);
    existingLabel.appendChild(deleteButton);
  }

  if (isLastInput) {
    var newFileInput = document.createElement('input');
    newFileInput.type = "file";
    newFileInput.name = "term_upload[]";
    newFileInput.multiple = "multiple";
    newFileInput.accept = ".pdf,.doc,.docx";
    newFileInput.id = idBase + (++idCount);
    newFileInput.onchange = inputFileOnChange;

    var newLabel = document.createElement('label');
    newLabel.htmlFor = newFileInput.id;
    newLabel.innerHTML = '+';

    var newDiv = document.createElement('div');
    newDiv.appendChild(newFileInput);
    newDiv.appendChild(newLabel);

    filesList.appendChild(newDiv);
  }
}

fileInput.onchange = inputFileOnChange;
#fileList>div>label>span:last-child {
  color: red;
  display: inline-block;
  margin-left: 7px;
  cursor: pointer;
}

#fileList input[type=file] {
  display: none;
}

#fileList>div:last-child>label {
  display: inline-block;
  width: 32px;
  height: 28px;
  font: 15px/22px Tahoma;
  color: orange;
  text-align: center;
  border: 2px solid orange;
  border-radius: 34%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-xs-3 col-md-3 col-sm-3 form-group multi_catelouge" id="fileList">
  <div>
    <input id="term_upload" type="file" name="term_upload[]" multiple="multiple" accept=".pdf,.doc,.docx" />
    <DIV CLASS="TEST"></DIV>
    <label for="term_upload">+</label>
  </div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...