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

以编程方式从html5中上传一个或多个文件？

2 个答案: