譬如:
以前的QQ上传照片当你点击上传时会出现5个输入框,在这个输入框中你可以选择照片的路径.当还有照片要上传时就点击添加,便会再出现一个输入框你可以再输入5张照片的地址.这个怎么实现啊?有没有代码?
以前的QQ上传照片当你点击上传时会出现5个输入框,在这个输入框中你可以选择照片的路径.当还有照片要上传时就点击添加,便会再出现一个输入框你可以再输入5张照片的地址.这个怎么实现啊?有没有代码?
<HTML>
<HEAD>
<script language="JavaScript" type="text/JavaScript">
function addtext(){
var threadsCount = document.getElementById("addtexta").value; //threadsCount 表示你要插入的个数
if(threadsCount!=''&&parseInt(threadsCount)>0){
var tr=document.createElement("tr");
tr.id=1;
var td;
for(var i=1;i<=10;i++){
td=document.createElement("td");
td.id=tr.id+"/"+i;
td.width="10%";
td.appendChild(document.createTextNode(""));
tr.appendChild(td);
}
document.getElementById("newbody").appendChild(tr);
tr=document.createElement("tr");
tr.id=2;
for(var i=1;i<=parseInt(threadsCount);i++){
td=document.createElement("td");
td.id=tr.id+"/"+i+1;
var btn;
if(i<10){
btn = document.createElement("<INPUT type='file' id='thread0"+i+"' name='thread0"+i+"' value='thread0"+i+"'>");
}
td.appendChild(btn);
td.align="left";
tr.appendChild(td);
if(i%10==0&&i!=1){
document.getElementById("newbody").appendChild(tr);
tr=document.createElement("tr");
tr.id=i/10+2;
}
}
document.getElementById("newbody").appendChild(tr);
}
}
</script>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT=""></HEAD><BODY>
<INPUT type='button' id='addtext' name='addtext' value='addtext' onclick="addtext()">
<INPUT type='text' id='addtexta' name='addtexta' value='1'>
<table align="center" width="80%" id="loglst" width="80%" border="0"
cellspacing="0" cellpadding="0">
<tbody id="newbody"></tbody>
</table></BODY>
</HTML>
应该能满足要求。输入框数字你改几就是几个了
<head runat="server">
<title>无标题页</title>
<script type="text/javascript">
var divfiles;
function addFileInput() {
divfiles=document.getElementById("divfiles");
var filesCount=divfiles.childNodes.length;
if(filesCount==1) {
document.getElementById("remove").style.visibility="visible";
} else if(filesCount==4) {
document.getElementById("add").style.visibility="hidden";
}
var fileInput="<div>第"+(filesCount+1)+"个文件:<input name=\"myfile\" type=\"file\"/></div>";
divfiles.insertAdjacentHTML("beforeEnd",fileInput);
}
function removeLastInput() {
var filesCount=divfiles.childNodes.length;
if(filesCount==2) {
document.getElementById("remove").style.visibility="hidden";
} else if(filesCount==5) {
document.getElementById("add").style.visibility="visible";
}
divfiles.removeChild(divfiles.lastChild);
}
</script>
</head>
<body>
<form id="form1" runat="server" enctype="multipart/form-data">
<div>
<table >
<tr>
<th colspan="2">多文件上传</th>
</tr>
<tr>
<td valign="top">上传文件</td>
<td>
<div id="divfiles">
<div><input id="File1" name="myfile" type="file" /> <a id="add" href="javascript:addFileInput()">添加</a> <a id="remove" style="visibility:hidden" href="javascript:removeLastInput()">移除</a></div>
</div></td>
</tr>
<tr>
<td></td>
<td><input id="Button1" runat="server" onserverclick="Button1_ServerClick" type="button"
value="上传" /></td>
</tr>
</table>
</div>
</form>
</body>
</html>
<html>
<head>
<title></title>
<script type="text/javascript">
var num=1;//行的初始id
var rowNum=5;//一次添加的个数
function $(elem)
{
return typeof elem=="string"?document.getElementById(elem):elem;
}
function addText()
{
var tab=$("tab");
var row=tab.insertRow(-1);
row.id="row"+num;
var cell1=row.insertCell(-1);
cell1.innerHTML="<INPUT type='file' id='file"+num+"'>";
num++;
}
function init_table()
{
for(var i=0;i<5;i++)
{
addText();
}
}
</script>
</head>
<body onload="init_table();">
<table id="tab" border=1 width=200px >
</table>
<input type="button" onclick="addText()" value="add">
</body>
</html>