兼容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
    评论
以下是一个兼容IE浏览器的JS下载文件并监听进度的示例代码: ```javascript function downloadFile(url, progressCallback, successCallback, errorCallback) { var xhr = new XMLHttpRequest(); xhr.open('GET', url, true); xhr.responseType = 'blob'; xhr.onload = function() { if (xhr.status === 200) { if (successCallback) successCallback(xhr.response); } else { if (errorCallback) errorCallback(xhr.statusText); } }; xhr.onerror = function() { if (errorCallback) errorCallback(xhr.statusText); }; xhr.onprogress = function(event) { if (progressCallback) progressCallback(event.loaded, event.total); }; xhr.send(); } downloadFile( 'https://example.com/file.pdf', function(loaded, total) { // 更新进度条 var percent = Math.round(loaded / total * 100); console.log('下载进度:' + percent + '%'); }, function(blob) { // 下载成功,保存文件 if (navigator.msSaveBlob) { navigator.msSaveBlob(blob, 'file.pdf'); } else { var link = document.createElement('a'); link.href = window.URL.createObjectURL(blob); link.download = 'file.pdf'; link.click(); } }, function(error) { // 下载失败 console.log('下载失败:' + error); } ); ``` 说明: 1. 使用XMLHttpRequest对象发起GET请求,设置responseType为blob,可以返回一个二进制数据流。 2. 监听xhr的onload事件,在请求成功时调用successCallback回调函数,传入返回的blob数据流。 3. 监听xhr的onerror事件,在请求失败时调用errorCallback回调函数,传入错误信息。 4. 监听xhr的onprogress事件,在请求过程中不断更新进度,调用progressCallback回调函数,传入已下载的字节数和总字节数。 5. 在successCallback回调函数中,使用navigator.msSaveBlob方法保存文件,如果不支持则创建一个下载链接并模拟点击下载。 6. 在errorCallback回调函数中,输出错误信息。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值