我想要jquery动态增加上传控件，点击超链接<a id="addFiles" href="javascript:void(0)"> 增加上传控件，我想要每次增加的上传控件id值不一样怎么实现， 我实现的这个id老是一样的。。怎么改？谢谢 $(function(){
$("#addFiles").click(function(){
var m=1;
for(var i=1;i<5;i++)
{
m++;
var htmlStr="";
htmlStr+="<div id=\"bothDiv"+m+"\" style=\"clear: both;\"> </div>"
htmlStr+="<div style=\"float: left; margin-top: 3px; margin-left: 68px; *margin-left: 34px;\">"
htmlStr+="<input type=\"text\" id=\"txtFileUrl"+m+"\" class=\"input w380 left\" />"
htmlStr+=" <a href=\"javascript:void(0);\" class=\"files\">"
htmlStr+=" <input type=\"file\" id=\"File"+m+"\" name=\"FileUpload\" /></a> <span class=\"uploading\">正在上传，请稍候...</span>"
htmlStr+="</div>"
}
$(this).append(htmlStr)
})
})
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>上传文件</title> <script src="../js/jquery-1.3.2.js" type="text/javascript"></script> <style type="text/css">
#Decription
{
width: 368px;
}
#TextArea1
{
height: 142px;
width: 100%;
}
body
{
margin: 0;
padding: 0;
background-color: #eee;
font: 12px 微软雅黑;
}
#Button1
{
width: 93px;
height: 22px;
border: #EFEFEF 1px solid;
border-left: #99F 1px solid;
border-bottom: #99F 1px solid;
border-right: #99F 1px solid;
border-top: #99F 1px solid;
margin-left: 3;
}
#addfile
{
width: 72px;
height: 22px;
border: #EFEFEF 1px solid;
border-left: #99F 1px solid;
border-bottom: #99F 1px solid;
border-right: #99F 1px solid;
border-top: #99F 1px solid;
}
#meg
{
color: #008000;
font-weight: bold;
}
</style>
</head>
<body>
<form id="form1" method="post" enctype="multipart/form-data" runat="server">
<fieldset>
<legend style="color: #008000; font-weight: bold; font: 14px 微软雅黑">资源描述</legend>
<input id="method" type="hidden" name="method" />
<input id="Hidden1" type="hidden" name="FunName" />
<input id="Hidden2" type="hidden" name="FolderId" value='<%=FolderId %>' />
<textarea id="TextArea1" runat="server"></textarea>
<fieldset>
<legend style="color: #008000; font-weight: bold; font: 14px 微软雅黑">上传附件: </legend>
<div id="_container">
<input type="file" size="50" name="File" id="file" />
</div>
<div>
<input id="addfile" type="button" value="添加附件" onclick="javascript:FN_addFile()"
style="width: 93px; height: 23px" />
</div>
<span id="meg">*如果需要上传多个文件,请点击【添加附件】</span>
</fieldset>
</fieldset>
<input id="Button1" type="button" value="确认上传" onclick="javascript:test()" size="50" />
<%-- <input id="Submit1" type="submit" value="submit" />--%>
</form>
</body>
<%--<script type="text/javascript">
/*禁止右键*/
function stop(){
return false;
}
document.oncontextmenu=stop;
function Fn_addText()
{var div = document.createElement("div");
var f = document.createElement("input");
f.setAttribute("type", "text")
f.setAttribute("id", "Text1")
div.appendChild(f)
var d = document.createElement("input");
d.setAttribute("type", "button")
d.setAttribute("onclick", "FN_deteFile(this)");
d.setAttribute("value", "移除附件")
div.appendChild(d)
document.getElementById("_text").appendChild(div);
}
function FN_deteFile(o) {
while (o.tagName != "DIV")o = o.parentNode;
o.parentNode.removeChild(o);} </script>--%><script type="text/javascript">
/*动态生成file表单元素*/
function FN_addFile() {
var div = document.createElement("div");
var f = document.createElement("input");
f.setAttribute("type", "file"); f.setAttribute("name", "File"); f.setAttribute("size", "50"); div.appendChild(f); var d = document.createElement("input");
d.setAttribute("type", "button"); d.setAttribute("onclick", "FN_deteFile(this)");
d.setAttribute("value", "移除附件"); div.appendChild(d); document.getElementById("_container").appendChild(div);
}
function FN_deteFile(o) {
while (o.tagName != "DIV") o = o.parentNode;
o.parentNode.removeChild(o);
}
function test() {
document.getElementById("method").value = "Upload";
form1.submit();
}
/*禁止鼠标右键*/
function stop() {
return false;
}
document.oncontextmenu = stop;
</script></html>
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Text;
using System.IO;
using Asiastar.NRModel;
using Asiastar.NRBLL;namespace Asiastar.NR.FileOperation
{
public partial class UpLoad : System.Web.UI.Page
{
public string method = "";
public string FolderId = "";
//public string FileTypeImg = "";
protected void Page_Load(object sender, EventArgs e)
{
FolderId = Request["id"].ToString();
/*判断用户是否登录*/
if (Session["username"] == null)
{
Response.Redirect("Default.aspx");
}
/*判断form表单中的按钮是否被点击*/
method = Request.Form["method"];
if (!string.IsNullOrEmpty(method) && method.Equals("Upload"))
{
FN_UpFiles();//调用函数
}
} #region 上传文件到数据库和服务器
public void FN_UpFiles()
{ //遍历File表单元素
HttpFileCollection files = HttpContext.Current.Request.Files;
for (int iFile = 0; iFile < files.Count; iFile++)
{
//检查文件扩展名字
HttpPostedFile postedFile = files[iFile];
string fileName = "";//定义文件名
//string fileExtension = "";
fileName = Path.GetFileName(postedFile.FileName);//得到上传文件的完整名称 即文件名+后缀名
int index = fileName.IndexOf(".");
string FileType = fileName.Substring(index).ToLower();//截取文件后缀名
//FileTypeImg = "../FileTypeimg/" + hz + ".gif";
Guid fileGuid = Guid.NewGuid();//生成新的文件名称 以GUID命名防止文件名相同
string NewFileName = fileGuid.ToString();//新的文件名
NewFileName = NewFileName + FileType;//新的文件名+后缀名 if (fileName != "")//如果文件名不为空
{ //文件虚拟路径
string strpath = System.Web.HttpContext.Current.Server.MapPath("~/Upload/") + NewFileName;
try
{
NRModel.File model = new NRModel.File();
NRBLL.File bf = new NRBLL.File();
Guid guid1 = Guid.NewGuid();
Guid guid2 = new Guid(FolderId);
Guid guid3 = Guid.NewGuid();
Guid guid4 = Guid.NewGuid();
model.Fileid = guid1;
model.Folderid = guid2;
model.Filepath = strpath;
model.FileNam = fileName;
model.FileSize = postedFile.ContentLength;
model.Decription = this.TextArea1.Value.ToString();
model.CreateOn = DateTime.Now;
model.CreateBy = guid3;
model.ModefyBy = guid4;
if (bf.FN_AddNewRes(model) > 0)
{
NR.Error.Log.LogType("上传资源" + fileName + "成功!" + "服务器路径:" + strpath);
//保存文件到指定目录(虚拟目录)
postedFile.SaveAs(System.Web.HttpContext.Current.Server.MapPath("~/Upload/") +NewFileName);
Page.RegisterStartupScript("提示", "<script language='javascript'>alert('上传成功!');self.opener.location.reload();window.close();</script>");
}
}
catch (Exception ex)
{
NR.Error.Log.LogType(ex.ToString());
}
}
}
}
}
#endregion}
- - 木有时间细说 参考一下.
alert（m）;
调试下 看看每次输出什么
var m=1;
$("#addFiles").click(function(){
var htmlStr="";
for(var i=1;i<5;i++)
{
m++;
htmlStr+="<div id=\"bothDiv"+m+"\" style=\"clear: both;\"> </div>"
htmlStr+="<div style=\"float: left; margin-top: 3px; margin-left: 68px; *margin-left: 34px;\">"
htmlStr+="<input type=\"text\" id=\"txtFileUrl"+m+"\" class=\"input w380 left\" />"
htmlStr+=" <a href=\"javascript:void(0);\" class=\"files\">"
htmlStr+=" <input type=\"file\" id=\"File"+m+"\" name=\"FileUpload\" /></a> <span class=\"uploading\">正在上传，请稍候...</span>"
htmlStr+="</div>"
}
$(this).append(htmlStr)
})
})
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.5.1.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
$(function () {
$("#addFiles").click(function () {
var m = 0;
$(".uploading").each(function () {
m++;
});
var htmlStr = "";
htmlStr += "<div id=\"bothDiv" + m + "\" style=\"clear: both;\"> </div>"
htmlStr += "<div style=\"float: left; margin-top: 3px; margin-left: 68px; *margin-left: 34px;\">"
htmlStr += "<input type=\"text\" id=\"txtFileUrl" + m + "\" class=\"input w380 left\" />"
htmlStr += "<a href=\"javascript:void(0);\" class=\"files\">"
htmlStr += "<input type=\"file\" id=\"File" + m + "\" name=\"FileUpload\" /></a> <span class=\"uploading\">正在上传，请稍候...</span>"
htmlStr += "</div>"
$("#allfileupload").append(htmlStr) });
})
</script>
</head>
<body>
<form id="form1" runat="server">
<input type="button" value="添加" id="addFiles"/>
<div id="allfileupload">
</div>
</form>
</body>
</html>解决思路是，在添加一个新的上传控件的时候，遍历一下之前的控件，然后就得到最新的一个值。不知道你为什么用$(this).append(htmlstr)
我稍微改了下，但是你应该能看懂