Javascript 在div标记中显示多个附加文档名称，并在单击它们时删除单个文档。

我一直在尝试使用JQuery实现这个功能，当使用输入字段上传文件时，我希望添加div标记以及上面的文件名。 这是输入字段的代码：

 <input id="uploadBtn" type="file" name="uploadBtn" title="Upload Button" multiple>

以下是将div标记添加到其上方屏幕的函数：

     function handleFileSelect(e) {

        if(!e.target.files) return;
           var data = new FormData(); 
            var files = e.target.files;
            for(var i=0; i<files.length; i++) {
            var f = files[i];
            data.append(f.name,f);
            console.log(f.name); 
            **$('#attachedFiles').append(
                 '<div class="row"><div class="mdl-textfield mdl-js-textfield justify-space mdl-textfield--file mdl-textfield--file-is-dirty has-placeholder is-upgraded" data-upgraded=",MaterialTextfield"><input class="mdl-textfield__input" placeholder="'+f.name+'" readonly="" type="text" title="Upload File"></input> <div class="mdl-button mdl-button--primary mdl-button--icon mdl-button--file">                                       <svg role="img" aria-labelledby="remove-attachment1" height="24" viewBox="0 0 24 24"                                             width="24" xmlns="http://www.w3.org/2000/svg">                                           <title id="remove-attachment1">Remove Attachment</title>                                           <path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6 16.538l-4.592-4.548 4.546-4.587-1.416-1.403-4.545 4.589-4.588-4.543-1.405 1.405 4.593 4.552-4.547 4.592 1.405 1.405 4.555-4.596 4.591 4.55 1.403-1.416z"></path>                                   </svg>                                     <input id="'+uploadFile[i]+  '" data-usage="' + f.name +  '"  title="Upload Button">                              </div>                                </div>                            </div>'
            );**

            }


    }

