多附件上传之动态添加input标签

最新推荐文章于 2024-08-23 10:06:47 发布

qq_34015851

最新推荐文章于 2024-08-23 10:06:47 发布

阅读量1.9k

点赞数 1

分类专栏： JS 文章标签： JS input file

本文链接：https://blog.csdn.net/qq_34015851/article/details/50764388

版权

JS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<html>
    <meta charset="utf-8">
    <table cellpadding="1" cellspacing="1" border="1">
        <thead>
            <td width="50%">附件列表</td>
            <td >附件操作栏</td>
        </thead>
        <tbody>
            <tr>
                <td id="inputFile">
                             <p id="index_1"><input type="file" name="files"></input><button type="button" onclick="delFile('inputFile',this.parentNode.id);">删除</button></p>
                </td>
                <td>
                    <button type="button" onclick="addFile();">增加</button>
                    <button type="submit" >上传</button>
                </td>
            </tr>

        </tbody>
    </table>
</html>
<script type="text/javascript">

    function delFile(obj, index){
        var inputFileId = document.getElementById(obj);
        var inputFileByIndex = document.getElementById(index);
        inputFileId.removeChild(inputFileByIndex);
    }
    function addFile(){
        var fileName = "inputFile";
        var inputFileId = document.getElementById(fileName);
        var index = 1;
        if(null == inputFileId.lastChild || inputFileId.lastChild.id == undefined ){
            index = 1;
        }else{
            index = parseInt(inputFileId.lastChild.id.substring(6))+1;
        }

        var p = document.createElement("p");
        p.id="index_"+index;
        var input = document.createElement("input");
        input.type="file";
        input.name="files";
        var button = document.createElement("button");
        button.type="button";button.innerHTML="删除";button.onclick=function(){delFile(fileName, p.id);};
        p.appendChild(input);
        p.appendChild(button);

        inputFileId.appendChild(p);
    }
</script>