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

时间：2019-07-11 14:43:38 收藏：0 阅读：90

<!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>

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

技术分享图片

原文：https://www.cnblogs.com/liyunworld/p/11168917.html