Question

我正在尝试使用删除功能构建多文件上传 - 如下图所示：

我跟着this JS Fiddle example。我正在尝试删除id属性为 uploadBtn 的按钮，并使用本机浏览器文件输入（用于上传）。

到目前为止，我有这段代码：

HTML

<input type="file" id="uploadFile" name="FileUpload"  multiple="multiple"/>
<div id="upload_prev"></div>

JavaScript

$(document).on('click','.close',function(){
    $(this).parents('span').remove();

})

$('#uploadFile').on('change', function() {

    var filename = this.value;
    var lastIndex = filename.lastIndexOf("\\");
    if (lastIndex >= 0) {
        filename = filename.substring(lastIndex + 1);
    }
    var files = $('#uploadBtn')[0].files;
    for (var i = 0; i < files.length; i++) {
     $("#upload_prev").append('<span>'+'<div class="filenameupload">'+files[i].name+'</div>'+'<p class="close" >X</p></span>');
    }    
}

CSS

.filenameupload {
    width:98%;  
}

#upload_prev {
    border:thin solid #000;
    width: 65%;
    padding:0.5em 1em 1.5em 1em;
}

#upload_prev span {
    display: flex;
    padding: 0 5px;
    font-size:12px;
}

但是这不能使用删除功能列出文件名。我能在这里纠正什么？

Answer 1

您正在尝试为输入类型=＆＃34;文件＆＃34;设置值，哪个是错的＆amp;它在那里打破了。

你应该创建一个输入类型=＆＃34; text＆＃34;并且玩弄它。

Answer 2

这里有一些变化：

在添加事件处理程序之前，等待DOM加载.ready()。

$(document).ready(function(readyEvent) {
    //setup observers

接受更改处理程序中的change event参数，然后使用event.target.files代替$('#uploadBtn')[0].files;。请在passing data的.on()部分了解详情。
```
$('#uploadFile').on('change', function(changeEvent) {
     var files = changeEvent.target.files;
```

在this modified plunker中查看。

编辑：

您在评论中询问了如何从列表中删除项目（＆＃34; 一旦我逐个删除文件，它不会改变我首先选择的文件数量，你可以在建议时提出建议吗？删除文件剩余的文件数＆＃34;）

请参阅this answer：

＆＃34; 如果您只想删除几个选定的文件：您不能。您链接的File API Working Draft包含注释：＆＃34;

HTMLInputElement界面[HTML5]具有只读 FileList属性，[...] [强调我的]

因此，您可以清除整个列表，但不能清除单个项目。

$(document).on('click', '.close', function(closeEvent) {
    $(this).parents('span').remove();
    var fileInput = $('#uploadFile')[0];

    //clear all selected files from the file input field
    fileInput.value = '';
}

另一种选择是开始在更改事件中上传文件，并在每次上传完成后，添加一个隐藏的输入，其中包含上传文件的ID，当点击删除按钮时可以将其删除

Answer 3

请试试这个

<div class="row uploadwrapper">
<div class="col-md-4">
<input type="file" class="document" name="document[]" accept="image/jpeg">
</div>
<div class="col-md-4">  
<button type="button" onclick="uploadanother(this)">+ Upload another document</button>
</div>
</div>

function uploadanother(elem)
{
var document    = $(elem).parent().prev().find('input[type="file"]').val();
if(document!='')
{
var clonewrap   = $(elem).parent().parent().clone();                
clonewrap.find('button').removeAttr('onclick');
clonewrap.find('button').attr('onclick','removeupload(this)');
clonewrap.find('button').html('- Remove document');
$(elem).parent().parent().before(clonewrap);
$(elem).parent().prev().find('input[type="file"]').val('');
}
}

function removeupload(elem)
{
$(elem).parent().parent().remove();
}

带删除功能的多文件上传

3 个答案:

编辑：