功能手柄文件选择（e）{
如果（！e.target.files）返回；
var data=new FormData（）；
var files=e.target.files；
对于（var i=0；i而言，如果不从页面中看到更多的代码，则很难给出准确的建议。如果在页面加载后向页面添加元素，则以后将无法添加事件侦听器

为了解决这个问题，我会在每个文件中再添加一个类，然后在您的文件容器中添加一个侦听器（我认为您的容器具有id“attachedFiles”）：

HTML:

现在，出现在attachedFiles容器中的任何新文件都将侦听单击并执行删除功能。
您的代码提供的信息不需要调试

因此，我提供了一种不同的方法来解决您的问题

HTML5文件输入的文件列表是只读的，因此当试图从中删除文件时，您将不被允许

您需要做的是维护一个单独的数组列表（示例中为JSON数组）

我已经用一个div将您的X按钮包装起来，该div将文件索引连接到一个“file”字符串，并添加了一个
onclick
函数
removeLine（obj）
，该函数接受元素作为对象

我还在全局范围中添加了一个JSON数组
finalFiles
，并将
inputFile
移动到全局范围

当文件输入发生更改时，我将通过以下方式使用所选文件设置JSON数组：

$.each(this.files,function(idx,elm){
           finalFiles[idx]=elm;
        });

函数
removeLine
将刷新输入文件列表，以允许再次选择相同的文件如果用户错误地删除了文件，该函数将从包装分区id获取文件索引，删除包装分区，然后从JSON数组中删除文件

function removeLine(obj)
    {
      inputFile.val('');
      var jqObj = $(obj);
      var container = jqObj.closest('div');
      var index = container.attr("id").split('_')[1];
      container.remove(); 

      delete finalFiles[index];
      //console.log(finalFiles);
    }

您可以在表单提交时维护您的文件，并使用FormData通过AJAX post以类似于的方式发送它们


var dropZoneId=“drop zone”；
var buttonId=“单击此处”；
var mouseOverClass=“鼠标悬停”；
var dropZone=$（“#”+dropZoneId）；
var inputFile=dropZone.find（“输入”）；
var finalFiles={}；
$（函数（）{
var ooleft=dropZone.offset（）.left；
var ooright=dropZone.outerWidth（）+ooleft；
var ootop=dropZone.offset（）.top；
var oobottom=dropZone.outerHeight（）+ootop；
document.getElementById（dropZoneId）.addEventListener（“dragover”，函数（e）{
e、 预防默认值（）；
e、 停止传播（）；
dropZone.addClass（鼠标覆盖类）；
var x=e.pageX；
var y=e.pageY；
如果（！（xooright | | yoobottom））{
inputFile.offset({
顶部：y-15，
左：x-100
});
}否则{
inputFile.offset({
前-400，
左：-400
});
}
}，对）；
如果（按钮编号！=“”）{
变量clickZone=$（“#”+buttonId）；
var oleft=clickZone.offset（）.左；
var oright=clickZone.outerWidth（）+oleft；
var otop=clickZone.offset（）.top；
var obottom=clickZone.outerHeight（）+otop；
$（“#”+buttonId）.mousemove（函数（e）{
var x=e.pageX；
var y=e.pageY；
如果（！（xoright | yobottom））{
inputFile.offset({
顶部：y-15，
左：x-160
});
}否则{
inputFile.offset({
前-400，
左：-400
});
}
});
}
document.getElementById（dropZoneId）.addEventListener（“drop”，函数（e）{
$（“#”+dropZoneId）.removeClass（mouseOverClass）；
}，对）；
inputFile.on（'change'，函数（e）{
最终文件={}；
$（'#filename'）.html（“”）；
var fileNum=this.files.length，
初始值=0，
计数器=0；
$.each（this.files，function（idx，elm）{
最终文件[idx]=elm；
});
用于（初始值；初始值“+计数器+””+此.files[初始值].name+”）；
}
});
})
功能删除行（obj）
{
inputFile.val（“”）；
var jqObj=$（obj）；
var container=jqObj.closest（'div'）；
var index=container.attr（“id”）.split（“'）[1]；
容器。移除（）；
删除最终文件[索引]；
//控制台日志（最终文件）；
}
#下降区{
宽度：100%；
最小高度：150px；
边框：3个虚线rgba（0,0,0,3）；
边界半径：5px；
字体系列：Arial；
文本对齐：居中；
位置：相对位置；
字体大小：20px；
颜色：#7E7E7E；
}
#下降区输入{
位置：绝对位置；
光标：指针；
左：0px；
顶部：0px；
不透明度：0；
}
/*重要的*/
#鼠标悬停{
边框：3个虚线rgba（0,0,0,3）；
颜色：#7E7E7E；
}
/*如果你不想要这个按钮*/
#点击这里{
显示：内联块；
光标：指针；
颜色：白色；
字号：17px；
宽度：150px；
边界半径：4px；
背景色：#4679BD；
填充：10px；
}
#单击此处：悬停{
背景色：#376199；
}
#文件名{
边缘顶部：10px；
边缘底部：10px；
字体大小：14px；
线高：1.5em；
}
.文件预览{
背景：#ccc；
边框：5px实心#fff；
盒子阴影：0.4×rgba（0,0,0,0.5）；
显示：内联块；
宽度：60px；
高度：60px；
文本对齐：居中；
字体大小：14px；
边缘顶部：5px；
}
.closeBtn:悬停{
颜色：红色；
显示：内联块；
}
}

把文件放在这里

或者点击这里。。


请检查这行代码。您正在声明输入id不正确。
应该是“uploadFile”+i.
对不起，请提供更多信息。例如：
removeFun在哪里
$('#attachedFiles').on('click', '.att-file', function() {
    // remove function
}

$.each(this.files,function(idx,elm){
           finalFiles[idx]=elm;
        });

function removeLine(obj)
    {
      inputFile.val('');
      var jqObj = $(obj);
      var container = jqObj.closest('div');
      var index = container.attr("id").split('_')[1];
      container.remove(); 

      delete finalFiles[index];
      //console.log(finalFiles);
    }

<input id="'+uploadFile[i]+  '" data-usage="' + f.name +  '"  title="Upload Button">