最近在项目中遇到一个非常棘手的问题,就是在为页面设置了document.domain时,ajaxfileupload出现跨域错误,究其原因是页面的domain被设置为***.com时,而ajaxfileupload post to 的页面的域并非根域***.com,而是一个二级的类似abc.***.com的域名,因此会引发无权限的错误。
花了2天的时间终于解决这个问题。
修改后的ajaxfileupload关键代码如下:
var uploadCallback = function(isTimeout) {
var io = document.getElementById(frameId);
var execontent = function(){
try {
if (io.contentWindow) {
xml.responseText = io.contentWindow.document.body ? io.contentWindow.document.body.innerHTML: null;
xml.responseXML = io.contentWindow.document.XMLDocument ? io.contentWindow.document.XMLDocument: io.contentWindow.document;
} else if (io.contentDocument) {
xml.responseText = io.contentDocument.document.body ? io.contentDocument.document.body.innerHTML: null;
xml.responseXML = io.contentDocument.document.XMLDocument ? io.contentDocument.document.XMLDocument: io.contentDocument.document;
}
} catch(e) {
handleError(s, xml, null, e);
}
if (xml || isTimeout == "timeout") {
requestDone = true;
var status;
try {
status = isTimeout != "timeout" ? "success": "error";
// Make sure that the request was successful or notmodified
if (status != "error") {
// process the data (runs the xml through httpData regardless of callback)
var data = jQuery.uploadHttpData(xml, s.dataType);
// If a local callback was specified, fire it and pass it the data
if (s.success) s.success(data, status);
// Fire the global callback
if (s.global) jQuery.event.trigger("ajaxSuccess", [xml, s]);
} else handleError(s, xml, status);
} catch(e) {
status = "error";
handleError(s, xml, status, e);
}
// The request was completed
if (s.global) jQuery.event.trigger("ajaxComplete", [xml, s]);
// Handle the global AJAX counter
if (s.global && !--jQuery.active) jQuery.event.trigger("ajaxStop");
// Process result
if (s.complete) s.complete(xml, status);
jQuery(io).unbind();
setTimeout(function() {
try {
jQuery(io).remove();
jQuery(form).remove();
} catch(e) {
handleError(s, xml, null, e);
}
},
100);
xml = null;
}
};
var crossdomain = !jQuery.browser.msie || document.domain == location.hostname;
if(!crossdomain) {
io.src="javascript:try{"
+"document.domain=window.location.hostname.split('.').reverse().slice(0,2).reverse().join('.');"
+"parent.document.getElementById('"+ frameId +"').setAttribute('uploaded','uploaded');"
+"}catch(e){}";
var timer = window.setInterval(function(){
try{
if(io.getAttribute("uploaded") == "uploaded") {
crossdomain = true;
window.clearInterval(timer);
execontent();
}
}catch(e){}
},1000);
} else {
execontent();
}
};
解决问题的思路是,如果是IE浏览器并且为当前页面设置了document.domain,那么在创建的iframe提交后,使用iframe的src属性执行一段js代码,从而改变该iframe页面的domain属性,达到同域的目的。
http://www.qingniao.it/index.php?title=Jquery%E6%8F%92%E4%BB%B6ajaxfileupload%E7%9A%84%E4%B8%80%E6%AC%A1%E8%B7%A8%E5%9F%9F%E4%BD%93%E9%AA%8C
分享到:
相关推荐
综上所述,jQuery插件AjaxFileUpload提供了一种便捷的文件异步上传解决方案,通过合理的配置和适当的服务器端处理,可以构建高效、友好的文件上传功能。在实际应用中,可以根据需求进行定制和扩展,提升用户体验。
本文主要介绍如何在JSP项目中使用`ajaxFileUpload.js`插件解决跨域文件上传的问题,并提供了一个具体的示例代码,包括前端JS部分以及后端JSP和Struts2相关的处理逻辑。通过这个例子,我们可以深入了解整个跨域文件...
AjaxFileUpload是jQuery的一个插件,专门用于实现异步文件上传。它利用Ajax技术实现了在不刷新页面的情况下上传文件,提高了用户体验。这个插件的核心在于它可以监听文件选择事件,然后在后台上传文件,同时可以显示...
**AjaxFileUpload.js** 是一个基于 jQuery 的异步文件上传插件,它允许用户在不刷新页面的情况下上传文件,提供了一种便捷、高效的文件交互体验。这个插件广泛应用于网页应用,尤其是那些需要用户交互频繁上传文件的...
- ajaxfileupload.js是一个基于jQuery的插件,专门用于实现文件的异步上传。它的优点是实现简单,可以不用页面刷新即可上传文件,并向用户反馈上传状态。 2. 文件异步上传的技术背景和优势: - 在传统的文件上传...
`jQuery ajaxFileUpload.js` 是一个用于处理文件上传的 jQuery 插件,它允许用户在不刷新页面的情况下实现异步文件上传。这个插件在现代浏览器中通常运行良好,但像许多其他JavaScript库一样,它可能在较老的浏览器...
本文将详细介绍如何使用JQuery的ajaxfileupload插件实现异步文件上传,这在提升用户体验和处理大文件时尤其有用。ajaxfileupload是jQuery的一个扩展,它允许我们在不刷新页面的情况下完成文件的上传操作,使得交互...
jQuery的ajaxFileUpload插件是一种实现异步文件上传功能的工具,它允许用户在不刷新页面的情况下上传文件,提供了一种高效且用户友好的交互体验。以下是对该插件的详细说明: 首先,使用ajaxFileUpload插件的基本...
ASP.NET结合jQuery实现无刷新文件上传是一种常见的前端与后端交互技术,主要用于提高用户体验,避免传统文件上传时页面刷新导致的中断。在这个场景中,我们使用了`jquery.ajaxfileupload.js`这个插件,它利用了...
首先,`jQuery ajaxFileUpload` 插件允许用户在不刷新页面的情况下上传文件,提供了一种友好的用户体验。它的主要优点包括进度条显示、错误处理以及对多文件上传的支持。要使用这个插件,你需要在HTML页面中引入...
在JSP页面中,可以通过jQuery的$.ajaxFileUpload()方法调用这个插件。该方法的参数包括URL(服务器接收上传文件的地址)、secureuri(是否使用安全协议)、fileElementId(输入文件元素的ID)、dataType(返回数据...
为了解决这个问题,Ajax技术被广泛应用于实现异步文件上传,其中,`ajaxfileupload.js`是一个常用的JavaScript插件,它允许开发者在不刷新页面的情况下实现文件的上传功能。 ### 一、Ajaxfileupload.js原理 ...
为了解决这个问题,`ajaxFileUpload`应运而生,这是一个基于jQuery的异步文件上传插件。它允许用户在不刷新页面的情况下实现文件的上传,提高了交互性和用户体验。 ### 一、异步上传的优势 1. **无需页面刷新**:...
ajaxfileupload.js是jQuery的一个插件,专门用于处理文件的异步上传。这个插件使得在不刷新整个页面的情况下,用户可以上传文件,提高用户体验,尤其是在需要多次上传或大文件上传时。 使用ajaxfileupload.js的步骤...
`AjaxFileUpload`是一个基于jQuery的插件,专门用于实现异步文件上传功能,它极大地优化了用户体验,避免了传统表单提交带来的页面刷新问题。这篇内容将详细介绍`AjaxFileUpload`插件的核心原理、使用方法以及常见...
AjaxFileUpload是基于jQuery的一个插件,它利用了AJAX技术来实现文件的后台异步上传。AJAX(Asynchronous JavaScript and XML)的核心在于通过JavaScript与XMLHttpRequest对象进行通信,使得前端与后台的数据交换...
它是一个基于jQuery的插件,通过Ajax技术实现实时文件上传,特别适合处理图片文件。这个插件的主要优点是能够处理文件的上传过程,包括进度显示、错误处理和预览功能,同时保持页面的交互性。 **一、引入...
$.ajaxFileUpload 是一个jQuery插件,它提供了异步文件上传的能力,使得用户无需刷新页面即可完成文件提交,提高了用户体验。 $.ajaxFileUpload 的核心在于使用Ajax技术,它允许在后台与服务器交换数据并更新部分...