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表单，然后提交到后台，实现文件的上传。同样，删除也是。

具体代码下载