解决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中Eval函数的使用
Mar 23 Javascript
基于jquery的给文章加入关键字链接
Oct 26 Javascript
iframe异步加载实现点击左边菜单加载右边内容实例讲解
Mar 04 Javascript
jquery ajax 调用失败的原因示例介绍
Sep 27 Javascript
基于JavaScript实现全选、不选和反选效果
Feb 15 Javascript
深入研究jQuery图片懒加载 lazyload.js使用方法
Aug 16 jQuery
Vue-Router进阶之滚动行为详解
Sep 13 Javascript
js中apply与call简单用法详解
Nov 06 Javascript
Vue2.x中利用@font-size引入字体图标报错的解决方法
Sep 28 Javascript
利用Node.js如何实现文件循环覆写
Apr 05 Javascript
element-ui多文件上传的实现示例
Apr 10 Javascript
vue print.js打印支持Echarts图表操作
Nov 13 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给每个段落添加空格的方法
2015/03/20 PHP
PHP针对多用户实现更换头像功能
2016/09/04 PHP
tp5.1框架数据库子查询操作实例分析
2020/05/26 PHP
js文字滚动停顿效果代码
2008/06/28 Javascript
jQuery获取CSS样式中的颜色值的问题,不同浏览器格式不同的解决办法
2013/05/13 Javascript
js判断鼠标左、中、右键哪个被点击的方法
2015/01/27 Javascript
JS实现灵巧的下拉导航效果代码
2015/08/25 Javascript
chrome浏览器当表单自动填充时如何去除浏览器自动添加的默认样式
2015/10/09 Javascript
基于jquery实现瀑布流布局
2020/06/28 Javascript
AngularJS 让人爱不释手的八种功能
2016/03/23 Javascript
javascript超过容器后显示省略号效果的方法(兼容一行或者多行)
2016/07/14 Javascript
微信小程序 教程之模块化
2016/10/17 Javascript
BootStrap的select2既可以查询又可以输入的实现代码
2017/02/17 Javascript
javascript 数据存储的常用函数总结
2017/06/01 Javascript
bootstrapTable+ajax加载数据 refresh更新数据
2018/08/31 Javascript
node(koa2) web应用模块介绍详解
2019/03/29 Javascript
vue(2.x,3.0)配置跨域代理
2019/11/27 Javascript
js利用拖放实现添加删除
2020/08/27 Javascript
JavaScript基于SVG的图片切换效果实例代码
2020/12/15 Javascript
[01:29:46]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第二局
2016/02/27 DOTA
python魔法方法-属性访问控制详解
2016/07/25 Python
Python制作豆瓣图片的爬虫
2017/12/28 Python
一个Python最简单的接口自动化框架
2018/01/02 Python
Python 元类实例解析
2018/04/04 Python
python在回调函数中获取返回值的方法
2019/02/22 Python
python3.6+selenium实现操作Frame中的页面元素
2019/07/16 Python
python实现把两个二维array叠加成三维array示例
2019/11/29 Python
Python导入模块包原理及相关注意事项
2020/03/25 Python
Python闭包与装饰器原理及实例解析
2020/04/30 Python
python定时截屏实现
2020/11/02 Python
CSS3中currentColor关键字的妙用
2016/02/27 HTML / CSS
软件测试企业面试试卷
2016/07/13 面试题
名企HR怎样看待求职信
2014/02/23 职场文书
2014年妇女工作总结
2014/12/06 职场文书
2014年远程教育工作总结
2014/12/09 职场文书
导游词之南昌滕王阁
2019/11/29 职场文书