解决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 相关文章推荐
探索Emberjs制作一个简单的Todo应用
Nov 07 Javascript
实现placeholder效果的方案汇总
Jun 11 Javascript
详解JavaScript中jQuery和Ajax以及JSONP的联合使用
Aug 13 Javascript
Javascript仿新浪游戏频道鼠标悬停显示子菜单效果
Aug 21 Javascript
不得不分享的JavaScript常用方法函数集(上)
Dec 23 Javascript
ECMAScript6 新特性范例大全
Mar 24 Javascript
微信小程序 图片上传实例详解
May 05 Javascript
vue组件发布到npm简单步骤
Nov 30 Javascript
vue组件中使用iframe元素的示例代码
Dec 13 Javascript
基于vue实现web端超大数据量表格的卡顿解决
Apr 02 Javascript
详解Vue demo实现商品列表的展示
May 07 Javascript
element-ui table行点击获取行索引(index)并利用索引更换行顺序
Feb 27 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
php 字符串中的\n换行符无效、不能换行的解决方法
2014/04/02 PHP
PHP共享内存用法实例分析
2016/02/12 PHP
PHP给前端返回一个JSON对象的实例讲解
2018/05/31 PHP
jQuery获得内容和属性示例代码
2014/01/16 Javascript
瀑布流布局代码一例
2014/04/11 Javascript
jQuery取得设置清空select选择的文本与值
2014/07/08 Javascript
JavaScript获取Url里的参数
2014/12/18 Javascript
深入浅析NodeJs并发异步的回调处理
2015/12/21 NodeJs
js 动态生成json对象、时时更新json对象的方法
2016/12/02 Javascript
微信小程序中顶部导航栏的实现代码
2017/03/30 Javascript
使用vue-aplayer插件时出现的问题的解决
2018/03/02 Javascript
LayerClose弹窗关闭刷新方法
2018/08/17 Javascript
Vue中的vue-resource示例详解
2018/11/02 Javascript
vue中使用微信公众号js-sdk踩坑记录
2019/03/29 Javascript
Vue使用CDN引用项目组件,减少项目体积的步骤
2020/10/30 Javascript
python里使用正则表达式的组嵌套实例详解
2017/10/24 Python
Window10+Python3.5安装opencv的教程推荐
2018/04/02 Python
pytorch + visdom CNN处理自建图片数据集的方法
2018/06/04 Python
Python动态生成多维数组的方法示例
2018/08/09 Python
python后端接收前端回传的文件方法
2019/01/02 Python
浅析Python面向对象编程
2020/07/10 Python
PyCharm Community安装与配置的详细教程
2020/11/24 Python
摩顿布朗英国官方网上商店:奢华沐浴、身体和头发护理
2016/10/29 全球购物
联想哥伦比亚网上商城:Lenovo Colombia
2017/01/10 全球购物
德国家具在线:Fashion For Home
2017/03/11 全球购物
Lookfantastic葡萄牙官方网站:欧洲第一大化妆品零售商
2018/03/17 全球购物
Mio Skincare法国官网:身体紧致及孕期身体护理
2018/04/04 全球购物
怎样在程序里获得一个空指针
2015/01/24 面试题
编写类String 的构造函数、析构函数和赋值函数
2012/09/09 面试题
会计专业自荐信范文
2013/12/02 职场文书
医学专业毕业生个人求职信
2013/12/25 职场文书
学生出入校管理制度
2014/01/16 职场文书
教育学习自我评价
2014/02/03 职场文书
小学语文课后反思精选
2014/04/25 职场文书
学生个人评语大全
2015/01/04 职场文书
2015年公路路政个人工作总结
2015/07/24 职场文书