<style type="text/css">
/* IE安全限制问题,使得没有点击file的浏览按钮选择文件都不让上传,因此只能将file框透明来覆盖自己定义的浏览按钮上 */
.fileClass{position:absolute; margin:0px; opacity:0;filter:alpha(opacity:0); z-index:999;
width:738px;
height:90%;
}
</style>
<script type="text/javascript">
// 多附件添加
var i = 1;
function addFile() {
var obj = document.getElementById("fileArea");
var divObj = document.createElement("div");
divObj.setAttribute("id", "fileArea"+i);
obj.appendChild(divObj);
$("#fileArea"+i).css("position", "relative");
// fileAreaDiv.appendChild(document.createElement("BR"));
var fileAreaObj = document.getElementById("fileArea"+i);
// uploadfile:隐藏的file
var fileObj = document.createElement("input");
fileObj.setAttribute("type","file");
fileObj.setAttribute("id","uploadfile"+i);
fileObj.setAttribute("name","file");
fileObj.setAttribute("onchange","uploadfileName" + i+".value=value");
/* document.getElementById("uploadfile"+i).οnchange=function(){
document.getElementById("uploadfileName"+i).value = this.value;
} */
fileObj.setAttribute("class","fileClass");
fileAreaObj.appendChild(fileObj);
// fileName:文件输入框
var fileNameObj = document.createElement("input");
fileNameObj.id = fileNameObj.name = "uploadfileName" + i;
fileNameObj.setAttribute("readonly", "readonly");
fileAreaObj.appendChild(fileNameObj);
$("#uploadfileName"+i).css("width", "660px");
$("#uploadfileName"+i).css("background-color", "#F0F0F0");
// browser:浏览
var browserObj = document.createElement("input");
browserObj.setAttribute("type","button");
// browserObj.setAttribute("id","browser"+i);
browserObj.setAttribute("class","browse");
browserObj.id = browserObj.name = "browser" + i;
browserObj.setAttribute("onclick","uploadfile"+i+".click()");
fileAreaObj.appendChild(browserObj);
$("#browser" + i).css("margin-left","3px");
// 删除
var delObj = document.createElement("input");
delObj.setAttribute("type", "button");
delObj.id = delObj.name = "btn" + i;
delObj.setAttribute("class", "delete");
delObj.onclick = function(){
// 删除$(#"fileArea"+i)div下的所有子节点
while(fileAreaObj.hasChildNodes()) { //当div下还存在子节点时 循环继续
fileAreaObj.removeChild(fileAreaObj.firstChild);
}
// 删除$(#"fileArea"+i)div本身
obj.removeChild(fileAreaObj);
}
fileAreaObj.appendChild(delObj);
$("#btn" + i).css("margin-left","3px");
i++;
}
</script>
<html>
<body>
<div style="position: relative;"> -->
<div id="fileArea">
<div style="position: relative;">
<input type="file" id="uploadfile" name="file" class="fileClass" οnchange="uploadfileName.value=value">
<input name="uploadfileName" style="width:600px;background-color:#F0F0F0" value="" readonly="readonly"/>
<input type="button" class="browse" οnclick="uploadfile.click();">
<input type="button" id="addButton" value="添加" οnclick="addFile();">
</div>
</div>
</body>
</html>