c# .net 4.0 文件上传兼容ie Chrome 火狐edge

文件上传类
FileUpload.htm

<!DOCTYPE html>

<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" type="text/css" href="../../Styles/easy_upload.css"/>
    <style type="text/css">
        .fu_list {
            width: 100%;
            background: #ebebeb;
            font-size: 12px;
            overflow: auto;
        }

        .fu_list td {
            padding: 5px;
            line-height: 20px;
            background-color: #fff;
        }

        .fu_list table {
            width: 100%;
            border: 1px solid #ebebeb;
        }

        .fu_list thead td {
            background-color: #f4f4f4;
        }

        .fu_list b {
            font-size: 14px;
        }
        
        #form1 {
            overflow: auto;
            height: 300px;
        }
        
        /*file容器样式*/
        a.files {
            width: 90px;
            height: 30px;
            overflow: hidden;
            display: block;
            border: 1px solid #BEBEBE;
            background: url(../images/img/fu_btn.gif) left top no-repeat;
            text-decoration: none;
        }

        a.files:hover {
            background-color: #FFFFEE;
            background-position: 0 -30px;
        }

        /*file设为透明,并覆盖整个触发面*/
        a.files input {
            margin-left: -350px;
            font-size: 30px;
            cursor: pointer;
            filter: alpha(opacity=0);
            opacity: 0;
        }

        /*取消点击时的虚线框*/
        a.files,
        a.files input {
            outline: none;
            /*ff*/
            hide-focus: expression(this.hideFocus=true);
            /*ie*/
        }
    </style>
    <script type="text/javascript" src="../../Scripts/jquery.min.js"></script>
    <script type="text/javascript" src="../../Scripts/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../../Scripts/easyUpload.js"></script>

    <title>附件上传</title>
</head>

<body>
<div id="form1">
    <form id="uploadForm" action="../../ashx/Flow/File.ashx" method="post">
        <table border="0" cellspacing="1" class="fu_list">
            <thead>
            <tr>
                <td colspan="2"><b>上传文件</b>
                </td>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td align="right" width="15%" style="line-height:35px;">添加文件:</td>
                <td>
                    <a href="javascript:void(0);" class="files" id="idFile"></a>
                    <img id="idProcess" style="display:none;" src="../images/img/loading.gif" alt=""/>
                    <input id="BillCode" name="BillCode" type="hidden"/>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <table border="0" cellspacing="0">
                        <thead>
                        <tr>
                            <td>文件路径</td>
                            <td width="100"></td>
                        </tr>
                        </thead>
                        <tbody id="idFileList">
                        </tbody>
                    </table>
                </td>
            </tr>
            <tr>
                <td colspan="2" style="color:gray">温馨提示:最多可同时上传 <b id="idLimit"></b> 个文件,只允许上传 <b id="idExt"></b> 文件。
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center" id="idMsg">
                    <input type="button" value="开始上传" id="idBtnupload" disabled="disabled"/>&nbsp;&nbsp;&nbsp;
                    <input type="button" value="全部取消" id="idBtndel" disabled="disabled"/>
                </td>
            </tr>
            </tbody>
        </table>
    </form>
    <form id="uploadFormNew" action="../../ashx/Flow/File.ashx" method="post">
        <table border="0" cellspacing="1" class="fu_list">
            <thead>
            <tr>
                <td colspan="2"><b>上传文件</b>
                </td>
            </tr>
            </thead>
            <tbody>
            <!--        <input id="BillCode" name="BillCode" type="hidden"/>-->
            <div id="easy1" class="easy-upload">
            </div>
            </tbody>
        </table>
    </form>
