asp.net 上传控件 模仿邮箱 模式

这个插件也不算是原创吧，毕竟基础代码是从网上下载来的，首先谢谢开始做这个控件的人。在这个基础上，我添加了一些功能，完善了下。

说明：

这个上传控件的前台是基于html 和javascript生成和处理的

后台是 c# .

效果图

 

 通过点击 添加附件，就可以选择相应的文件并添加。现在的功能是指允许图片上传

代码分析：

//var path="UserControls/"//删除按钮路径var inputCount = 1; //控件个数，实际上传数少一个， var Allupfiled = 0; //总共上传var Endupfiled = 0; //已上传var allowExtension = ""var ua = navigator.userAgent.toLowerCase(); //浏览器信息var info = {    ie: /msie/.test(ua) && !/opera/.test(ua),        //匹配IE浏览器        op: /opera/.test(ua),     //匹配Opera浏览器        sa: /version.*safari/.test(ua),     //匹配Safari浏览器        ch: /chrome/.test(ua),     //匹配Chrome浏览器        ff: /gecko/.test(ua) && !/webkit/.test(ua)     //匹配Firefox浏览器};window.onload = SetClick; //加载完成，添加一个控件function SetClick() {    //if(inputCount>=10)    //{    //alert("附件个数不能超过10个!");    //return;    //}    var container = document.getElementById("fileUpArea");    var input1 = document.createElement("input");    input1.type = "file";    //input1.name="file"+inputCount;    input1.name = "filesupload";    input1.id = "file" + inputCount;    input1.className = "fileinput";    input1.onchange = function (event) {        if (this.value) {            var k = this.value.lastIndexOf("\\");            var str = this.value.substring(k + 1);            //判断上传文件类型            if (!CheckFileExtension(str)) return false;            var divs = document.getElementById("filetxt").getElementsByTagName("div");            var check = false;            for (var i = 0; i < divs.length; i++) {                if (divs[i].innerHTML.indexOf(str) != -1) {                    check = true;                    break;                }            }            if (!check) {                Allupfiled++;                SetIframeInput(this, inputCount, str);            }            else {                alert("不允许添加同名附件！请重命名！");                return;            }        }    }    container.appendChild(input1);    inputCount++;    //input1.click();}//这里可以动态去设定文件类型function CheckFileExtension(str) {    var extension = str.lastIndexOf(".");    if (str.indexOf(".gif", extension) == -1 && str.indexOf(".jpg", extension) == -1 && str.indexOf(".png", extension) == -1) {        alert("请选择gif或jpg或png的图象文件");        return false;    }}function CheckFileNames(str) {    var divs = document.getElementById("filetxt").getElementsByTagName("div");    var check = false;    for (var i = 0; i < divs.length; i++) {        if (/"+str"+/i.test(divs[i].innerHTML)) {            check = true;            break;        }    }}var WriteCookie = function (name, value, duration, path, domain, secure) {    if (name == null || name == '') {        throw ("name");    }        var cookie = name + "=" + escape(value)    + (duration ?        "; expires=" + (new Date(new Date().getTime() + (duration * 3600000))).toUTCString() :        "")    + "; path=" + (path && path != '' ?        path :        "/")    + (domain && domain != '' ?        "; domain=" + domain :        "")    + (secure ?        "; secure" :        "");        document.cookie = cookie;};var ReadCookie = function (name) {    if (!name || name == '') {        throw ("name");    }    if (document.cookie.length > 0) {        ix = document.cookie.indexOf(name + "=");        if (ix > -1) {            start = ix + name.length + 1;            end = document.cookie.indexOf(";", start);            if (end == -1) {                end = document.cookie.length;            }            return unescape(document.cookie.substring(start, end));        }    }    return null;}function SetIframeInput(input, num, str)//选取值后的file控件，第几个，选取的文件名称{    var body = document.body; //页面body    var name = input.id; //fileName    var contxt = document.createElement("div"); //显示附件名称用的div    var filetxtDiv = document.getElementById("filetxt"); //显示用的div(contxt)的上级div;    var iframename = "iframe" + name; //框架iframe的名称    var iframe; //框架    var form = document.createElement('form'); //创建表单    var statediv = document.createElement("span"); //状态div    var stopdiv = document.createElement("span"); //停止按钮    var jxupdiv; //上传按钮    var imgs = document.createElement('img'); //删除按钮    var upedfilename; //上传后文件名称    //var filedNames=document.getElementById("filedName");//显示上传后所有附件名称，后台取值用    var filedNames = getfiledName();    if (Endupfiled == 0) {        filedNames.value = "";    }    contxt.id = input.id + "text"; //显示用的div(contxt)的ID    contxt.innerHTML = str + "  "; //contxt的innerHTML（显示内容）    contxt.className = "";    filetxtDiv.appendChild(contxt); //添加一个显示附件内容的div    imgs.src = path + "images/f2.gif";    imgs.onclick = Dispose; //删除事件    contxt.appendChild(imgs); //添加删除按钮    statediv.id = "state" + num;    statediv.className = "spanstate";    statediv.innerHTML = "准备上传";    contxt.appendChild(statediv); //添加状态div    //创建iframe    iframe = document.createElement(info.ie ? "<iframe name=\"" + iframename + "\">" : "iframe");    if (info.ie) {        document.createElement("<iframe name=\"" + iframename + "\">");    }    else {        document.createElement("iframe");    }    iframe.name = iframename;    iframe.style.display = "none";    //插入body    body.insertBefore(iframe, body.childNodes[0]);    //设置form    form.name = "form" + name; //表单名称    form.target = iframename;    form.method = "post";    form.encoding = "multipart/form-data";    form.action = path + "Fileup.ashx?type=add";    //form.action="UserControls/CallBack.aspx";    body.insertBefore(form, body.childNodes[0]);    //添加控件进form    form.appendChild(input);    SetClick(); //重新添加一个upfile控件    statediv.innerHTML = "正在上传";    //添加停止按钮    stopdiv.id = "stopdiv" + num;    stopdiv.innerHTML = "停止";    stopdiv.style.cursor = "hand";    contxt.appendChild(stopdiv);    stopdiv.onclick = function ()//停止事件    {        iframe.src = path + "StopUpLoad.ashx"; //无任何处理代码        window.frames[iframename].location.reload(); //重新刷新iframe终止上传，在 iframe onload事件中处理        //iframe.location.reload();    }    //定义iframe 的onload事件    if (info.ie)//IE 需要注册onload事件    {        iframe.attachEvent("onload", CallBack);    }    else {        iframe.onload = CallBack;    }    //提交 --------------------------------------------------    form.submit();    //提交完毕-----------------------------------------------    function CallBack()//iframe加载完成，返回结果处理    {        try {            var value = iframe.contentWindow.document.body.innerHTML;            upedfilename = value.substring(value.indexOf("@returnstart@") + 13, value.indexOf("@returnend@"));            if (upedfilename.length > 3)//正常上传，返回上传后文件名            {                //alert(upedfilename);                 finished();            }            else//停止上传，从StopUpLoad.ashx页面返回空值，也可能是返回错误001，000            {                if (upedfilename == "002") {                    alert("上传文件类型不正确");                }                var parent = document.getElementById("filetxt");                parent.removeChild(statediv.parentNode);                /*statediv.innerHTML="等待上传";                statediv.style.color="#008080";                continueUpLoad();//上传按钮*/            }        }        catch (msg) {            statediv.innerHTML = "上传失败";            statediv.style.color = "#808080";            continueUpLoad(); //上传按钮        }    }    function continueUpLoad()//上传按钮    {        stopdiv.style.visibility = "hidden";        jxupdiv = document.createElement("span"); //上传按钮        jxupdiv.id = "jxupdiv" + num;        jxupdiv.innerHTML = "上传";        jxupdiv.style.cursor = "hand";        contxt.appendChild(jxupdiv); //添加上传按钮        jxupdiv.onclick = function ()//重新上传        {            contxt.removeChild(jxupdiv);            statediv.innerHTML = "正在上传";            statediv.style.color = "#0099FF";            stopdiv.style.visibility = "visible";            form.submit(); //重新提交                 }    }    function Dispose()//删除事件    {        //alert("ddd");        form.action = path + "Fileup.ashx?type=del";        form.submit();        filetxtDiv.removeChild(contxt);        body.removeChild(form);        body.removeChild(iframe);        Allupfiled--; //总上传数减一        if (upedfilename) {            if (upedfilename.length > 3) {                Endupfiled--;                if (upedfilename == filedNames.value) {                    filedNames.value = "";                }                else if (filedNames.value.indexOf(upedfilename) == 0) {                    filedNames.value = filedNames.value.replace(upedfilename + ",", "");                } else {                    filedNames.value = filedNames.value.replace("," + upedfilename, "");                }            }        }    }    function finished()//上传完毕    {        statediv.style.color = "#ff0000";        statediv.innerHTML = "上传成功";        contxt.removeChild(stopdiv);        if (filedNames.value == "") {            filedNames.value = upedfilename;        }        else {            filedNames.value += "," + upedfilename;        }        Endupfiled++; //已上传数加一    }}function checkFileState() {    if (Endupfiled != Allupfiled) {        alert("还有文件未上传成功！");        return false;    }    return true;}

