解决jQuery uploadify在非IE核心浏览器下无法上传

前端之家收集整理的这篇文章主要介绍了解决jQuery uploadify在非IE核心浏览器下无法上传前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

一、jquery uploadify自我介绍:

(1)、大家好,我是jquery插件大家族中负责实现异步上传插件,我不是唯一,只是较好用的一款。

(2)、我的功能

  支持文件或多文件上传,可控制并发上传文件

    在服务器端支持各种语言与之配合使用,诸如PHP,.NET,Java……

    通过参数可配置上传文件类型及大小限制

    通过参数可配置是否选择文件自动上传

    易于扩展,可控制每一步骤的回调函数(onSelect,onCancel……)

    通过接口参数和CSS控制外观

    Uploadify主页地址: 在该页面你可以了解到关于他的更多内容。

(3)、我的用法:

去baidu.com,google.com search search,很多。

二、firefox下我出故障了,是我的问题吗?

jquery uploadify在ie下可以正常上传,在实现异步上传的时候,每一个文件在上传时都会提交给服务器一个请求。每个请求都需要安全验证,session和cookie的校验。是的,就是这样。由于jquery uploadify是借助flash来实现上传的,每一次向后台发送数据流请求时,ie会自动把本地cookie存储捆绑在一起发送给服务器。但firefox、chrome不会这样做,他们会认为这样不安全。哈,这就是原因。

找到原因了,在让我们来明白两个概念:

(1)、session:

Session又称为会话状态,是Web系统中最常用的状态,用于维护和当前浏览器实例相关的一些信息。举个例子来说,我们可以把已登录用户的用户名放在Session中,这样就能通过判断Session中的某个Key来判断用户是否登录,如果登录的话用户名又是多少。

我们知道,Session对于每一个客户端(或者说浏览器实例)是“人手一份”,用户首次与Web服务器建立连接的时候,服务器会给用户分发一个 SessionID作为标识。SessionID是一个由24个字符组成的随机字符串。用户每次提交页面,浏览器都会把这个SessionID包含在 HTTP头中提交给Web服务器,这样Web服务器就能区分当前请求页面的是哪一个客户端。那么,ASP.NET 2.0提供了哪些存储SessionID的模式呢!

(2)、Cookie,有时也用其复数形式Cookies,指某些网站为了辨别用户身份、进行session跟踪而储存在用户本地终端上的数据(通常经过加密)。

三、解决方案

1.asp.net环境下

在Global.asax文件中,编写如下代码:

//此处是身份验证 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);//重新设定请求中的cookie值,将服务器端的session值赋值给它
}

/*---------------------------Aspx页面端代码---------------------------------*/

this.hfAspSessID.Value = Session.SessionID;

把session值及身份验证值保存到客户端控件中,然后你就可以通过js获取这两个值,然后传给下面的插件js初始化程序。

(之所以选择将session值放入到控件中存储,也是怕客户端禁用cookie的考虑。)

/*-----------------------------以下是js代码----------------------------------*/

...........//更多配置项,您可以查看官方配置文档

在插件初始化的时候,把本地记录下来的session值,以及身份验证值传给初始化方法,进行参数赋值,这样,每次异步请求上传文件的时候,相应的 session值就包含在请求文件中了。

2.C#环境下

以上是asp.net下的解决方法,那么C#中应该如何处理呢?

我是这样解决的,这样所有上传文件的代码都不需要修改,改动量最小,但是有安全隐患:

我们的系统是ASP.NET MVC的,虽说通过加密的方式可以让用户看不到敏感信息,但恶意用户不需要把敏感信息解密出来就可绕过系统验证。

验证信息不能直接写前台,可以用ajax从后台获取验证信息,然后传给flash,然后在拦截器中验证。

修改后:

JS代码:

ajax请求后台获取用户名,传给flash

4 * 1024 * 1024) { alert('超过文件上传大小限制(4M)!'); return; } alert('上传失败'); } }); //end uploadify } }); }); //end $

拦截器中代码:

3.jsp版解决方法

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;

<%
String syscontext = request.getContextPath();

%>

<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"

  • request.getServerName() + ":" + request.getServerPort()
  • path;

String sessionid = session.getId();

%>

<script type="text/javascript">
//用来计算上传成功的图片数
var successCount = 1;

$(function() {
var uploadUrl = '<%=basePath%>/uploadresource.do;jsessionid=<%=sessionid%>?Func=uploadwallpaper2Dfs';

var swfUrl2 = "<%=basePath%>/webcontent/resourceManage/wallpapaer/uploadify/uploadify.swf";

$('#file_upload').uploadify({
'swf' : swfUrl2,'uploader' : uploadUrl,// Put your options here
'removeCompleted' : false,'auto' : false,'method' : 'post','onUploadSuccess' : function(file,response) {
add2SuccessTable(data);
}
});
});

/**

  • 将成功上传的图片展示出来
    */
    function add2SuccessTable(data){
    var jsonObj = JSON.parse(data);
    for(var i =0; i < jsonObj.length; i++){
    var oneObj = jsonObj[i];
    var fileName = oneObj.fileName;
    var imgUrl = oneObj.imgUrl;

     var td_FileName = "<td&gt;"+fileName+"</td&gt;";
     var td_imgUrl = "<td&gt;<img width='150' src='"+imgUrl+"'></img></td&gt;";
     var oper = "<td&gt;<input type='button' value='删除' onclick='deleteRow("+successCount+")'/></td&gt;";
     var tr = "<tr id='row"+successCount+"'>"+successCount+td_FileName+td_imgUrl+oper+"</tr&gt;";
    
     $("#successTable").append(tr);
    
     successCount++;

    }

}

function deleteRow(i){
$("#row"+i).empty();
$("#row"+i).remove();
}

Insert title here

上传

文件名图片

总结

简单的说,最终的解决办法就是可以在每个引用的文件后面加个随机数,让它每次请求都带个参数,该问题则自动解决

原文链接:https://www.f2er.com/jquery/53113.html

猜你在找的jQuery相关文章