Javascript上傳檔案類

在做網站開發的時候經常會用到檔案上傳.所以為了方便我特意整理出了一個

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