兼容ie跟谷歌上传文件

使用到了ajaxfileupload.js插件,但是在ie浏览器内遇到了问题,点击按钮触发file的点击事件在谷歌浏览器内是没有问题的,但是到了ie浏览器点击以后事件完全没有执行。最后发现ie的浏览器机制不一样,不能用按钮去触发file点击事件,只能点击file事件才能上传,

但是file的样式并不满足我的需求,解决方法:

我把file按钮悬浮到上传按钮上方,然后设置它的宽度跟高度跟上传按钮一样,再把file按钮滤镜透明,这样不就实现我点击上传按钮触发file事件了,而不是中间多操作了一次:

用的到的样式: position:absolute;filter:alpha(opacity=0);opacity:0;这样就能兼容ie跟谷歌的滤镜透明效果

前端代码:

$(function () {
    $("#file1").change(function () {
        ajaxFileUpload();
    });
})
function ajaxFileUpload() {
    $.ajaxFileUpload({
        url: 'Tool_CompanyWebimg.ashx', //用于文件上传的服务器端请求地址
        secureuri: false, //是否需要安全协议,一般设置为false
        fileElementId: 'file1', //文件上传域的ID
        dataType: 'text', //返回值类型 一般设置为json
        success: function (d)  //服务器成功响应处理函数
        { 
            
        }});
    $("#file1").val("");//清空file的值
    $("#file1").change(function () {//不知为何执行一次以后change事件会被注销掉,再绑定次就行
        ajaxFileUpload();
    });
}


后端代码:

Context.Response.ContentType = "text/html";
//获取上传文件队列
HttpServerUtility server = context.Server;
context.Response.Charset = "utf-8";
//获取上传文件队列
HttpPostedFile oFile = context.Request.Files["file"];
if (oFile != null)
{
    //判断文件格式GIF , JPG , png
    var geshi = oFile.FileName.Split('.')[oFile.FileName.Split('.').Length - 1].ToUpper();
    if (geshi == "GIF" || geshi == "JPG" || geshi == "PNG")
    {
        if (oFile.ContentLength < 102400)
        {
            string dateFolder = HttpContext.Current.Server.MapPath("\\bmseek\\member\\Uploads\\");
            string guidFileName = Convert.ToDateTime(DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss")).ToString("yyyyMMddHHmmssffff") + Path.GetExtension(oFile.FileName).ToLower();
            oFile.SaveAs(dateFolder + "\\" + guidFileName);
            context.Response.Write(guidFileName);
        }
        else
        {
            context.Response.Write("大小超过了102400");
        }
    }
    else
    {
        context.Response.Write("不是图形类型");
    }
}


火狐跟open浏览器因为公司暂时不要求支持也没去测试了,理论上是兼容的

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值