解决jQuery上传插件Uploadify出现Http Error 302错误的方法


Posted in Javascript onDecember 18, 2015

之前介绍过jquery uploadify上传插件的使用方法,我在使用中遇到过Http Error 302错误问题,应该会有很多人在使用中遇到过,在此记录下来:
首先http 302是请求被重定向的意思,这就很容易理解了,如果你的uploadify处理上传脚本有session验证,就会出现此错误,因为flash在执行post请求的时候没有包含cookie信息,而服务器的session会根据客户端的cookie来得到SESSIONID。没有提交cookie自然就不能获取到session,然后uploadify就返回了302(请求被重定向)的错误。
解决办法:

把session_id的值传到服务端:

<script>
$(document).ready(function() { 
  $('#file_upload').uploadify({ 
  'uploader' : 'uploadify/uploadify.swf', 
  'script' : 'uploadify.php',
  'folder' : 'uploads/file', 
  'formData': { 'session': '<?php echo session_id();?>'}, 
  'onComplete' : function(event, ID, fileObj, response, data) { 
   alert(response); 
  } 
  }); 
}); 
</script>

然后在服务器端session验证之前:

if (isset($_POST['session'])){ 
 session_id($_POST['session']); 
 session_start();//注意此函数要在session_id之后 
}

当然,你也可以直接在url中将session id传过去,这样Http Error 302错误就可以得到解决。

问题扩展:MVC使用uploadify3.1 IE下正常firefox、chrome也出现HTTPERROR 302错误,有什么解决办法?

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

首先需要对global.asxa添加如下内容

protected void Application_BeginRequest(object sender, EventArgs e)
  {
   /* we guess at this point session is not already retrieved by application so we recreate cookie with the session id... */
   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);
  }

初始化页面上传插件代码如下

<script type="text/javascript">
  var auth = "@(Request.Cookies[FormsAuthentication.FormsCookieName]==null ? string.Empty : Request.Cookies[FormsAuthentication.FormsCookieName].Value)";
  var ASPSESSID = "@Session.SessionID";

  $(function () {
   $('#upload').uploadify({
    'formData': { 'folder': '/Upload', 'ASPSESSID': ASPSESSID, 'AUTHID': auth },
    'buttonText': '浏览',
    'buttonClass': 'browser',
    'fileSizeLimit' : '100KB',
    'fileTypeExts': '*.xls;*.xlsx',
    'removeCompleted': false,
    'swf': '@Url.Content("~/Scripts/Uploadify/uploadify.swf")',
    'uploader': '/Upload',
    'onUploadSuccess': function (file, data, response) {}
   });
  });
 </script>

更多精彩内容请参考专题《ajax上传技术汇总》,《javascript文件上传操作汇总》和《jQuery上传操作汇总》进行学习。

 一个问题的研究可以是发散性的是多方面,我们要学会举一反三,这样才能灵活的学习专业知识,掌握专业技能,希望对大家的学习有所帮助。

Javascript 相关文章推荐
jquery 面包屑导航 具体实现
Jun 05 Javascript
常用的JavaScript验证正则表达式汇总
Nov 26 Javascript
jquery全选checkBox功能实现代码(取消全选功能)
Dec 10 Javascript
深入理解JavaScript系列(48):对象创建模式(下篇)
Mar 04 Javascript
jquery实现一个简单的表单验证实例
Mar 30 Javascript
AngularJs学习第八篇 过滤器filter创建
Jun 08 Javascript
修改jquery中dialog的title属性方法(推荐)
Aug 26 Javascript
JavaScript cookie详解及简单实例应用
Dec 31 Javascript
JavaScript定义及输出螺旋矩阵的方法详解
Dec 01 Javascript
vue项目中跳转到外部链接的实例讲解
Sep 20 Javascript
详解Vue中watch的详细用法
Nov 28 Javascript
JavaScript中的各种宽高属性的实现
May 08 Javascript
JavaScript Math.round() 方法
Dec 18 #Javascript
JavaScript如何实现对数字保留两位小数一位自动补零
Dec 18 #Javascript
js格式化时间的方法
Dec 18 #Javascript
谈谈我对JavaScript DOM事件的理解
Dec 18 #Javascript
JavaScript中字符串与Unicode编码互相转换的实现方法
Dec 18 #Javascript
jQuery Validation PlugIn的使用方法详解
Dec 18 #Javascript
最简单的JavaScript图片轮播代码(两种方法)
Dec 18 #Javascript
You might like
9段PHP实用功能的代码推荐
2014/10/14 PHP
php压缩和解压缩字符串的方法
2015/03/14 PHP
php实现约瑟夫问题的方法小结
2015/03/23 PHP
thinkPHP中验证码的简单实现方法
2016/12/05 PHP
详解thinkphp5+swoole实现异步邮件群发(SMTP方式)
2017/10/13 PHP
疯狂Jquery第一天(Jquery学习笔记)
2012/05/11 Javascript
原生JS绑定滑轮滚动事件兼容常见浏览器
2014/06/30 Javascript
Jquery实现地铁线路指示灯提示牌效果的方法
2015/03/02 Javascript
JavaScript实现为指定对象添加多个事件处理程序的方法
2015/04/17 Javascript
canvas快速绘制圆形、三角形、矩形、多边形方法介绍
2016/12/29 Javascript
为JQuery EasyUI 表单组件增加焦点切换功能的方法
2017/04/13 jQuery
JavaScript取得gridview中获取checkbox选中的值
2017/07/24 Javascript
php 解压zip压缩包内容到指定目录的实例
2018/01/23 Javascript
vue 自定义 select内置组件
2018/04/10 Javascript
vue.js前后端数据交互之提交数据操作详解
2018/04/24 Javascript
AngularJS标签页tab选项卡切换功能经典实例详解
2018/05/16 Javascript
vue使用微信JS-SDK实现分享功能
2019/08/23 Javascript
[56:38]DOTA2-DPC中国联赛正赛Aster vs Magma BO3 第一场 3月5日
2021/03/11 DOTA
itchat接口使用示例
2017/10/23 Python
Python装饰器用法示例小结
2018/02/11 Python
Python如何转换字符串大小写
2020/06/04 Python
用pandas划分数据集实现训练集和测试集
2020/07/20 Python
利用HTML5 Canvas API绘制矩形的超级攻略
2016/03/21 HTML / CSS
如何给HTML标签中的文本设置修饰线
2019/11/18 HTML / CSS
获取邓白氏信用报告:Dun & Bradstreet
2019/01/22 全球购物
财务出纳岗位职责
2014/02/03 职场文书
公务员转正鉴定材料
2014/02/11 职场文书
大二法学专业职业生涯规划范文
2014/02/12 职场文书
元旦促销方案
2014/03/15 职场文书
专业技术职务聘任书
2014/03/29 职场文书
小学竞选班长演讲稿
2014/09/09 职场文书
销售内勤岗位职责范本
2015/04/13 职场文书
教师节晚会主持词
2015/06/30 职场文书
导游词之南京莫愁湖公园
2019/11/13 职场文书
MySQL一些常用高级SQL语句
2021/07/03 MySQL
Golang日志包的使用
2022/04/20 Golang