兼容ie跟谷歌上传文件

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

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

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

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

前端代码:

 <span style="white-space:pre">				</span>$(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();
                                                     });
                                                 }
后端代码:

  <span style="white-space:pre">	</span>context.Response.ContentType = "text/html";
<span style="white-space:pre">	</span>
            //获取上传文件队列  
            HttpServerUtility server = context.Server;
            context.Response.Charset = "utf-8";
            //获取上传文件队列  
            HttpPostedFile oFile = context.Request.Files["file"];

            if (oFile != null)
            {
                //判断文件是否大于102400

                //判断文件格式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浏览器因为公司暂时不要求支持也没去测试了,理论上是兼容的

你可能感兴趣的:(JavaScript,jquery,插件)