jquery用each()动态创建元素

最新推荐文章于 2020-07-30 11:26:28 发布

转载最新推荐文章于 2020-07-30 11:26:28 发布 · 777 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/VirtualLive/archive/2012/04/20/2458928.html

文章标签：

#javascript #xhtml #ViewUI

本文介绍了一种使用jQuery实现动态添加和删除文件上传输入框的方法。通过绑定点击事件，可以控制上传框的数量，适用于需要上传多个文件的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="/Script/jquery-1.3.2-vsdoc2.js"></script>
    <script language="javascript">
        $(document).ready(function () {
            addPic();
            delPic();
        })
        var i = 0;
        //增加图片
        function addPic() {
            $(".addpic").bind('click', function () {
                //控制生成多少个元素从0开始
                if (i < 2) {
                    //先创建type对象
                    $(" <input/>").attr("class", "UpFile").attr("type", "file").appendTo("#picCont");
                    //然后在动态循环绑定ID号
                    $(".UpFile").each(function (i) {
                        this.id = "File_" + i;
                    })
                    i++;
                }
                else {
                    alert("不能再添加了");
                }
            });
        }
        //减少图片
        function delPic() {
            $(".delpic").bind("click", function () {
                if (((i + 1) - 1) > 0) {
                    //减少元素
                    $("#File_" + i).remove();
                    i--;
                }
                else {
                    alert("请保留一个");
                }
            })

        }
    </script>
</head>
<body>
    <a class="addpic">增加图片</a> <a class="delpic">减少图片</a>
    <div id="picCont">
        <input type="file" class="UpFile" />
    </div>
</body>
</html>

转载于:https://www.cnblogs.com/VirtualLive/archive/2012/04/20/2458928.html