</div>
<script type="text/javascript">
    var isIE = !+'\v1' ? true : false;

    var $ = function (id) {
        return "string" == typeof id ? document.getElementById(id) : id;
    };

    var Class = {
        create: function () {
            return function () {
                this.initialize.apply(this, arguments);
            }
        }
    }

    var Extend = function (destination, source) {
        for (var property in source) {
            destination[property] = source[property];
        }
    }

    var Bind = function (object, fun) {
        return function () {
            return fun.apply(object, arguments);
        }
    }

    var Each = function (list, fun) {
        for (var i = 0, len = list.length; i < len; i++) {
            fun(list[i], i);
        }
    };

    //文件上传类
    var FileUpload = Class.create();
    FileUpload.prototype = {
        //表单对象,文件控件存放空间
        initialize: function (form, folder, options) {

            this.Form = $(form); //表单
            this.Folder = $(folder); //文件控件存放空间
            this.Files = []; //文件集合

            this.SetOptions(options);

            this.FileName = this.options.FileName;
            this._FrameName = this.options.FrameName;
            this.Limit = this.options.Limit;
            this.Distinct = !!this.options.Distinct;
            this.ExtIn = this.options.ExtIn;
            this.ExtOut = this.options.ExtOut;

            this.onIniFile = this.options.onIniFile;
            this.onEmpty = this.options.onEmpty;
            this.onNotExtIn = this.options.onNotExtIn;
            this.onExtOut = this.options.onExtOut;
            this.onLimite = this.options.onLimite;
            this.onSame = this.options.onSame;
            this.onFail = this.options.onFail;
            this.onIni = this.options.onIni;

            if (!this._FrameName) {
                //为每个实例创建不同的iframe
                this._FrameName = "uploadFrame_" + Math.floor(Math.random() * 1000);
                //ie不能修改iframe的name
                var oFrame = isIE ? document.createElement("<iframe  name=\"" + this._FrameName + "\">") : document.createElement("iframe");
                //为ff设置name
                oFrame.name = this._FrameName;
                oFrame.style.display = "none";
                //在ie文档未加载完用appendChild会报错
                document.body.insertBefore(oFrame, document.body.childNodes[0]);
            }

            //设置form属性,关键是target要指向iframe
            this.Form.target = this._FrameName;
            this.Form.method = "post";
            //注意ie的form没有enctype属性,要用encoding
            this.Form.encoding = "multipart/form-data";

            //整理一次
            this.Ini();
        },
        //设置默认属性
        SetOptions: function (options) {
            this.options = { //默认值
                FileName: "", //文件上传控件的name,配合后台使用
                FrameName: "", //iframe的name,要自定义iframe的话这里设置name
                onIniFile: function () {
                }, //整理文件时执行(其中参数是file对象)
                onEmpty: function () {
                }, //文件空值时执行
                Limit: 0, //文件数限制,0为不限制
                onLimite: function () {
                }, //超过文件数限制时执行
                Distinct: true, //是否不允许相同文件
                onSame: function () {
                }, //有相同文件时执行
                ExtIn: [], //允许后缀名
                onNotExtIn: function () {
                }, //不是允许后缀名时执行
                ExtOut: [], //禁止后缀名,当设置了ExtIn则ExtOut无效
                onExtOut: function () {
                }, //是禁止后缀名时执行
                onFail: function () {
                }, //文件不通过检测时执行(其中参数是file对象)
                onIni: function () {
                } //重置时执行
            };
            Extend(this.options, options || {});
        },
        //整理空间
        Ini: function () {
            //整理文件集合
            this.Files = [];
            //整理文件空间,把有值的file放入文件集合
            Each(this.Folder.getElementsByTagName("input"), Bind(this, function (o) {
                if (o.type == "file") {
                    o.value && this.Files.push(o);
                    this.onIniFile(o);
                }
            }))
            //插入一个新的file
            var file = document.createElement("input");
            file.name = this.FileName;
            file.type = "file";
            file.onchange = Bind(this, function () {
                this.Check(file);
                this.Ini();
            });
            this.Folder.appendChild(file);
            //执行附加程序
            this.onIni();
        },
        //检测file对象
        Check: function (file) {
            //检测变量
            var bCheck = true;
            //空值、文件数限制、后缀名、相同文件检测
            if (!file.value) {
                bCheck = false;
                this.onEmpty();
            } else if (this.Limit && this.Files.length >= this.Limit) {
                bCheck = false;
                this.onLimite();
            } else if (!!this.ExtIn.length && !RegExp("\.(" + this.ExtIn.join("|") + ")$", "i").test(file.value)) {
                //检测是否允许后缀名
                bCheck = false;
                this.onNotExtIn();
            } else if (!!this.ExtOut.length && RegExp("\.(" + this.ExtOut.join("|") + ")$", "i").test(file.value)) {
                //检测是否禁止后缀名
                bCheck = false;
                this.onExtOut();
            } else if (!!this.Distinct) {
                Each(this.Files, function (o) {
                    if (o.value == file.value) {
                        bCheck = false;
                    }
                })
                if (!bCheck) {
                    this.onSame();
                }
            }
            //没有通过检测
            !bCheck && this.onFail(file);
        },
        //删除指定file
        Delete: function (file) {
            //移除指定file
            this.Folder.removeChild(file);
            this.Ini();
        },
        //删除全部file
        Clear: function () {
            //清空文件空间
            Each(this.Files, Bind(this, function (o) {
                this.Folder.removeChild(o);
            }));
            this.Ini();
        }
    }

    var fu = new FileUpload("uploadForm", "idFile", {
        Limit: 10,
        ExtIn: [],
        onIniFile: function (file) {
            file.value ? file.style.display = "none" : this.Folder.removeChild(file);
        },
        onEmpty: function () {
            alert("请选择一个文件");
        },
        onLimite: function () {
            alert("超过上传限制");
        },
        onSame: function () {
            alert("已经有相同文件");
        },
        onNotExtIn: function () {
            alert("只允许上传" + this.ExtIn.join(",") + "文件");
        },
        onFail: function (file) {
            this.Folder.removeChild(file);
        },
        onIni: function () {
            //显示文件列表
            var arrRows = [];
            if (this.Files.length) {
                var oThis = this;
                Each(this.Files, function (o) {
                    var a = document.createElement("a");
                    a.innerHTML = "取消";
                    a.href = "javascript:void(0);";
                    a.onclick = function () {
                        oThis.Delete(o);
                        return false;
                    };
                    arrRows.push([o.value, a]);
                });
            } else {
                arrRows.push(["<font color='gray'>没有添加文件</font>", "&nbsp;"]);
            }
            AddList(arrRows);
            //设置按钮
            $("idBtnupload").disabled = $("idBtndel").disabled = this.Files.length <= 0;
        }
    });

    $("idBtnupload").onclick = function () {
        //显示文件列表
        var arrRows = [];
        Each(fu.Files, function (o) {
            arrRows.push([o.value, "&nbsp;"]);
        });
        AddList(arrRows);

        fu.Folder.style.display = "none";
        $("idProcess").style.display = "";
        $("idMsg").innerHTML = "正在添加文件到服务器,请稍候……<br />有可能因为网络问题,出现程序长时间无响应,请点击“<a href='?'><font color='red'>取消</font></a>”重新上传文件";

        fu.Form.submit();
    }

    $("idLimit").innerHTML = fu.Limit;

    $("idExt").innerHTML = fu.ExtIn.join(",");

    $("idBtndel").onclick = function () {
        fu.Clear();
    }
    document.getElementById('BillCode').value = parent.BillCode; // getQueryString("BillCode");
    document.getElementById('uploadForm').action = '../../ashx/Flow/File.ashx?BillCode=' + parent.BillCode;

    //js判断是否是ie浏览器且给出ie版本
    function IEVersion() {
        var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串  
        var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否IE<11浏览器  
        var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; //判断是否IE的Edge浏览器  
        var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1; //判断是否IE11浏览器
        if (isIE) {
            var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
            reIE.test(userAgent);
            var fIEVersion = parseFloat(RegExp["$1"]);
            if (fIEVersion == 7) {
                return 7;
            } else if (fIEVersion == 8) {
                return 8;
            } else if (fIEVersion == 9) {
                return 9;
            } else if (fIEVersion == 10) {
                return 10;
            } else {
                return 6;//IE版本<=7
            }
        } else if (isEdge) {
            // return 'edge';//edge
            return -1;//不是ie浏览器
        } else if (isIE11) {
            return 11; //IE11  
        } else {
            return -1;//不是ie浏览器
        }
    }

    function init() {
        var ieV = IEVersion();
        // alert(ieV);
        //非IE 执行预览
        if (-1 === ieV) {
            document.getElementById("uploadForm").style.display = "none";
            // $("#form1").attr ("style","display:none;");// 隐藏 div
            // $("#form1").css ("display","none");// 隐藏 div
            // $("#form1").hide();
        } else {
            document.getElementById("uploadFormNew").style.display = "none";
            if (8 === ieV || 7 === ieV) {
                $("#uploadFormNew").attr("style", "display:none");
            } else if (6 === ieV) {
                document.getElementById("uploadFormNew").style.display = "none";
            } else {
                document.getElementById("uploadFormNew").style.display = "none";
                $("#uploadFormNew").hide();
            }
        }
    }

    //初始化执行 
    window.onload = init;//不要括号

    //alert(document.getElementById('BillCode').value);

    //var isIE = (document.all) ? true : false;


    //新文件上传开始  2022-10-8

    //创建另个一实例如下
    easyUpload({
        easyId: 'easy1',
        action: '/ashx/Flow/File.ashx?BillCode=' + parent.BillCode,
        // action: '/ashx/Flow/File.ashx?method=ajaxFileUpload&BillCode=' + parent.BillCode,
        accept: '.tiff,.tif,.jpg,.png,.bmp,.jpeg,.pdf,.doc,.docx,.xls,.xlsx,.ppt',
        maxSize: 4, 
        maxCount: 10, //插件单次添加文件的最大数量,Number类型
        showLoading: true,
        setRequestHeader: function (xhr) {
            xhr.setRequestHeader('enctype', 'multipart/form-data');
        },
        buildSendData: function (file) {
            var formData = new FormData(); // 发送格式为formData时
            formData.append('idFile', file.file);
            return formData;

            // return file.base64; //发送格式为base64时
            // return null; //发送空数据,用于测试
        },
        checkSuccessCode: function (xhr) {
            if (/error/.test(xhr.responseText.toLowerCase())) { //这里判断仅仅用于测试,具体看项目
                return false;
            } else {
                console.log(xhr);
                return true;
            }
        }
    });
    //新文件上传结束


    //旧文件上传系统兼容IE 开始
    function load() {


    }

    //用来添加文件列表的函数
    function AddList(rows) {
        //根据数组来添加列表
        var FileList = $("idFileList"),
            oFragment = document.createDocumentFragment();
        //用文档碎片保存列表
        Each(rows, function (cells) {
            var row = document.createElement("tr");
            Each(cells, function (o) {
                var cell = document.createElement("td");
                if (typeof o == "string") {
                    cell.innerHTML = o;
                } else {
                    cell.appendChild(o);
                }
                row.appendChild(cell);
            });
            oFragment.appendChild(row);
        })
        //ie的table不支持innerHTML所以这样清空table
        while (FileList.hasChildNodes()) {
            FileList.removeChild(FileList.firstChild);
        }
        FileList.appendChild(oFragment);
    }

    //在后台通过window.parent来访问主页面的函数
    function Finish(msg, filenames) {
        alert(msg);
        ReturnValue(filenames);
    }

    function ReturnValue(filenames) {
        parent.close4();
    }

    function getQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]);
        return null;
    }

    //旧文件上传系统兼容IE 结束
