大家经常做后台时候就会用到上传文件的组件,在asp.net(C#)中自带有FileUpload组件,直接添加就行,很快捷。但是如果需要多文件上传,就如同网易邮箱中添加附件一样有一个继续添加的按纽。这个时候我们就得采用其它的方法,
以25亿企业网站管理系统中的源码作为实例深刻讲解asp.net(C#)多文件上传(无限级上传文件),并且兼容IE6、IE7、IE8、火狐(firefox)、谷歌、TT、360度、遨游等主流浏览器
大家先看25亿企业网站管理系统后台内容管理栏目下产品系列,图片系统等的添加之中就有一个上传图片的功能,由于企业网站管理系统的灵活性,这时我们对上传图片这地方得灵活设置,也就是由用户自行添加上传图片的个数,这时需要用到多文件上传(无限级上传文件),如下图所示:
点击"增加上传文件"按纽下方就会增加一个上传文件的组件。
在页面文件中的代码如下:
<div id="MyFile">
<input name="File" type="file" class="FileUpStyle" id="File1"/> <label id="Linkname"><%if (Request["type"].ToString().Trim() == "5") { Response.Write("文件"); } else { Response.Write("图片"); } %>名称:</label>
<input name="Link" type="text" maxlength="20" class="inputtext" size="20" value="25<%=gt.TranslateChineseToOther("亿企业网站管理系统", "zh-CN", Language)%>"/>
<input name="button1" id="button1" type="button" value="<%=gt.TranslateChineseToOther("增加上传文件", "zh-CN", Language)%>" onclick="addFile()" style="border-right: #6699cc 1px solid; border-top: #6699cc 1px solid; font-size: 9pt; border-left: #6699cc 1px solid; width: 100px; border-bottom: #6699cc 1px solid; display:none;">
<br />
</div>
这是默认情况下上传文件的组件为一个,当我们点击"增加上传文件"按纽时调用如下js代码,就在其下方增加一个上传文件的组件。
function addFile()
{
//添加文件上传Html组件
var str ='<input type="file" name="File" class="FileUpStyle" /> <%=gt.TranslateChineseToOther("图片名称", "zh-CN", Language)%>:<input name="Link" type="text" maxlength="20" class="inputtext" size="20" value="25<%=gt.TranslateChineseToOther("亿企业网站管理系统", "zh-CN", Language)%>"/><br>'
document.getElementById('MyFile').insertAdjacentHTML("beforeEnd",str)
}
25亿企业网站管理系统全部兼容IE6、IE7、IE8、火狐(firefox)、谷歌、TT、360度、遨游等主流浏览器,为了在各浏览器中兼容,有一个地方需要注意,上述js代码中的insertAdjacentHTML方法仅在IE浏览器中才有效,也就是说insertAdjacentHTML方法是IE浏览器自带的一个方法,而在火狐(firefox)浏览器中没有insertAdjacentHTML方法,此时我们就得用js写出insertAdjacentHTML方法。大家可以查看25亿企业网站管理系统javascript文件夹下的commsystem.js中就有对insertAdjacentHTML方法的实现,代码如下:
if(typeof HTMLElement!="undefined" && !HTMLElement.prototype.insertAdjacentElement)
{
HTMLElement.prototype.insertAdjacentElement = function(where,parsedNode)
{
switch (where)
{
case 'beforeBegin':
this.parentNode.insertBefore(parsedNode,this)
break;
case 'afterBegin':
this.insertBefore(parsedNode,this.firstChild);
break;
case 'beforeEnd':
this.appendChild(parsedNode);
break;
case 'afterEnd':
if (this.nextSibling) this.parentNode.insertBefore(parsedNode,this.nextSibling);
else this.parentNode.appendChild(parsedNode);
break;
}
}
HTMLElement.prototype.insertAdjacentHTML = function (where,htmlStr)
{
var r = this.ownerDocument.createRange();
r.setStartBefore(this);
var parsedHTML = r.createContextualFragment(htmlStr);
this.insertAdjacentElement(where,parsedHTML)
}
HTMLElement.prototype.insertAdjacentText = function (where,txtStr)
{
var parsedText = document.createTextNode(txtStr)
this.insertAdjacentElement(where,parsedText)
}
}
此时就可以完美兼容所有浏览器对insertAdjacentHTML方法的调用。至此asp.net(C#)多文件上传(无限级上传文件)讲解完成,如有不懂的请到25亿企业网站管理系统官方站技术社区进行提问。