Javascript上传文件类-CSDN博客

在做网站开发的时候经常会用到文件上传.所以为了方便我特意整理出了一个

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.οnclick=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.οnclick=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.οnclick=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:

对就这么简单.

后台:

这些静态类是不必要的只是我的项目其他页面需要知道,所有留出了.

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);
        }