实例
点击添加文件,添加一个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表示被点击的目标
}
})
});
非前端专业人员,方法并非专业,但目前能过解决问题,若有更好方法,请留言学习!!!