jquery动态增加与删除文件上传框

原创
2012/04/09 10:02
阅读数 1.2K

common.js:

$(function(){
    $('.add').live('click',function(){
        var _html = '<div>'+$(this).parents('div').html()+'</div>';
        $(this).parents('div').after(_html);
    })
    $('.remove').live('click',function(){
        var index = $(this).parents('div').index();
        if(index > 0){
            $(this).parents('div').remove();
        }
    })
})

index.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>test jquery</title>
<script src='jquery.js'></script>
<script src='common.js'></script>
<style>
form div{ margin:10px 0px;}
</style>
</head>
<body>
<form>
<div>
<input type='file' name='file' /><input type='button' class='add' value='+' /><input type='button' class='remove' value='-' />
</div>
</form>
</div>
</body>
</html>

备注:访问index.html,单击'+'或'-'即可看到效果。

展开阅读全文
打赏
0
0 收藏
分享
加载中
十分感谢!!!
2013/03/07 11:12
回复
举报
更多评论
打赏
1 评论
0 收藏
0
分享
返回顶部
顶部