后台：

<%@ WebHandler Language="C#" Class="Fileup" Debug="true"%>using System;using System.Web;using System.IO;public class Fileup : IHttpHandler {        public void ProcessRequest (HttpContext context) {        string type = context.Request.QueryString["type"];        switch(type)        {            case "add":                AddFile(context);                break;            case "del":                DelFile(context);                break;            default:                break;        }            }    protected void DelFile(HttpContext context)    {        string filename = context.Request.Cookies.Get("filecookie").Value;        string strFilePath = context.Server.MapPath("upfile/" + filename);        if (File.Exists(strFilePath))        {            File.Delete(strFilePath);        }        context.Request.Cookies.Remove("filecookie");            }    protected bool CheckFile(string fileExtension)    {        string[] allowExtension = { ".jpg", ".gif",".png" };        bool fileOk = false;        for (int i = 0; i < allowExtension.Length; i++)          {              if (fileExtension == allowExtension[i])              {                  fileOk = true;                  break;              }          }        return fileOk;    }    protected void AddFile(HttpContext context)    {        string str1 = "";        string str2 = "";        string rvalue = "";        try        {            HttpFileCollection fileList = context.Request.Files;            //HttpFileCollection fileList = HttpContext.Current.Request.Files;            for (int i = 0; i < fileList.Count; i++)            {                HttpPostedFile hPostedFile = fileList[i];                string filename = "";                string filepath = "";                if (hPostedFile.ContentLength > 0 && hPostedFile.FileName.Length > 0)                {                    //float zldx = hPostedFile.ContentLength / 1024;                    filename = hPostedFile.FileName;                                        int k = filename.LastIndexOf(".");                    int j = filename.LastIndexOf("\\");                    string type = filename.Substring(k);                    //filename = filename.Substring(j + 1, k - j - 1);                    filename = filename.Substring(j + 1);                    DateTime datetime1 = System.DateTime.Now;                    type = type.ToLower();                    if (!CheckFile(type))                    {                        rvalue = "002";                        break;                    }                    filepath = datetime1.ToString("yyyyMMddHHmmss") + "." + type;                    HttpCookie filecookie = new HttpCookie("filecookie");                    filecookie.Value = filepath;                    context.Response.Cookies.Add(filecookie);                    hPostedFile.SaveAs(System.Web.HttpContext.Current.Server.MapPath("upfile\\" + filepath));                    if (str1 == "")                        str1 = filepath;                    else                        str1 += "," + filepath;                    if (str2 == "")                    {                        str2 += filename;                    }                    else                        str2 += "," + filename;                }            }            if (str1.Length > 0)            {                //context.Response.Write(str1 + "&" + str2);                rvalue = str1;            }            else            {                if (rvalue.Length == 0)                {                    rvalue = "000";                }            }        }        catch (Exception e)        {            rvalue = "001";        }        context.Response.Expires = -1;        context.Response.Clear();        context.Response.ContentEncoding = System.Text.Encoding.GetEncoding("GB2312");        context.Response.ContentType = "text/plain";        //context.Response.Write("<script type='text/javascript'>parent.finish('" + rvalue + "');</script>");        context.Response.Write("@returnstart@" + rvalue + "@returnend@");        context.Response.End();        }     public bool IsReusable {        get {            return false;        }    }}

原理： 通过生成<input type="file">  控件 和 form表单，然后提交到后台，实现文件的上传。同样，删除也是。

具体代码下载