解决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中检测变量的类型的代码
Dec 28 Javascript
jQuery EasyUI API 中文文档 - ComboTree组合树
Oct 11 Javascript
在线一元二次方程计算器实例(方程计算器在线计算)
Dec 22 Javascript
JavaScript获取网页中第一个图片id的方法
Apr 03 Javascript
jquery专业的导航菜单特效代码分享
Aug 29 Javascript
jQuery插件form-validation-engine正则表达式操作示例
Feb 09 Javascript
JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)
Jun 19 Javascript
js实现京东秒杀倒计时功能
Jan 21 Javascript
vue组件数据传递、父子组件数据获取,slot,router路由功能示例
Mar 19 Javascript
angular8和ngrx8结合使用的步骤介绍
Dec 01 Javascript
javascript浅层克隆、深度克隆对比及实例解析
Feb 09 Javascript
JavaScript实现拖拽效果
Mar 16 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基础知识:类与对象(5) static
2006/12/13 PHP
php数据结构之顺序链表与链式线性表示例
2018/01/22 PHP
Yii2框架实现登陆添加验证码功能示例
2018/07/12 PHP
laravel 解决多库下的DB::transaction()事务失效问题
2019/10/21 PHP
Javascript中的常见排序算法
2007/03/27 Javascript
在JavaScript中通过URL传递汉字的方法
2007/04/09 Javascript
javascript eval函数深入认识
2009/02/21 Javascript
不同浏览器的怪癖小结
2010/07/11 Javascript
JavaScript移除数组元素减少长度的方法
2013/09/05 Javascript
jquery得到font-size属性值实现代码
2013/09/30 Javascript
利用js实现在浏览器状态栏显示访问者在本页停留的时间
2013/12/29 Javascript
js身份证判断方法支持15位和18位
2014/03/18 Javascript
JavaScript通过select动态更换图片的方法
2015/03/23 Javascript
JS实现弹性菜单效果代码
2015/09/07 Javascript
JavaScript表单验证的两种实现方法
2017/02/11 Javascript
Bootstrap提示框效果的实例代码
2017/07/12 Javascript
值得收藏的vuejs安装教程
2017/11/21 Javascript
浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
2017/12/07 Javascript
JavaScript实现的鼠标跟随特效示例【2则实例】
2018/12/22 Javascript
vuejs数据超出单行显示更多,点击展开剩余数据实例
2019/05/05 Javascript
Python操作MongoDB数据库PyMongo库使用方法
2015/04/27 Python
python批量替换页眉页脚实例代码
2018/01/22 Python
python操作文件的参数整理
2019/06/11 Python
用python实现前向分词最大匹配算法的示例代码
2020/08/06 Python
使用豆瓣源来安装python中的第三方库方法
2021/01/26 Python
Html5百叶窗效果的示例代码
2017/12/11 HTML / CSS
介绍一下Transact-SQL中SPACE函数的用法
2015/09/01 面试题
C#可否对内存进行直接的操作
2015/02/26 面试题
物业管理大学生个人的自我评价
2013/10/10 职场文书
内刊编辑求职自荐书范文
2014/02/19 职场文书
教师年终个人总结
2015/02/11 职场文书
2016毕业实习单位评语大全
2015/12/01 职场文书
表扬信范文
2019/04/22 职场文书
详解php中流行的rpc框架
2021/05/29 PHP
使用Canvas绘制一个游戏人物属性图
2022/03/25 Javascript
Oracle查看表空间使用率以及爆满解决方案详解
2022/07/23 Oracle