<style>
a.addfile {
background-image:url(http://p.mail.163.com/js31style/lib/0703131650/163blue/f1.gif);
background-repeat:no-repeat;
background-position:-823px -17px;
display:block;
float:left;
height:20px;
margin-top:-1px;
position:relative;
text-decoration:none;
top:0pt;
width:80px;
}input.addfile {
/*left:-18px;*/
}input.addfile {
cursor:pointer !important;
height:18px;
left:-13px;
filter:alpha(opacity=0);
position:absolute;
top:5px;
width:1px;
z-index: -1;
}
</style><div id = "showFile"></div>
<form name="PostForm" method="post" action="sendMailNsr.jsp">
<table border="0" cellpadding="0" cellspacing="0" id="table1" ><a href=#? class="addfile">
<INPUT id="File1" type="file" class="addfile" name="File1" size="1" language="javascript" onchange="return File1_onchange()">
</a>
</table >
</form>
<script language="javascript">
//动态文件记数器
var num=0;
//div内容
var divstr="";
//添加的文件名数组
var filename=new Array();
function File1_onchange() {
//判断添加文件是否重复
var pathfile = document.PostForm.File1.value;
alert("infilepathandname = "+pathfile);
var name = pathfile.substring(pathfile.lastIndexOf('\\')+1);
alert("infilename = "+name);
if(checkAgainFile(name)){
alert("该文件已经添加!");
return false;
}
//先+file控件
addFile();
//把File1取得的值赋给新添加的file控件上
document.getElementsByName('uploadFiles'+num).value=document.PostForm.File1.value ;
//alert(document.getElementsByName('uploadFiles'+num).value);
//表层的表示
adddiv();
//for(var i=0;i<num;i++){
//var t=i+1;
//alert(document.getElementsByName('uploadFiles'+t).value);
//}
/*
for(var i=0;i<num;i++){
var t=i+1;
alert(document.getElementsByName('uploadFiles'+t).value);
}
*/
for(var i=0;i<filename.length;i++){
alert("filenames="+filename[i]);
}
//document.PostForm.File1.select();
//document.execCommand('delete');
}
//添加层内容
function adddiv(){
var obj=document.getElementById("showFile");
var fileStr =document.getElementsByName('uploadFiles'+num).value;
var fileName = fileStr.substring(fileStr.lastIndexOf('\\')+1);
//增加数组内容
filename[filename.length]=fileName;
var addStr="<a href='javascript:DelFile("+num+")'><img src='image/attach.gif' alt='删除' /></a>"+";";
divstr=divstr+fileName+addStr ;
obj.innerHTML=divstr;
}
//减少层内容
function deldiv(delno){
//var str = "This is a string";
//alert(str.substring(1, 3)); //结果为hi
//alert(str.substring(3, 1)); //结果为hi
//alert(str.substring(0, 4)); //结果为This
//alert(str.substring(8)); //结果为a string
var newDivStr ="";
var a=new Array();
divstr=divstr.substring(0,divstr.lastIndexOf(';')); a=divstr.split(";");
var del=(new Number(delno));
for(var i=0;i<a.length;i++){
if(i!=del)
newDivStr=newDivStr+a[i]+";";
}
divstr=newDivStr;
}
//增加file控件
function addFile(){
alert("add file ");
var tableobj=document.getElementById('table1');
var Row1=tableobj.insertRow(tableobj.rows.length);
//rows就是行数的集合,tableobj.rows.length是获得表格的行数
var Rows=tableobj.rows;
//cells是表元,就是<td></td>
var Cells=Row1.cells;
var Cell1=Rows(Row1.rowIndex).insertCell();
Cell1.align="left";
Cell1.innerHTML="<input type='file' name='uploadFiles["+num+"]' id='uploadFile"+num+"'>";
num++;
}//减去file控件
function DelFile(delnum ){
alert("delfile");
var tableobj=document.getElementById('table1');
var delnum=(new Number(delnum))-1;
var obj=document.getElementById("showFile");
// 删除行
tableobj.deleteRow(delnum);
var j=(new Number(delnum))+1;
for(;j < num;j++) {
// 获得浏览按钮的id的值
var fileobj=document.all("uploadFile"+j);
var str = "uploadFiles["+(j-1)+"].file";
var strid="uploadFile"+(j-1);
// 删除后把下一个浏览按钮的id和名字的下标减1
fileobj.setAttribute("name",str);
fileobj.setAttribute("id",strid);
}
num--;
//删除数组文件名
filename.splice( delnum, 1 );
for(var i=0;i<filename.length;i++){
alert("filenames="+filename[i]);
}
deldiv(delnum);
obj.innerHTML=divstr;
}function checkAgainFile(infilename ){
var flag =false;
for(var i=0;i<filename.length;i++){
if(filename[i]==infilename)flag = true;
}
return flag;
}
</script>
贴一个我写的,^_^
a.addfile {
background-image:url(http://p.mail.163.com/js31style/lib/0703131650/163blue/f1.gif);
background-repeat:no-repeat;
background-position:-823px -17px;
display:block;
float:left;
height:20px;
margin-top:-1px;
position:relative;
text-decoration:none;
top:0pt;
width:80px;
}input.addfile {
/*left:-18px;*/
}input.addfile {
cursor:pointer !important;
height:18px;
left:-13px;
filter:alpha(opacity=0);
position:absolute;
top:5px;
width:1px;
z-index: -1;
}
</style><div id = "showFile"></div>
<form name="PostForm" method="post" action="sendMailNsr.jsp">
<table border="0" cellpadding="0" cellspacing="0" id="table1" ><a href=#? class="addfile">
<INPUT id="File1" type="file" class="addfile" name="File1" size="1" language="javascript" onchange="return File1_onchange()">
</a>
</table >
</form>
<script language="javascript">
//动态文件记数器
var num=0;
//div内容
var divstr="";
//添加的文件名数组
var filename=new Array();
function File1_onchange() {
//判断添加文件是否重复
var pathfile = document.PostForm.File1.value;
alert("infilepathandname = "+pathfile);
var name = pathfile.substring(pathfile.lastIndexOf('\\')+1);
alert("infilename = "+name);
if(checkAgainFile(name)){
alert("该文件已经添加!");
return false;
}
//先+file控件
addFile();
//把File1取得的值赋给新添加的file控件上
document.getElementsByName('uploadFiles'+num).value=document.PostForm.File1.value ;
//alert(document.getElementsByName('uploadFiles'+num).value);
//表层的表示
adddiv();
//for(var i=0;i<num;i++){
//var t=i+1;
//alert(document.getElementsByName('uploadFiles'+t).value);
//}
/*
for(var i=0;i<num;i++){
var t=i+1;
alert(document.getElementsByName('uploadFiles'+t).value);
}
*/
for(var i=0;i<filename.length;i++){
alert("filenames="+filename[i]);
}
//document.PostForm.File1.select();
//document.execCommand('delete');
}
//添加层内容
function adddiv(){
var obj=document.getElementById("showFile");
var fileStr =document.getElementsByName('uploadFiles'+num).value;
var fileName = fileStr.substring(fileStr.lastIndexOf('\\')+1);
//增加数组内容
filename[filename.length]=fileName;
var addStr="<a href='javascript:DelFile("+num+")'><img src='image/attach.gif' alt='删除' /></a>"+";";
divstr=divstr+fileName+addStr ;
obj.innerHTML=divstr;
}
//减少层内容
function deldiv(delno){
//var str = "This is a string";
//alert(str.substring(1, 3)); //结果为hi
//alert(str.substring(3, 1)); //结果为hi
//alert(str.substring(0, 4)); //结果为This
//alert(str.substring(8)); //结果为a string
var newDivStr ="";
var a=new Array();
divstr=divstr.substring(0,divstr.lastIndexOf(';')); a=divstr.split(";");
var del=(new Number(delno));
for(var i=0;i<a.length;i++){
if(i!=del)
newDivStr=newDivStr+a[i]+";";
}
divstr=newDivStr;
}
//增加file控件
function addFile(){
alert("add file ");
var tableobj=document.getElementById('table1');
var Row1=tableobj.insertRow(tableobj.rows.length);
//rows就是行数的集合,tableobj.rows.length是获得表格的行数
var Rows=tableobj.rows;
//cells是表元,就是<td></td>
var Cells=Row1.cells;
var Cell1=Rows(Row1.rowIndex).insertCell();
Cell1.align="left";
Cell1.innerHTML="<input type='file' name='uploadFiles["+num+"]' id='uploadFile"+num+"'>";
num++;
}//减去file控件
function DelFile(delnum ){
alert("delfile");
var tableobj=document.getElementById('table1');
var delnum=(new Number(delnum))-1;
var obj=document.getElementById("showFile");
// 删除行
tableobj.deleteRow(delnum);
var j=(new Number(delnum))+1;
for(;j < num;j++) {
// 获得浏览按钮的id的值
var fileobj=document.all("uploadFile"+j);
var str = "uploadFiles["+(j-1)+"].file";
var strid="uploadFile"+(j-1);
// 删除后把下一个浏览按钮的id和名字的下标减1
fileobj.setAttribute("name",str);
fileobj.setAttribute("id",strid);
}
num--;
//删除数组文件名
filename.splice( delnum, 1 );
for(var i=0;i<filename.length;i++){
alert("filenames="+filename[i]);
}
deldiv(delnum);
obj.innerHTML=divstr;
}function checkAgainFile(infilename ){
var flag =false;
for(var i=0;i<filename.length;i++){
if(filename[i]==infilename)flag = true;
}
return flag;
}
</script>
贴一个我写的,^_^
var vmFile
//动态文件记数器
var num=0;
var maxNum = 3;
var filename=new Array();
function file_onchange() {
function file_onchange() {
if(checkFileNum()){
alert("最大上传文件数为"+maxNum);
return ;
}
//先+file控件
addFile();
}
//获取层内容
function setdiv(){
var obj=document.getElementById("showFile");
var returnStr="";
for(var i=0;i<filename.length;i++){
alert("filenames==="+filename[i]);
var addStr=filename[i]+"<a href='javascript:DelFile("+i+")'><img src='image/attach.gif' alt='删除' /></a>"+";";
returnStr=returnStr+addStr ;
}
obj.innerHTML=returnStr;
}
//增加file控件
function addFile(){
vmFile = document.getElementById("mFileLink");
var eF
objStr = "input"
eF=document.createElement(objStr)
eF.className ="addfile"
eF.type="file"
eF.name="uploadFiles"+num
eF.size =1
eF.onchange = file_onchange;
vmFile.appendChild(eF) ;
num++;
var mName = new Array();
alert("vmFile.childNodes.length="+vmFile.childNodes.length);
var tempVar = vmFile.childNodes[vmFile.childNodes.length-2].value;
alert("tempVar="+tempVar);
if ( tempVar != "" ) {
mName=tempVar.split("\\");
}
var currFile =mName[mName.length-1];
alert("currFile="+currFile);
//检查是否同名
if(checkAgainFile(currFile)){
vmFile.removeChild(eF);
num--;
alert("vmFile.childNodes.length="+vmFile.childNodes.length);
alert("已经选择了该文件!");
return;
}else{
alert("num="+num);
filename[num-1] = currFile;
}
setdiv();
}//减去file控件
function DelFile(delnum ){
vmFile = document.getElementById("mFileLink");
alert("bfore vmFile.childNodes.length="+vmFile.childNodes.length);
vmFile.removeChild(vmFile.childNodes(delnum));
alert("after vmFile.childNodes.length="+vmFile.childNodes.length);
num--;
//删除数组文件名
filename.splice( delnum, 1 );
setdiv();
}function checkAgainFile(infilename ){
var flag =false;
for(var i=0;i<filename.length;i++){
if(filename[i]==infilename)flag = true;
}
return flag;
}function checkFileNum(){
var flag =false;
if(filename.length>=maxNum ){
flag = true;
}
return flag;
}
</script>
改了下,这次是改对了
<html><head>
<script language="javascript" >
var isOnly = "true"; //操作单个还是多个(多个则为数组)
var n=0; //初始化数组为0,之后随着化来变化,因为第一次不为数组,当第二次加一个File 时才变成数组,所以从1开始
var fileCount=1; //总共输入了多少个有值的控件File (暂时还没有用上)
var tempRow=0; //动态表格的临时行
var maxRows=0; //动态表格的临时列
var num = 1; //file 控件数组下标,从1开始,默认显示一个所以那个是 0
var fileCount=1; //整个操作中,总共用了多少个 File 控件
function operFileDiag()
{
var obj = new ActiveXObject("HMExtras.FileDlg");
obj.DisplayFileDlg();
} function addFile()
{
var str = '<input type="file" size="50" name="uploadFile['; //待插入的文件控件
//var fstr = '<input type="file" value="" onchange="txt.value=this.value" style="position:absolute;filter:alpha(opacity=0);" size="1" hidefocus name="uploadFile['; //var buttonValue =' <input type="button" name="btnAddFile" value="添加 ……" size="30" id="button' + num + '" onmousemove="f' + num + '.style.pixelLeft=event.x-60;f' + num + '.style.pixelTop=this.offsetTop;" onclick="f' + num + '.click();addFile()"> '
var fileText; //得到文件控件的值
var ary; //分割文件,以'\'号
var fileTextValue; //取出最后的文件名
//alert("n = " + n + " num = " + num + " fileName = " + "uploadFile[" + n + "].file");
//alert(KmZszbfjForm.innerHTML);
fileText = document.all("uploadFile[" + n + "].file").value;
ary = fileText.split("\\");
fileTextValue = ary[ary.length-1];
if(fileText == "")
{
alert("请选择你所要上传的文件!");
return false;
}
document.all("uploadFile[" + n + "].file").style.display = "none";
//在前面一个 File 控件隐藏后,接着再在原来的位置上插入一个,则 File 变成数组了
str = str + num + '].file" ' + '/>';
//fstr = fstr + num + '].file" ' + 'id="f' + num + '"/>';
//alert("str = = " + str);
document.getElementById('MyFile').insertAdjacentHTML("beforeEnd",str);
//document.getElementById('btnFile').insertAdjacentHTML("beforeEnd",buttonValue);
//document.getElementById("btnFile").removeChild(document.getElementById("button" + (num - 1)));
tempRow=fileTable.rows.length-1; //fileTable 就是那个动态的 table 的 ID 了
maxRows=tempRow;
tempRow=tempRow+1;
var Rows=fileTable.rows; //Rows 数组
var newRow=fileTable.insertRow(fileTable.rows.length); //插入新的一行
var Cells=newRow.cells; //Cells 数组
for (i=0;i<3;i++) //每行的2列数据,一列用来显示文件名,一列显示"删除"操作
{
var newCell=Rows(newRow.rowIndex).insertCell(Cells.length);
newCell.align="center";
switch (i)
{
case 0 : newCell.innerHTML="<td width='40%' align='left'><span id='"+n+"'></span></td>";break;
case 1 : newCell.innerHTML="<td width='20%' align='left'><a href='javascript:delTableFileRow(\"" +tempRow+ "\",\"" + n + "\")'>删除</a></TD>"; break;
case 2 : newCell.innerHTML="<td width='40%' align='left'> </TD>"; break;
}
}
maxRows+=1;
//alert("fileTextValue = " + fileTextValue);
document.getElementById(n).insertAdjacentText("beforeBegin",fileTextValue);
n++;
num++;
fileCount++;
alert(MyFile.innerHTML);
} function delTableFileRow(rowNum,fileCount){
//if(fileTable.rows.length == 1)
// fileTable.deleteRow(0);
if (fileTable.rows.length >rowNum){
fileTable.deleteRow(rowNum);
}else
fileTable.deleteRow(fileTable.rows.length-1);
document.all("MyFile").removeChild(document.all("uploadFile[" + fileCount + "].file")); //从元素P上删除子结点File控件。(跟删除表格行同步)
fileCount--;
//if(n>0)n--; //else isOnly = "true";
}
</script></head><body><form id="kkk" action="/KmZszbfj.do" enctype="multipart/form-data" method="POST">
<table width="830" height="385" border="0" align="center"
cellpadding="0" cellspacing="0" id='tableA'>
<tr>
<td height="27" align="center" bgcolor="#E2F0FE" class="time">附件</td>
<td height="79" align="center" colSpan="3" bgcolor="#E2F0FE" class="time"> <div align="left">
<P id="MyFile">
<input type="file" size="50" name="uploadFile[0].file" value=""/>
</P>
<P id="btnFile">
<input type="button" name="btnAddFile" value="Add File" onclick="addFile()"/>
</P>
<table width="100%" height="100%" border="0">
<tr><td width="40%" align="left"></td><td width="60%"></td></tr>
<tr>
<td colspan="2">
<table width="100%" border="0" id="fileTable" align="left"></table>
</td>
</table>
</div>
</td> </tr>
</table>
</body></html>
innerHTML 属性查看时却根本就只有一个file 控件,只是表面上实现了一个东西而已,希望大家继续努力呀,想得我头都快大了
<style>
a.addfile {
background-image:url(http://p.mail.163.com/js31style/lib/0703131650/163blue/f1.gif);
background-repeat:no-repeat;
background-position:-823px -17px;
display:block;
float:left;
height:20px;
margin-top:-1px;
position:relative;
text-decoration:none;
top:0pt;
width:80px;
}
input.addfile {
/*left:-18px;*/
}
input.addfile {
cursor:pointer !important;
height:18px;
left:-13px;
filter:alpha(opacity=0);
position:absolute;
top:5px;
width:1px;
z-index: -1;
}
</style>
<script language="javascript" >
var n=0; //初始化数组为0,之后随着化来变化
var fileCount=1; //总共输入了多少个有值的控件 File ,初始化为1
var tempRow=0; //动态表格的临时行
var maxRows=0; //动态表格的临时列
var num = 1; //file 控件数组下标,从1开始,默认显示一个所以那个是 0
var fileCount=1; //整个操作中,总共用了多少个 File 控件
function addFile()
{
var str = '<a href=#? class="addfile" id="a' + num +'"><input type="file" size="50" class="addfile" onchange="addFile()" name="uploadFile[' + num + '].file" ' + '/>'; //待插入的文件控件
var fileText; //得到文件控件的值
var ary; //分割文件,以'\'号
var fileTextValue; //取出最后的文件名
fileText = document.all("uploadFile[" + n + "].file").value;
ary = fileText.split("\\");
fileTextValue = ary[ary.length-1];
document.all("a" + n).style.display = "none"; //将前一个 P 的子元素设为不可见
//在前面一个 File 控件隐藏后,接着再在原来的位置上插入一个
document.getElementById('MyFile').insertAdjacentHTML("beforeEnd",str); //这里可以灵活处理
tempRow=fileTable.rows.length-1; //fileTable 就是那个动态的 table 的 ID 了
maxRows=tempRow;
tempRow=tempRow+1;
var Rows=fileTable.rows; //Rows 数组
var newRow=fileTable.insertRow(fileTable.rows.length); //插入新的一行
var Cells=newRow.cells; //Cells 数组
for (i=0;i<3;i++) //每行的2列数据,一列用来显示文件名,一列显示"删除"操作
{
var newCell=Rows(newRow.rowIndex).insertCell(Cells.length);
newCell.align="center";
switch (i)
{
case 0 : newCell.innerHTML="<td width='40%' align='left'><span id='"+n+"'></span></td>";break;
case 1 : newCell.innerHTML="<td width='20%' align='left'><a href='javascript:delTableFileRow(\"" +tempRow+ "\",\"" + n + "\")'>删除</a></TD>"; break;
case 2 : newCell.innerHTML="<td width='40%' align='left'> </TD>"; break;
}
}
maxRows+=1;
document.getElementById(n).insertAdjacentText("beforeBegin",fileTextValue);
n++;
num++;
fileCount++;
} function delTableFileRow(rowNum,fileCount){
if (fileTable.rows.length >rowNum){
fileTable.deleteRow(rowNum); //删除当关行
}else
fileTable.deleteRow(fileTable.rows.length-1);
document.all("MyFile").removeChild(document.all("a" + fileCount)); //从元素P上删除子结点 a 。(跟删除表格行同步)
fileCount--; //总数 -1
}
</script>
</head>
<body>
<form id="kkk" action="/KmZszbfj.do" enctype="multipart/form-data" method="POST">
<table width="830" height="385" border="0" align="center"
cellpadding="0" cellspacing="0" id='tableA'>
<tr>
<td height="27" align="center" bgcolor="#E2F0FE" class="time">附件</td>
<td height="79" align="center" colSpan="3" bgcolor="#E2F0FE" class="time"> <div align="left">
<P id="MyFile">
<a href=#? class="addfile" id="a0">
<input type="file" class="addfile" onchange="addFile()" size="1" name="uploadFile[0].file" value=""/>
</a>
</P>
<P id="btnFile">
<input type="button" name="btnAddFile" value="text html" onclick="javascript:alert(MyFile.innerHTML);"/>
</P>
<table width="100%" height="100%" border="0">
<tr><td width="40%" align="left"></td><td width="60%"></td></tr>
<tr>
<td colspan="2">
<table width="100%" border="0" id="fileTable" align="left"></table>
</td>
</table>
</div>
</td> </tr>
</table>
</body></html>