解决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 相关文章推荐
Ext JS Grid在IE6 下宽度的问题解决方法
Feb 15 Javascript
ExtJS 2.0 实用简明教程之布局概述
Apr 29 Javascript
jquery 查找新建元素代码
Jul 06 Javascript
js防止DIV布局滚动时闪动的解决方法
Oct 30 Javascript
浅谈javascript原型链与继承
Jul 13 Javascript
理解javascript闭包
Dec 15 Javascript
Bootstrap导航条学习使用(二)
Feb 08 Javascript
详解如何使用vue-cli脚手架搭建Vue.js项目
May 19 Javascript
layer子层给父层页面元素赋值,以达到向父层页面传值的效果实例
Sep 22 Javascript
微信小程序实现下拉菜单切换效果
Mar 30 Javascript
js replace替换字符串同时替换多个方法
Nov 27 Javascript
基于vue实现圆形菜单栏组件
Jul 05 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 MYSQL中插入当前时间
2008/04/06 PHP
如何用PHP实现插入排序?
2013/04/10 PHP
php导出word文档与excel电子表格的简单示例代码
2014/03/08 PHP
window.js 主要包含了页面的一些操作
2009/12/23 Javascript
js+JQuery返回顶部功能如何实现
2012/12/03 Javascript
JavaScript栏目列表隐藏/显示简单实现
2013/04/03 Javascript
JavaScript实现向OL列表内动态添加LI元素的方法
2015/03/21 Javascript
AngularJs expression详解及简单示例
2016/09/01 Javascript
基于JavaScript实现百度搜索框效果
2020/06/28 Javascript
在小程序中使用canvas的方法示例
2018/09/17 Javascript
Node 搭建一个静态资源服务器的实现
2019/05/20 Javascript
微信小程序非跳转式组件授权登录的方法示例
2019/05/22 Javascript
vue实现Input输入框模糊查询方法
2021/01/29 Javascript
ant design 日期格式化的实现
2020/10/27 Javascript
Python内置的字符串处理函数详细整理(覆盖日常所用)
2014/08/19 Python
使用Python编写Linux系统守护进程实例
2015/02/03 Python
python中for语句简单遍历数据的方法
2015/05/07 Python
Centos Python2 升级到Python3的简单实现
2016/06/21 Python
Python科学计算之NumPy入门教程
2017/01/15 Python
Linux CentOS7下安装python3 的方法
2018/01/21 Python
DRF跨域后端解决之django-cors-headers的使用
2019/01/27 Python
使用OpenCV实现仿射变换—平移功能
2019/08/29 Python
python实现逢七拍腿小游戏的思路详解
2020/05/26 Python
Python Pillow(PIL)库的用法详解
2020/09/19 Python
Python 制作查询商品历史价格的小工具
2020/10/20 Python
Canvas环形饼图与手势控制的实现代码
2019/11/08 HTML / CSS
aden + anais官方网站:婴儿襁褓、毯子、尿布和服装
2017/06/21 全球购物
奇怪的鱼:Weird Fish
2018/03/18 全球购物
英国领先的鞋类零售商:Shoe Zone
2018/12/13 全球购物
移动通信行业实习自我鉴定
2013/09/28 职场文书
工程专业毕业生自荐信范文
2013/12/25 职场文书
护理实习生带教计划
2015/01/16 职场文书
交通事故被告答辩状
2015/05/22 职场文书
麦田里的守望者读书笔记
2015/06/30 职场文书
《全神贯注》教学反思
2016/02/22 职场文书
nginx容器方式反向代理实战
2022/04/18 Servers