解决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 相关文章推荐
始终在屏幕中间显示Div的代码(css+js)
Mar 10 Javascript
javascript中字符串的定义示例代码
Dec 19 Javascript
javascript自定义in_array()函数实现方法
Aug 03 Javascript
浅析AngularJS Filter用法
Dec 28 Javascript
js获取客户端操作系统类型的方法【测试可用】
May 27 Javascript
BootStrap modal模态弹窗使用小结
Oct 26 Javascript
Angularjs在360兼容模式下取数据缓存问题的解决办法
Jun 22 Javascript
深入理解Vue-cli搭建项目后的目录结构探秘
Jul 13 Javascript
jQuery pjax 应用简单示例
Sep 20 jQuery
详解react组件通讯方式(多种)
May 06 Javascript
使用React代码动态生成栅格布局的方法
May 24 Javascript
js 执行上下文和作用域的相关总结
Feb 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
IIS+fastcgi下PHP运行超时问题的解决办法详解
2013/06/20 PHP
php分页示例分享
2014/04/30 PHP
php结合md5的加密解密算法实例
2016/09/30 PHP
Linux平台PHP5.4设置FPM线程数量的方法
2016/11/09 PHP
php mysql_real_escape_string addslashes及mysql绑定参数防SQL注入攻击
2016/12/23 PHP
PHP删除字符串中非字母数字字符方法总结
2019/01/20 PHP
JavaScript 原型与继承说明
2010/06/09 Javascript
在jQuery1.5中使用deferred对象 着放大镜看Promise
2011/03/12 Javascript
老生常谈遮罩层 滚动条的问题
2016/04/29 Javascript
D3.js实现直方图的方法详解
2016/09/25 Javascript
Servlet实现文件上传,可多文件上传示例
2016/12/05 Javascript
js中开关变量使用实例
2017/02/24 Javascript
Nodejs之http的表单提交
2017/07/07 NodeJs
为什么使用koa2搭建微信第三方公众平台的原因
2018/05/16 Javascript
Nuxt项目支持eslint+pritter+typescript的实现
2019/05/20 Javascript
解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)
2020/07/20 Javascript
vue.js+element 默认提示中英文操作
2020/11/11 Javascript
[01:36:57]【09DOTA2第一视角】小骷髅
2014/04/16 DOTA
深入解析Python中的WSGI接口
2015/05/11 Python
python解析xml文件实例分析
2015/05/27 Python
python文件名和文件路径操作实例
2017/09/29 Python
详解python的ORM中Pony用法
2018/02/09 Python
Django开发中的日志输出的方法
2018/07/02 Python
如何基于Python实现电子邮件的发送
2019/12/16 Python
Idea安装python显示无SDK问题解决方案
2020/08/12 Python
python编写实现抽奖器
2020/09/10 Python
HTML5之SVG 2D入门3—文本与图像及渲染文本介绍
2013/01/30 HTML / CSS
巧用HTML5给按钮背景设计不同的动画简单实例
2016/08/09 HTML / CSS
复古服装:RetroStage
2019/05/10 全球购物
什么是用户模式(User Mode)与内核模式(Kernel Mode) ?
2015/09/07 面试题
short s1 = 1; s1 = s1 + 1;有什么错? short s1 = 1; s1 += 1;有什么错?
2014/09/26 面试题
产品生产计划书
2014/05/07 职场文书
财会专业大学生求职信
2014/09/26 职场文书
幼儿园园长六一致辞
2015/07/31 职场文书
青年教师听课心得体会
2016/01/15 职场文书
如何Tomcat中使用ipv6地址
2022/05/06 Servers