解决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 相关文章推荐
从阿里妈妈发现的几个不错的表单验证函数
Sep 21 Javascript
javascript 对象定义方法 简单易学
Mar 22 Javascript
JavaScript打开word文档的实现代码(c#)
Apr 16 Javascript
基于js disabled=&quot;false&quot;不起作用的解决办法
Jun 26 Javascript
JS实现从连接中获取youtube的key实例
Jul 02 Javascript
学习JavaScript设计模式(代理模式)
Dec 03 Javascript
Bootstrap图片轮播组件使用实例解析
Jun 30 Javascript
AngularJS 输入验证详解及实例代码
Jul 28 Javascript
JS命令模式例子之菜单程序
Oct 10 Javascript
利用js来实现缩略语列表、文献来源链接和快捷键列表
Dec 16 Javascript
利用Blob进行文件上传的完整步骤
Aug 02 Javascript
解决Layui中layer报错的问题
Sep 03 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面向接口编程 耦合设计模式 简单范例
2011/03/23 PHP
CodeIgniter记录错误日志的方法全面总结
2016/05/17 PHP
[原创]php简单隔行变色功能实现代码
2016/07/09 PHP
thinkphp实现分页显示功能
2016/12/03 PHP
PHP单例模式简单用法示例
2017/06/23 PHP
jQuery操作input type=radio的实现代码
2012/06/14 Javascript
form表单中去掉默认的enter键提交并绑定js方法实现代码
2013/04/01 Javascript
JS实现根据出生年月计算年龄
2014/01/10 Javascript
jQuery中对未来的元素绑定事件用bind、live or on
2014/04/17 Javascript
js动态改变select选择变更option的index值示例
2014/07/10 Javascript
jQuery遍历json中多个map的方法
2015/02/12 Javascript
input输入框鼠标焦点提示信息
2015/03/17 Javascript
jQuery图片轮播滚动切换代码分享
2020/04/20 Javascript
JavaScript弹窗基础篇
2016/04/27 Javascript
jQuery实现table中的tr上下移动并保持序号不变的实例代码
2016/07/11 Javascript
jQuery实现鼠标经过购物车出现下拉框代码(推荐)
2016/07/21 Javascript
微信小程序 常用工具类详解及实例
2017/02/15 Javascript
详解Vue 动态添加模板的几种方法
2017/04/25 Javascript
利用vueJs实现图片轮播实例代码
2017/06/03 Javascript
JS实现移动端判断上拉和下滑功能
2017/08/07 Javascript
js匿名函数使用&amp;传参(实例)
2017/09/08 Javascript
微信小程序中如何使用flyio封装网络请求
2019/07/03 Javascript
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
2020/06/06 jQuery
解决vue组件销毁之后计时器继续执行的问题
2020/07/21 Javascript
深入理解Python中range和xrange的区别
2017/11/26 Python
用pandas按列合并两个文件的实例
2018/04/12 Python
Python多进程池 multiprocessing Pool用法示例
2018/09/07 Python
python的sys.path模块路径添加方式
2020/03/09 Python
python实现学生信息管理系统源码
2021/02/22 Python
英国评分最高的女性剃须刀订阅盒:FFS Beauty
2018/01/25 全球购物
Java中有几种方法可以实现一个线程?用什么关键字修饰同步方法?stop()和suspend()方法为何不推荐使用?
2015/08/04 面试题
信息总监管理职责范本
2014/03/08 职场文书
双语教学实施方案
2014/03/23 职场文书
教师求职自荐书
2014/06/14 职场文书
2014优秀大学生简历自我评价
2014/09/15 职场文书
新手必备Python开发环境搭建教程
2021/05/28 Python