点击添加file标签,删除选中的file

实例

点击添加文件,添加一个file标签,点击删除,删除本行元素 

1.html代码

<div id="uploads">
    <h1>上传文件</h1>
    <input type="button" id="insertFils" class="easyui-linkbutton" name="insertFils" value="添加文件" onclick="insertFiles()">
    <input type="button" id="submitForm" class="easyui-linkbutton" name="submitForm" value="提交" onclick="loadFile()"><br/><br/>
    <div style='margin-bottom:20px'><input id='file0' type='file' id='file'  name='file' style='width:80%' ></div>
    <div id="filesUploads">
					
    </div>
</div>

2.js代码

2.1点击添加元素

	function insertFiles(){
		//获取div中input得file数量
		var aa = document.getElementById("uploads").getElementsByTagName("input");
		var num=0-2;
		for (var i=0; i<aa.length; i++){
			num++;
		}
		$("#filesUploads").append("<div style='margin-bottom:20px'><input id='file"+num+"' type='file' id='file'  name='file' style='width:80%' ><button class='delup' style='width:20%'>删除</button></div>");
		//easyui的easyui-filebox无法解决渲染问题
		//$("#uploads").append("<div style='margin-bottom:20px'><input id='file001' class='easyui-filebox' id='file'  name='file' data-options='prompt:'选择一个或多个文件...''  style='width:100%' ></div>");
		//$.parser.parse($('#file001').parent());
	
	}

2.2删除事件

	$(function() {		
		showOrderTable();
		$('#filesUploads').click(function(e) { // 在页面任意位置点击而触发此事件.DelUpLoad
			if($(e.target)[0].type=="submit"){
				$(e.target).parent().remove();       // e.target表示被点击的目标
			}
		})
		
	});

非前端专业人员,方法并非专业,但目前能过解决问题,若有更好方法,请留言学习!!!

猜你喜欢

转载自blog.csdn.net/qq_40312160/article/details/86505700