• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >jquery > 解决jQuery uploadify在非IE核心浏览器下无法上传

解决jQuery uploadify在非IE核心浏览器下无法上传

作者: 字体:[增加 减小] 来源:互联网

通过本文主要向大家介绍了jQuery,uploadify,无法上传等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

一、jquery uploadify自我介绍:

  (1)、大家好,我是jquery插件大家族中负责实现异步上传的插件,我不是唯一,只是较好用的一款。

  (2)、我的功能:

  支持单文件或多文件上传,可控制并发上传的文件数

    在服务器端支持各种语言与之配合使用,诸如PHP,.NET,Java……

    通过参数可配置上传文件类型及大小限制

    通过参数可配置是否选择文件后自动上传

    易于扩展,可控制每一步骤的回调函数(onSelect, onCancel……)

    通过接口参数和CSS控制外观

    Uploadify主页地址:http://www.uploadify.com/ 在该页面你可以了解到关于他的更多内容。

   (3)、我的用法:

          去baidu.com,google.com  search search,很多。

二、firefox下我出故障了,是我的问题吗?

      jquery uploadify在ie下可以正常上传,在实现异步上传的时候,每一个文件在上传时都会提交给服务器一个请求。每个请求都需要安全验证,session和cookie的校验。是的,就是这样。由于jquery uploadify是借助flash来实现上传的,每一次向后台发送数据流请求时,ie会自动把本地cookie存储捆绑在一起发送给服务器。但firefox、chrome不会这样做,他们会认为这样不安全。哈,这就是原因。

      找到原因了,在让我们来明白两个概念:

      (1)、session:

        Session又称为会话状态,是Web系统中最常用的状态,用于维护和当前浏览器实例相关的一些信息。举个例子来说,我们可以把已登录用户的用户名放在Session中,这样就能通过判断Session中的某个Key来判断用户是否登录,如果登录的话用户名又是多少。

        我们知道,Session对于每一个客户端(或者说浏览器实例)是“人手一份”,用户首次与Web服务器建立连接的时候,服务器会给用户分发一个 SessionID作为标识。SessionID是一个由24个字符组成的随机字符串。用户每次提交页面,浏览器都会把这个SessionID包含在 HTTP头中提交给Web服务器,这样Web服务器就能区分当前请求页面的是哪一个客户端。那么,ASP.NET 2.0提供了哪些存储SessionID的模式呢!

      (2)、Cookie,有时也用其复数形式Cookies,指某些网站为了辨别用户身份、进行session跟踪而储存在用户本地终端上的数据(通常经过加密)。

三、解决方案

1.asp.net环境下

在Global.asax文件中,编写如下代码:

void Application_BeginRequest(object sender, EventArgs e)  
  {
    try { 
      string session_param_name = "ASPSESSID"; 
      string session_cookie_name = "ASP.NET_SessionId"; 
      if (HttpContext.Current.Request.Form[session_param_name] != null) 
      { 
        UpdateCookie(session_cookie_name, HttpContext.Current.Request.Form[session_param_name]); 
      } 
      else if (HttpContext.Current.Request.QueryString[session_param_name] != null) 
      { 
        UpdateCookie(session_cookie_name, HttpContext.Current.Request.QueryString[session_param_name]); 
      } 
    }
    catch { 
    } 

    //此处是身份验证
    try { 
      string auth_param_name = "AUTHID"; 
      string auth_cookie_name = FormsAuthentication.FormsCookieName; 
      if (HttpContext.Current.Request.Form[auth_param_name] != null) 
      { 
        UpdateCookie(auth_cookie_name, HttpContext.Current.Request.Form[auth_param_name]); 
      } 
      else if (HttpContext.Current.Request.QueryString[auth_param_name] != null) 
      { 
        UpdateCookie(auth_cookie_name, HttpContext.Current.Request.QueryString[auth_param_name]);
      } 
    }
    catch { }
  }

  private void UpdateCookie(string cookie_name, string cookie_value)
  {
    HttpCookie cookie = HttpContext.Current.Request.Cookies.Get(cookie_name);
    if (null == cookie)
    {
      cookie = new HttpCookie(cookie_name);
    }
    cookie.Value = cookie_value;
    HttpContext.Current.Request.Cookies.Set(cookie);//重新设定请求中的cookie值,将服务器端的session值赋值给它
  }

   /*---------------------------Aspx页面端代码---------------------------------*/

   this.hfAuth.Value = Request.Cookies[FormsAuthentication.FormsCookieName] == null ? string.Empty : Request.Cookies[FormsAuthentication.FormsCookieName].Value;
   

   this.hfAspSessID.Value = Session.SessionID;

      把session值及身份验证值保存到客户端控件中,然后你就可以通过js获取这两个值,然后传给下面的插件js初始化程序。

     (之所以选择将session值放入到控件中存储,也是怕客户端禁用cookie的考虑。)

   /*-----------------------------以下是js代码----------------------------------*/

  InitUpload: function(auth, AspSessID) {
    $("#uploadify").uploadify({
      uploader: 'Scripts/jqueryplugins/Infrastructure/uploadify.swf',
      script: 'Handlers/ResourceHandler.ashx?OpType=UploadResource',
      cancelImg: 'Scripts/jqueryplugins/Infrastructure/cancel.png',
      queueID: 'fileQueue',
      sizeLimit: '21480000000',
      wmode: 'transparent ',
      fileExt: '*.zip,*.jpg, *.rar,*.doc,*.docx,*.xls,*.xlsx,*.png,*.pptx,*.ppt,*.pdf,*.swf,*.txt',
      auto: false,
      multi: true,
      scriptData: { ASPSESSID: AspSessID, AUTHID: auth },

            ...........//更多配置项,您可以查看官方配置文档

       在插件初始化的时候,把本地记录下来的session值,以及身份验证值传给初始化方法,进行参数赋值,这样,每次异步请求上传文件的时候,相应的 session值就包含在请求文件中了。

2.C#环境下

以上是asp.net下的解决方法,那么C#中应该如何处理呢?

我是这样解决的,这样所有上传文件的代码都不需要修改,改动量最小,但是有安全隐患:

if (this.LoginInfo == null)
{
  // 解决uploadify兼容火狐谷歌浏览器上传问题
  // 但是,此代码使系统有安全隐患,Flash程序请求该系统不需要验证
  // 要解决此安全隐患,需要Flash程序传用户名和密码过来验证,但是该用户名和密码不能写在前端以便被不法用户看到
  if (Request.UserAgent == "Shockwave Flash")
  {
    return;
  }
  else
  {
    filterContext.Result = RedirectToAction("LoginAgain", "Account", new { Area = "Auth" });
    return;
  }
}

我们的系统是ASP.NET MVC的,虽说通过加密的方式可以让用户看不到敏感信息,但恶意用户不需要把敏感信息解密出来就可绕过系统验证。

验证信息不能直接写前台,可以用ajax从后台获取验证信息,然后传给flash,然后在拦截器中验证。

修改后:

JS代码:

ajax请求后台获取用户名,传给flash

$(function () {
  $.ajax({
    url: "/Auth/Account/GetUserNamePwd",
    type: "POST",
    dataType: "json",
    data: {},
    success: function (data) {
      $("#uploadify").uploadify({
        height: 25,
        width: 100,
        swf: '/Content/Plugins/UploadifyJs/uploadify.swf',
        uploader: 'UploadFile',
        formData: {
          userName: data.data.userName, //ajax获取的用户名
          pwd: data.data.pwd //ajax获取的密码
        },
        buttonText: '选择文件上传',
        fileSizeLimit: '4MB',
        fileTypeDesc: '文件',
        fileTypeExts: '*.*',
        queueID: 'fileQueue',
        multi: true,
        onUploadSuccess: function (fileObj, data, response) {
          var d = eval("(" + data + ")");
          $(".uploadify-queue-item").find(".data").html("  上传完成");
          $("#url").val(d.url);
          $("#name").val(d.name);
        },
        onUploadError: function (event, ID, fileObj, errorObj) {
          if (event.size > 4 * 1024 * 1024) {
            alert('超过文件上传大小限制(4M)!');
            return;
          }
          alert('上传失败');
        }
      }); //end uploadify
    }
  });
});    //end $

拦截器中代码:

....



 
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • 基于jQuery对象和DOM对象和字符串之间的转化实例
  • jquery+css实现简单的图片轮播效果
  • 使用jQuery实现鼠标点击左右按钮滑动切换
  • jQuery实现上传图片前预览效果功能
  • jQuery初级教程之网站品牌列表效果
  • 基于jquery实现多选下拉列表
  • jQuery接受后台传递的List的实例详解
  • 详解jquery选择器的原理
  • jQuery上传插件webupload使用方法
  • 关于jquery form表单序列化的注意事项详解

相关文章

  • Jquery中$.post和$.ajax的用法小结
  • jquery动态添加删除一行数据示例
  • 最新28个很棒的jQuery 教程
  • jquery实现拖动效果
  • 用jQuery技术实现Tab页界面之二
  • jQuery中innerHeight()方法用法实例
  • jQuery实现边框动态效果的实例代码
  • JQuery标签页效果实例详解
  • jquery formValidator插件ajax验证 内容不做任何修改再离开提示错误的bug解决方法
  • 如何使用jquery动态加载js,css文件实现代码

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • jquery easyUI中ajax异步校验用户名
    • JQuery性能优化的几点建议
    • jquery ajax提交表单数据的两种实现方法
    • 关于hashchangebroker和statehashable的补充文档
    • 使用jquery实现select添加实现后台权限添加的效果
    • 分享一则JavaScript滚动条插件源码
    • jquery实现可横向和竖向展开的动态下滑菜单效果
    • jQuery插件zTree实现的基本树与节点获取操作示例
    • jQuery boxy弹出层插件中文演示及使用讲解
    • 自定义一个jquery插件[鼠标悬浮时候 出现说明label]

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有