解决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 相关文章推荐
Javascript实例教程(19) 使用HoTMetal(2)
Dec 23 Javascript
传递参数的标准方法(jQuery.ajax)
Nov 19 Javascript
Jquery实现侧边栏跟随滚动条固定(兼容IE6)
Apr 02 Javascript
javascript简单判断输入内容是否合法的方法
May 11 Javascript
javascript函数中的3个高级技巧
Sep 22 Javascript
JavaScript实现的select点菜功能示例
Jan 16 Javascript
socket.io实现在线群聊功能
Apr 07 Javascript
在create-react-app中使用css modules的示例代码
Jul 31 Javascript
Vue路由管理器Vue-router的使用方法详解
Feb 05 Javascript
微信小程序保存图片到相册权限设置
Apr 09 Javascript
基于js判断浏览器是否支持webGL
Apr 18 Javascript
小程序实现筛子抽奖
May 26 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面向对象全攻略 (十五) 多态的应用
2009/09/30 PHP
rephactor 优秀的PHP的重构工具
2011/06/09 PHP
PHP实现的无限分类类库定义与用法示例【基于thinkPHP】
2018/08/06 PHP
Laravel框架控制器,视图及模型操作图文详解
2019/12/04 PHP
div移动 输入框不能输入的问题
2009/11/19 Javascript
网页加载时页面显示进度条加载完成之后显示网页内容
2012/12/23 Javascript
jquery入门—数据删除与隔行变色以及图片预览
2013/01/07 Javascript
javascript重复绑定事件造成的后果说明
2013/03/02 Javascript
Java Mybatis框架入门基础教程
2015/09/21 Javascript
jQuery+jsp实现省市县三级联动效果(附源码)
2015/12/03 Javascript
Node.js如何自动审核团队的代码
2016/07/20 Javascript
基于vue.js轮播组件vue-awesome-swiper实现轮播图
2017/03/17 Javascript
简单谈谈关于 npm 5.0 的新坑
2017/06/08 Javascript
微信小程序网络请求封装示例
2018/07/24 Javascript
如何对react hooks进行单元测试的方法
2019/08/14 Javascript
js实现中文实时时钟
2020/01/15 Javascript
vue自动添加浏览器兼容前后缀操作
2020/08/13 Javascript
JS+CSS实现动态时钟
2021/02/19 Javascript
Python编程中的文件操作攻略
2015/10/16 Python
使用Python写CUDA程序的方法
2017/03/27 Python
Python使用回溯法子集树模板解决爬楼梯问题示例
2017/09/08 Python
5个很好的Python面试题问题答案及分析
2018/01/19 Python
TensorFlow实现MLP多层感知机模型
2018/03/09 Python
Python 绘图库 Matplotlib 入门教程
2018/04/19 Python
使用Python自动生成HTML的方法示例
2019/08/06 Python
Python标准库:内置函数max(iterable, *[, key, default])说明
2020/04/25 Python
Python3使用tesserocr识别字母数字验证码的实现
2021/01/29 Python
美国女孩服装购物网站:Justice
2017/03/04 全球购物
澳大利亚家具商店:Freedom
2020/12/17 全球购物
企业法人授权委托书
2014/09/25 职场文书
村干部群众路线教育活动对照检查材料
2014/10/01 职场文书
小学老师对学生的评语
2014/12/29 职场文书
思想政治表现评语
2015/01/04 职场文书
师德承诺书
2015/01/20 职场文书
新员工入职欢迎词
2015/01/23 职场文书
教学质量月活动总结
2015/05/11 职场文书