解决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 相关文章推荐
innertext , insertadjacentelement , insertadjacenthtml , insertadjacenttext 等区别
Jun 29 Javascript
jQuery实现点击文本框弹出热门标签的提示效果
Nov 17 Javascript
JavaScript中的small()方法使用详解
Jun 08 Javascript
JavaScript实现基于十进制的四舍五入实例
Jul 17 Javascript
深入理解AngularJS中的ng-bind-html指令和$sce服务
Sep 08 Javascript
js获取元素的偏移量offset简单方法(必看)
Jul 05 Javascript
JS加密插件CryptoJS实现AES加密操作示例
Aug 16 Javascript
element-ui表格数据转换的示例代码
Aug 24 Javascript
微信小程序中上传图片并进行压缩的实现代码
Aug 28 Javascript
vue 项目引入echarts 添加点击事件操作
Sep 09 Javascript
jQuery实现日历效果
Sep 11 jQuery
JavaScript声明变量和数据类型的转换
Apr 12 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 编写的日历
2006/10/09 PHP
php加水印的代码(支持半透明透明打水印,支持png透明背景)
2013/01/17 PHP
PHP编程计算两个时间段是否有交集的实现方法(不算边界重叠)
2017/05/30 PHP
Laravel 验证码认证学习记录小结
2019/12/20 PHP
js调用flash的效果代码
2008/04/26 Javascript
js取两个数组的交集|差集|并集|补集|去重示例代码
2013/08/07 Javascript
js的隐含参数(arguments,callee,caller)使用方法
2014/01/28 Javascript
js实现input框文字动态变换显示效果
2015/08/19 Javascript
js滑动提示效果代码分享
2016/03/10 Javascript
jQuery实现背景弹性滚动的导航效果
2016/06/01 Javascript
BootStrap 超链接变按钮的实现方法
2016/09/25 Javascript
谈谈因Vue.js引发关于getter和setter的思考
2016/12/02 Javascript
微信浏览器禁止页面下拉查看网址实例详解
2017/06/28 Javascript
在vue 中使用 less的教程详解
2018/09/26 Javascript
vue点击自增和求和的实例代码
2019/11/06 Javascript
OpenLayer学习之自定义测量控件
2020/09/28 Javascript
说一说Python logging
2016/04/15 Python
小议Python中自定义函数的可变参数的使用及注意点
2016/06/21 Python
python生成式的send()方法(详解)
2017/05/08 Python
pandas 空数据处理方法详解
2019/11/02 Python
使用python实现对元素的长截图功能
2019/11/14 Python
Python 文件数据读写的具体实现
2020/01/24 Python
Python爬虫爬取百度搜索内容代码实例
2020/06/05 Python
python实现学生管理系统开发
2020/07/24 Python
Pycharm安装Qt Design快捷工具的详细教程
2020/11/18 Python
Python就将所有的英文单词首字母变成大写
2021/02/12 Python
详解CSS的border边框属性及其在CSS3中的新特性
2016/05/10 HTML / CSS
纯CSS3实现的井字棋游戏
2020/11/25 HTML / CSS
HTML5 Canvas 旋转风车绘制
2017/08/18 HTML / CSS
蛋糕店创业计划书
2014/05/06 职场文书
项目申请汇报材料
2014/08/16 职场文书
关于感恩的演讲稿200字
2014/08/26 职场文书
帮你提高开发效率的JavaScript20个技巧
2021/06/18 Javascript
低门槛开发iOS、Android、小程序应用的前端框架详解
2021/10/16 Javascript
Win7/8.1用户可以免费升级到Windows 11系统吗?
2021/11/21 数码科技
MySQL为数据表建立索引的原则详解
2022/03/03 MySQL