<script language="javascript" type="text/javascript">
function add() {
var file=document.createElement("<input type='file' name='detailpic[]' />");
var btn=document.createElement("<input type='button' value='删除' οnclick='this.parentNode.parentNode.remove(currentTarget)' />");
var newtd=document.createElement("td");
var newtr=document.createElement("<tr></tr>");
newtd.appendChild(file);
newtd.appendChild(btn);
newtr.appendChild(newtd);
var filearea=document.getElementById("filearea");
filearea.appendChild(newtr);
}
function clear() {
removeChild(currentTarget);
}
</script>
<table border="0" width="100%">
<tbody id="filearea">
<tr>
<td><input type="file" name="detailpic[]" /> <input type="button" οnclick="add();" value="添加" /></td>
</tr>
</tbody>
如果不用createElement的方式,而换成innerHtml迭加的方式,正常,但是添加file时,原来的file的路径值就消失了。
<script language="javascript" type="text/javascript">
var i=1;
function append() {
i++;
var picarea=document.getElementById("detailPicArea");
picarea.innerHTML+="<div id=detailpicnew"+i+"><input type='file' name='detailpic[]' /> <input type='button' οnclick='del("+i+");' value='删除' /></div>";
}
function del(i) {
var parent=document.getElementById("detailPicArea");
var detailpicnew=document.getElementById("detailpicnew"+i);
parent.removeChild(detailpicnew);
}
</script>
<td id="detailPicArea">
<div><input type="file" name="detailpic[]" /> <input type="button" οnclick="append();" name="btnfileadd" value="添加" /></div>
</td>
终级解决方案是用ajax上传,这样编辑修改记录时思路也更加清晰。