Программно удалить 1 или более файлов из загрузки в html5?

Question

У меня есть ниже.В dostuff я хотел бы удалить 1 или более файлов (но не все) из файловых загрузок.

Я принимаю только изображения png, jpg и gif.Bmp, svg и т. Д., Форма будет отклонена.

Я делаю проверку в Javascript, но мне хотелось бы спросить, могу ли я удалить непринятые файлы (bmp и т. Д.) И продолжить.Как я могу удалить файлы из загрузки программным способом?

<input type='file' name='uploads[]' multiple="" 
       onchange="dostuff(this);" accept="image/*"  />

Answer 1

Недавно я столкнулся с этой проблемой.Я использую jQuery для решения своей проблемы, что означает, что она может быть переведена на vanilla js, если вы захотите это сделать.Вот фрагмент кода:

function clearFileInput(){
   var fileInput = $('#your-file-input-selector');
   var fileInputContainer = fileInput.parent();
   var fileInputClone = fileInput.clone();

   fileInput.remove();
   fileInputContainer.append(fileInputClone);  
}

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

Answer 2

Вы можете обращаться к файлам как к массиву, а затем просто манипулировать массивом, если необходимо удалить непринятые файлы.

<script type="text/javascript">
    function dostuff(input) {
        var output = 'All Files:<br />';
        var validOutput = '<br />Valid Files:<br />';
        var validFiles = [];
        for(var i = 0; i < input.files.length; i++) {
            if(input.files[i].name.substr(-3, 3) != 'jpg') {
                alert(input.files[i].name + ' is invalid');
            }
            else {
                validFiles.push(input.files[i]);
                validOutput += input.files[i].name;
            }
            output += input.files[i].name + '<br />';
        }
        output += validOutput;
        document.getElementById('output').innerHTML = output;
    }
</script>

<input type='file' name='uploads[]' multiple="" onchange="dostuff(this);" accept="image/*"  />
<div id="output"></div>

Fiddle here .