使用JS冒泡及委托实现web页面多文件上传 

<!DOCTYPE html>
<html>
<head>
  <meta charset="gb2312">
    <title></title>
</head>
<body>
<div id="testDiv" onclick="delFile(event)" >
<input id="stopbubble"  type="button" value="增加" onclick="addFile(event)" />
</div>
<script type="text/javascript">
    function addFile(event)
{
    var div = document.getElementById("testDiv");
    div.insertAdjacentHTML("beforeEnd", "<input type='file' onclick='stopProp(event)'/> <input  type='button' value='删除'  /><br>");
    event.stopPropagation(); //阻止添加新标签时冒泡
}
function stopProp(event) {
    event.stopPropagation();//阻止上传文件时冒泡
}
function delFile(event) {
    var par = document.getElementById("testDiv"); 
    var listItems = par.getElementsByTagName("input");
    if (event.target.tagName.toLowerCase() === 'input') {
        var aindex = [].indexOf.call(listItems, event.target);//获取当前删除的节点索引
        par.removeChild(listItems[aindex - 1]);//删除前一个
    }
    par.removeChild(event.target);//删除后一个
}
</script>
</body>
</html>

 详细思路：首先在<div id="testDiv" onclick="delFile(event)" >标签里放一个增加上传标签的按钮，每点击一下增加按钮，随即增加一个文件上传标签及其后的删除按钮，同时禁用新增按钮的事件向上冒泡，与此同时将文件上传的按钮也禁止冒泡。当点击删除按钮时随即触发<div id="testDiv"里的删除事件。

，在页面可以动态的添加及删除上传文件标签，实现效果如下

 

posted @ 2019-07-11 11:32  救赎之路其修远兮  阅读(195)  评论(0)    收藏  举报