`

Jquery插件ajaxfileupload的一次跨域体验

阅读更多
最近在项目中遇到一个非常棘手的问题,就是在为页面设置了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

    综上所述,jQuery插件AjaxFileUpload提供了一种便捷的文件异步上传解决方案,通过合理的配置和适当的服务器端处理,可以构建高效、友好的文件上传功能。在实际应用中,可以根据需求进行定制和扩展,提升用户体验。

    JSP使用ajaxFileUpload.js实现跨域问题.docx

    本文主要介绍如何在JSP项目中使用`ajaxFileUpload.js`插件解决跨域文件上传的问题,并提供了一个具体的示例代码,包括前端JS部分以及后端JSP和Struts2相关的处理逻辑。通过这个例子,我们可以深入了解整个跨域文件...

    jquery+ajaxfileupload+html文件上传

    AjaxFileUpload是jQuery的一个插件,专门用于实现异步文件上传。它利用Ajax技术实现了在不刷新页面的情况下上传文件,提高了用户体验。这个插件的核心在于它可以监听文件选择事件,然后在后台上传文件,同时可以显示...

    ajaxfileupload.js 异步上传jquery插件

    **AjaxFileUpload.js** 是一个基于 jQuery 的异步文件上传插件,它允许用户在不刷新页面的情况下上传文件,提供了一种便捷、高效的文件交互体验。这个插件广泛应用于网页应用,尤其是那些需要用户交互频繁上传文件的...

    JQuery插件ajaxfileupload.js异步上传文件实例

    - ajaxfileupload.js是一个基于jQuery的插件,专门用于实现文件的异步上传。它的优点是实现简单,可以不用页面刷新即可上传文件,并向用户反馈上传状态。 2. 文件异步上传的技术背景和优势: - 在传统的文件上传...

    jQuery ajaxFileUpload.js 插件 ie9 下bug 修复

    `jQuery ajaxFileUpload.js` 是一个用于处理文件上传的 jQuery 插件,它允许用户在不刷新页面的情况下实现异步文件上传。这个插件在现代浏览器中通常运行良好,但像许多其他JavaScript库一样,它可能在较老的浏览器...

    WEB文件上传之JQuery ajaxfileupload插件使用(二)

    本文将详细介绍如何使用JQuery的ajaxfileupload插件实现异步文件上传,这在提升用户体验和处理大文件时尤其有用。ajaxfileupload是jQuery的一个扩展,它允许我们在不刷新页面的情况下完成文件的上传操作,使得交互...

    jQuery异步上传文件插件ajaxFileUpload详细介绍

    jQuery的ajaxFileUpload插件是一种实现异步文件上传功能的工具,它允许用户在不刷新页面的情况下上传文件,提供了一种高效且用户友好的交互体验。以下是对该插件的详细说明: 首先,使用ajaxFileUpload插件的基本...

    ASP.NET使用jquery插件无刷新上传文件

    ASP.NET结合jQuery实现无刷新文件上传是一种常见的前端与后端交互技术,主要用于提高用户体验,避免传统文件上传时页面刷新导致的中断。在这个场景中,我们使用了`jquery.ajaxfileupload.js`这个插件,它利用了...

    使用jQuery ajaxFileUpload+servlet实现文件上传

    首先,`jQuery ajaxFileUpload` 插件允许用户在不刷新页面的情况下上传文件,提供了一种友好的用户体验。它的主要优点包括进度条显示、错误处理以及对多文件上传的支持。要使用这个插件,你需要在HTML页面中引入...

    JSP使用ajaxFileUpload.js实现跨域问题

    在JSP页面中,可以通过jQuery的$.ajaxFileUpload()方法调用这个插件。该方法的参数包括URL(服务器接收上传文件的地址)、secureuri(是否使用安全协议)、fileElementId(输入文件元素的ID)、dataType(返回数据...

    ajax上传文件插件ajaxfileupload.js非压缩版

    为了解决这个问题,Ajax技术被广泛应用于实现异步文件上传,其中,`ajaxfileupload.js`是一个常用的JavaScript插件,它允许开发者在不刷新页面的情况下实现文件的上传功能。 ### 一、Ajaxfileupload.js原理 ...

    ajaxfileupload

    为了解决这个问题,`ajaxFileUpload`应运而生,这是一个基于jQuery的异步文件上传插件。它允许用户在不刷新页面的情况下实现文件的上传,提高了交互性和用户体验。 ### 一、异步上传的优势 1. **无需页面刷新**:...

    ASP.NET jquery.ajaxfileupload.js文件上传实例

    ajaxfileupload.js是jQuery的一个插件,专门用于处理文件的异步上传。这个插件使得在不刷新整个页面的情况下,用户可以上传文件,提高用户体验,尤其是在需要多次上传或大文件上传时。 使用ajaxfileupload.js的步骤...

    AjaxFileUpload 文件下载

    `AjaxFileUpload`是一个基于jQuery的插件,专门用于实现异步文件上传功能,它极大地优化了用户体验,避免了传统表单提交带来的页面刷新问题。这篇内容将详细介绍`AjaxFileUpload`插件的核心原理、使用方法以及常见...

    ajaxfileupload实现异步式上传文件

    AjaxFileUpload是基于jQuery的一个插件,它利用了AJAX技术来实现文件的后台异步上传。AJAX(Asynchronous JavaScript and XML)的核心在于通过JavaScript与XMLHttpRequest对象进行通信,使得前端与后台的数据交换...

    ajaxFileUpload上传图片预览总结

    它是一个基于jQuery的插件,通过Ajax技术实现实时文件上传,特别适合处理图片文件。这个插件的主要优点是能够处理文件的上传过程,包括进度显示、错误处理和预览功能,同时保持页面的交互性。 **一、引入...

    $.ajaxFileUpload 文件上传

    $.ajaxFileUpload 是一个jQuery插件,它提供了异步文件上传的能力,使得用户无需刷新页面即可完成文件提交,提高了用户体验。 $.ajaxFileUpload 的核心在于使用Ajax技术,它允许在后台与服务器交换数据并更新部分...

Global site tag (gtag.js) - Google Analytics