解决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 相关文章推荐
js+xml生成级联下拉框代码
Jul 24 Javascript
浅谈javascript六种数据类型以及特殊注意点
Dec 20 Javascript
js中array的sort()方法使用介绍
Feb 20 Javascript
jQuery简单实现图片预加载
Apr 20 Javascript
探讨JavaScript标签位置的存放与功能有无关系
Jan 15 Javascript
jQuery实时显示鼠标指针位置和键盘ASCII码
Mar 28 Javascript
JQuery Dialog对话框 不能通过Esc关闭的原因分析及解决办法
Jan 18 Javascript
vue实现pdf导出解决生成canvas模糊等问题(推荐)
Oct 18 Javascript
详解Vue 动态组件与全局事件绑定总结
Nov 11 Javascript
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
Jan 09 jQuery
深入koa-bodyparser原理解析
Jan 16 Javascript
关于vue2强制刷新,解决页面不会重新渲染的问题
Oct 29 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为SHOPEX增加日志功能代码
2010/07/02 PHP
php数组函数序列之sort() 对数组的元素值进行升序排序
2011/11/02 PHP
php简单实现多字节字符串翻转的方法
2015/03/31 PHP
Symfony2实现在doctrine中内置数据的方法
2016/02/05 PHP
PHP实现的贪婪算法实例
2017/10/17 PHP
js 函数的执行环境和作用域链的深入解析
2009/11/01 Javascript
JavaScript 类的定义和引用 JavaScript高级培训 自定义对象
2010/04/27 Javascript
Javascript遍历Html Table示例(包括内容和属性值)
2014/07/08 Javascript
JQuery遍历DOM节点的方法
2015/06/11 Javascript
jquery的幻灯片图片切换效果代码分享
2015/09/07 Javascript
canvas实现流星雨的背景效果
2017/01/13 Javascript
js绑定事件和解绑事件
2017/04/27 Javascript
NodeJs的fs读写删除移动监听
2017/04/28 NodeJs
js实现放大镜特效
2017/05/18 Javascript
Angularjs自定义指令Directive详解
2017/05/27 Javascript
详解Angular2响应式表单
2017/06/14 Javascript
js prototype和__proto__的关系是什么
2019/08/23 Javascript
js将URL网址转为16进制加密与解密函数
2020/03/04 Javascript
[56:17]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第三场 8.22
2019/09/05 DOTA
pycharm 使用心得(三)Hello world!
2014/06/05 Python
Python基于pygame实现图片代替鼠标移动效果
2015/11/11 Python
深入理解python多进程编程
2016/06/12 Python
python 以16进制打印输出的方法
2018/07/09 Python
python查找重复图片并删除(图片去重)
2019/07/16 Python
python Elasticsearch索引建立和数据的上传详解
2019/08/04 Python
python 并发编程 阻塞IO模型原理解析
2019/08/20 Python
Tensorflow中k.gradients()和tf.stop_gradient()用法说明
2020/06/10 Python
Python Mock模块原理及使用方法详解
2020/07/07 Python
中国一家专注拼团的社交购物网站:拼多多
2018/06/13 全球购物
西安交大自主招生自荐信
2014/01/27 职场文书
乡镇总工会学雷锋活动总结
2014/03/01 职场文书
电大毕业生自我鉴定
2014/04/10 职场文书
应聘销售主管的求职信
2014/04/26 职场文书
旅游活动总结
2014/08/27 职场文书
教师个人事迹材料
2014/12/17 职场文书
vue中使用mockjs配置和使用方式
2022/04/06 Vue.js