Как удалить один конкретный выбранный файл из управления входным файлом, когда я выбираю несколько файлов?
Здесь загрузка нескольких файлов с другой папкой с функцией добавления и удаления.
Функция удаления работает нормальноНо мне нужно удалить один файл при загрузке нескольких файлов.
Кто-нибудь знает, как удалить выбранный файл из файла ввода?
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 = '×';
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>