在做网站开发的时候经常会用到文件上传.所以为了方便我特意整理出了一个
js类,本类完成上传的前台工作.必须配合各位所熟悉的语言再建一个后台的页面作为响应.
我也会给出asp.net的后台做为例子.
// 文件上传类
//作者：oyster
//传递的参数是:element:响应的控件,为了是把上传的控件定位在这个响应的控件下面一点.类似下拉框.
//fmsrc:就是后台的响应页面的地址了.需求请注意下面的,后台页面介绍.
var loadfile=function(element,fmsrc)
{
this.ele=element;
this.ele.up=this;
this.viewstr=”<div style=/”width:300px;height:80px;z-index:99;background-color:white;text-align:center;border-top:1px Black solid;”
this.viewstr+=”border-bottom:1px Black solid;border-left:1px Black solid;border-right:1px Black solid;/”>”;
this.viewstr+=”<div><span>文件标题</span></div>”;
this.viewstr+=”<div><span>文件地址</span></div>”;
this.viewstr+=”<div><div style=/”width:100px;float:left;/”></div><div style=/”width:100px;float:left;/”></div>”;
this.viewstr+=”<div style=/”width:100px;float:left;/”></div></div>”;
this.viewstr+=”</div>”;
this.view=document.createElement(”DIV”);
this.view.style.position=”absolute”;
this.view.innerHTML=this.viewstr;
this.view.style.display=”none”;
this.frame=document.createElement(”IFRAME”);
this.frame.src=fmsrc;
this.frame.style.width=”10px”;
this.frame.style.height=”10px”;
this.frame.style.position=”absolute”;
this.frame.style.top=”-100px”;
this.frame.obj=this;
this.frame.onreadystatechange=function()
{
if(this.readyState==”complete”)
{
var fs=(this.obj.frame.Document||this.obj.frame.contentDocument).body.getElementsByTagName(”INPUT”);
var f1={};
for(var i=0;i<fs.length;i++){
if(fs[i].type==”file”)
f1=fs[i]
}
if(f1.url!=null)
{
this.obj.fileurl=f1.url;
this.obj.filename=this.obj.title.value==”"?”附件”:this.obj.title.value;
alert(”上传成功!”);
this.obj.savedfuc();
}
}
}
this.title=document.createElement(”INPUT”);
this.title.type=”text”;
this.title.style.width=”230px”;
this.view.firstChild.firstChild.appendChild(this.title);
this.path=document.createElement(”INPUT”);
this.path.type=”text”;
this.path.style.width=”230px”;
this.path.readOnly=true;
this.view.firstChild.childNodes[1].appendChild(this.path);
this.btnup=document.createElement(”INPUT”);
this.btnup.type=”button”;
this.btnup.value=”上传”;
this.btnup.obj=this;
this.btnup.onclick=function()
{
if((this.obj.frame.Document||this.obj.frame.contentDocument).forms[0]){
(this.obj.frame.Document||this.obj.frame.contentDocument).forms[0].submit();
}else{
alert(’发生错误：上传初始化不成功!’);
}
}
this.view.firstChild.childNodes[2].childNodes[0].appendChild(this.btnup);
this.btnclose=document.createElement(”INPUT”);
this.btnclose.type=”button”;
this.btnclose.value=”关闭”;
this.btnclose.obj=this;
this.btnclose.onclick=function()
{
this.obj.view.style.display=”none”;
}
this.view.firstChild.childNodes[2].childNodes[1].appendChild(this.btnclose);
this.btnlook=document.createElement(”INPUT”);
this.btnlook.type=”button”;
this.btnlook.value=”浏览…”;
this.btnlook.obj=this;
this.btnlook.onclick=function(){
var fs=(this.obj.frame.Document||this.obj.frame.contentDocument).body.getElementsByTagName(”INPUT”);
var f1={};
for(var i=0;i<fs.length;i++){
if(fs[i].type==”file”)
f1=fs[i]
}
f1.click()
this.obj.path.value=f1.value;
var tit=this.obj.title;
f1.value.replace(///(/w|[/u4E00-/u9FFF])+/./w+$/,function($0){
tit.value=$0.substr(1,$0.length-1);
}
);
}
this.view.firstChild.childNodes[2].childNodes[2].appendChild(this.btnlook);
this.savedfuc=function()
{
//保存后执行的函数，通常为更新上传附件的信息。
}
document.body.appendChild(this.frame);
document.body.appendChild(this.view);
this.show=function()
{
var pt=getPositionXY(this.ele);
this.view.style.top=pt.y+15+”px”;
this.view.style.left=pt.x-80+”px”
this.view.style.display=”block”;
this.view.focus();
}
}
//获取控件绝对位置
function getPositionXY(obj)
{
var pt={”x”:0,”y”:0};
var temp=obj;
while(true){
if(temp!=null){
pt.x+=temp.offsetLeft;
pt.y+=temp.offsetTop;
if(temp!=document.body){
temp=temp.offsetParent;
}else{
break;
}
}else{
break;
}
}
return pt;
}
————————————
后台响应的页面:
html:
<html xmlns=”http://www.w3.org/1999/xhtml” >
<head runat=”server”>
<title>上传文件</title>
</head>
<body>
<form id=”form1″ runat=”server”>
<div>
<input id=”fileupdate” name=”fileupdate” type=”file” runat=”server” />
</div>
</form>
</body>
</html>
对就这么简单.
后台:
这些静态类是不必要的 只是我的项目其他页面需要知道,所有留出了.
public static string uploadfilepath = “uploads”;
public static string errmsg = String.Empty;
public static string lastuppath = String.Empty;
public static string lastupurl = String.Empty;
protected void Page_Load(object sender, EventArgs e)
{
try
{
if (IsPostBack)
{
if (fileupdate.PostedFile != null && fileupdate.PostedFile.ContentLength > 0)
{
uploadfilepath = uploadfilepath.Equals(string.Empty) ? “uploads” : uploadfilepath;
string vpsh = uploadfilepath + “/” + Guid.NewGuid().ToString() + System.IO.Path.GetExtension(fileupdate.PostedFile.FileName);
string psh = MapPath(vpsh);
if (!System.IO.Directory.Exists(System.IO.Path.GetDirectoryName(psh)))
{
System.IO.Directory.CreateDirectory(System.IO.Path.GetDirectoryName(psh));
}
fileupdate.PostedFile.SaveAs(psh);
lastuppath = psh;
lastupurl = fileupdate.Attributes["url"] = ResolveOrgUrl(vpsh);
}
}
}
catch (Exception ee) {
errmsg = ee.Message;
}
}
///返回文件URL
public string ResolveOrgUrl(string vpath)
{
return Request.Url.Scheme + “://” + Request.Url.Host + “:” + Request.Url.Port + ResolveUrl(vpath);
}