</script>
</body>

</html>

后端处理类
File.ashx

<%@ WebHandler Language="c#" Class="File_WebHandler" Debug="true" %>

using System;
using System.Configuration;
using System.IO;
using System.Web;
using DBUtility;

public class File_WebHandler : IHttpHandler
{    
    private const int UploadFileLimit = 10;//上传文件数量限制
    
    public static string _msg = "上传成功!";//返回信息
    //private string _filenames = ""; //返回上传文件名

    public void ProcessRequest(HttpContext context)
    {
        var method = context.Request.QueryString["method"];
        switch (method)
        {
            case "ajaxFileUpload":
                ajaxFileUpload(context);
                break;
            default:
                defaultFileUpload(context);
                break;
        }
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }

    private static void defaultFileUpload(HttpContext context)
    {
            //context.Response.ContentType = "text/plain";
            //context.Request.ContentType = "text/plain";
            // string ispostback=context.Request.Form["isPostBack"];
            string BillCode = context.Request["BillCode"];
            int iTotal = context.Request.Files.Count;
    
            if (iTotal == 0)
            {
                _msg = "没有数据";
            }
            else
            {
                int iCount = 0;
    
                for (int i = 0; i < iTotal; i++)
                {
                    HttpPostedFile file = context.Request.Files[i];
    
                    if (file.ContentLength > 0 || !string.IsNullOrEmpty(file.FileName))
                    {
                        //创建目录
                        ///生成一个适合的路径存放
                        string d = DateTime.Now.Year.ToString() + "" + DateTime.Now.Month.ToString() + "" + DateTime.Now.Day.ToString();
                        string dirPath = "../../html/Flow/file/" + d;
                        if (!Directory.Exists(HttpContext.Current.Request.MapPath(dirPath)))
                        {
                            Directory.CreateDirectory(HttpContext.Current.Request.MapPath(dirPath));
                        }
    
                        string name = Path.GetFileName(file.FileName);//获取输入的文件名字 
                        int i1 = name.LastIndexOf(".");
                        string newname = name.Substring(0, i1);
                        //string tempname = newname;
                        string extname = name.Substring(i1);//获取文件的扩展名
    
                        // 以时间命名
                        newname = DateTime.Now.ToString("yyyyMMddHHmmss"); 
                        
                        string filename = newname + extname;
                        
                        // 重名判断                    
                        int icount = 1;
                        while (true) 
                        {
                            if (File.Exists(HttpContext.Current.Server.MapPath(dirPath + "/" + filename)))
                            {
                                filename = newname + "(" + Convert.ToString(icount) + ")" + extname;
                                icount++;
                            }
                            else 
                            {
                                break;
                            }
                        }
    
                        //保存文件
                        file.SaveAs(HttpContext.Current.Server.MapPath(dirPath + "/" + filename));
                        
                        // 记录至数据库
                        string strSql = @"insert into t_attachment (BillCode,AttachmentType,AttachmentName,AttachmentPath,CreateDateTime,Status) 
                                            values ('" + BillCode + "','" + extname + "','" + name.Substring(0, i1) + "','" + dirPath + "/" + filename + "','" + DateTime.Now.ToString() + "',1)";
                        DbHelperSQL.ExecuteSql(strSql);
    
                        //这里可以根据实际设置其他限制
                        if (++iCount > UploadFileLimit)
                        {
                            _msg = "超过上传限制:" + UploadFileLimit;
                            break;
                        }
                    }
                }
            }
            context.Response.Write("<script>window.parent.Finish('" + _msg + "','');</script>");
    
    }

    private static void ajaxFileUpload(HttpContext context)
    {
        HttpFileCollection files = context.Request.Files;
        string BillCode = context.Request["BillCode"];
        int length = int.Parse(context.Request.QueryString["length"] ?? "0");
        string msg = string.Empty;
        string error = string.Empty;
        try
        {
            if (context.Request.Files.Count > 0)
            {
                string fileName = VirtualPathUtility.GetDirectory(context.Request.Url.LocalPath);
                context.Response.Write("0");
            }
            else
            {
                context.Response.Write("3");
            }

            context.Response.ContentType = "application/json; charset=utf-8";
        }
        catch (Exception ex)
        {
            // ExceptionLogging c = new ExceptionLogging("Admin  Upload Failed", ex);
            // c.ErrorLog(HttpContext.Current.ApplicationInstance.Server.MapPath("~/Logs/"));

        }
    }
}

效果edge Chrome 火狐等如下


企业微信截图_20221012172809.png

老的IE浏览器也能兼容


图片.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 205,236评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,867评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,715评论 0 340
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,899评论 1 278
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,895评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,733评论 1 283
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,085评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,722评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,025评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,696评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,816评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,447评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,057评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,009评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,254评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,204评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,561评论 2 343