js实现多文件上传

最新推荐文章于 2025-05-08 16:53:18 发布

mischen520

最新推荐文章于 2025-05-08 16:53:18 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript

本文链接：https://blog.youkuaiyun.com/miachen520/article/details/51863197

javascript 专栏收录该内容

72 篇文章

订阅专栏

js实现多文件上传

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="util.js"></script>
    <script>
        //多文件上传  例子  练习dom操作  和动态事件绑定
        function addFile(){
            //获取新添加的文件的input 的标签的容器
            var con=$("#container");
            //创建我们的file文件域
            var fileInp=document.createElement("input");
            //设置input 的类型为file
            fileInp.type="file";
            //创建我们的删除按钮
            var butInp=document.createElement("input");
            //设置类型和 按钮的名字
            butInp.type="button";
            butInp.value="删除";
            //创建一个换行
            var br=document.createElement("br");
            //从前面正向添加
            con.insertBefore(br,con.firstChild);
            con.insertBefore(butInp,con.firstChild);
            con.insertBefore(fileInp,con.firstChild);
            //注释的部分为尾部添加   前面的代码注释起来 执行下面即可
//            con.appendChild(fileInp);
//            con.appendChild(butInp);
//            con.appendChild(br);
            butInp.onclick=function(){
                con.removeChild(br);
                con.removeChild(butInp);
                con.removeChild(fileInp);
            }
        }

    </script>
</head>
<body>
    <form action="test.html" method="get">
        <input type="file" />
        <input type="button" value="添加" onclick="addFile()" />
        <div id="container" >


        </div>
    </form>
</body>
</html>

js代码：

/**
 *
 * @param idOrName  如果传入id  前面加上#   如果传入name  直接传入
 * @returns {*}  返回元素节点  如果没找到 返回null
 */
function $(idOrName){
    var obj=null;
    if(idOrName){
        if(idOrName.charAt(0)=="#"){
            obj=document.getElementById(idOrName.substring(1));
        }else{
            obj=document.getElementsByName(idOrName);
        }
    }
    return obj;
}
/**
 *
 * @param parentNode  父节点
 * @returns {Array}  所有的元素子节点
 */
function getChildNodes(parentNode){
    var childs=parentNode.childNodes;
    var newChilds=[];
    for(var i=0;i<childs.length;i++){
        if(childs[i].nodeType==1){
            newChilds.push(childs[i]);
        }
    }
    return newChilds;
}
/**
 *
 * @param parentNode 父节点
 * @returns {*|Node}   第一个元素节点
 */
function getFirstChild(parentNode){
    var firstChild=parentNode.firstChild;
    if(firstChild.nodeType==3){
        firstChild=firstChild.nextSibling;
    }
    return firstChild;

}
/**
 *
 * @param parentNode 父节点
 * @returns {*|Node}   最后一个元素节点
 */
function getLastChild(parentNode){
    var lastChild=parentNode.lastChild;
    if(lastChild.nodeType==3){
        lastChild=lastChild.previousSibling;
    }
    return lastChild;
}
/**
 *
 * @param node  元素节点
 * @returns {*|Node}  返回下一个兄弟元素节点
 */
function getNextSibling(node){
    var nextNode=node.nextSibling;
    if(nextNode.nodeType==3){
        nextNode=nextNode.nextSibling;
    }
    return nextNode;
}
/**
 *
 * @param node  元素节点
 * @returns {*|Node}  返回前一个兄弟元素节点
 */
function getPreviousSibling(node){
    var preNode=node.previousSibling;
    if(preNode.nodeType==3){
        preNode=preNode.previousSibling;
    }
    return preNode;
}