`
pengjj2
  • 浏览: 138450 次
  • 性别: Icon_minigender_1
  • 来自: 无锡
社区版块
存档分类
最新评论

dwr文件上传在chrome下的问题及解决方法

 
阅读更多

今天发现dwr的文件上传在chrome下使用不了,无法只得跟踪源码,错误在源码的方法:

   beginLoader:function(batch, idname) {
        batch.iframe = batch.document.getElementById(idname);
        batch.iframe.batch = batch;

        batch.mode = batch.isPoll ? dwr.engine._ModeHtmlPoll : dwr.engine._ModeHtmlCall;
        if (batch.isPoll) dwr.engine._outstandingIFrames.push(batch.iframe);
        var request = dwr.engine.batch.constructRequest(batch, batch.httpMethod);
        if (batch.httpMethod == "GET") {
          batch.iframe.setAttribute("src", request.url);
        }
        else {
          // TODO: On firefox we can now get the values of file fields, maybe we should use this
          // See http://soakedandsoaped.com/articles/read/firefox-3-native-ajax-file-upload
          // setting enctype via the DOM does not work in IE, create the form using innerHTML instead
          var formHtml = "<form id='dwr-form' action='" + request.url + "' target='" + idname + "' style='display:none;' method='" + batch.httpMethod + "'";
          if (batch.encType) formHtml += " enctype='" + batch.encType + "'";
          formHtml += "></form>";
          var div = batch.document.createElement("div");
          div.innerHTML = formHtml;
          batch.form = div.firstChild;
          for (var prop in batch.map) {
            var value = batch.map[prop];
            if (typeof value != "function") {
              if (value.tagName && value.tagName.toLowerCase() == "input" && value.type && value.type.toLowerCase() == "file") {
                // Since we can not set the value of a file object, we must post the actual file object
                // that the user clicked browse on. We will put a clone in it's place.
                var clone = value.cloneNode(true);
                value.removeAttribute("id", prop);
                value.setAttribute("name", prop);
                value.parentNode.insertBefore(clone, value);
                value.parentNode.removeChild(value);
                batch.form.appendChild(value);
              } else {
                var formInput = batch.document.createElement("input");
                formInput.setAttribute("type", "hidden");
                formInput.setAttribute("name", prop);
                formInput.setAttribute("value", value);
                batch.form.appendChild(formInput);
              }
            }
          }
          batch.document.body.appendChild(batch.form);
          batch.form.submit();
        }
      },

 

注:红色部分就是出错的地方,这个batch取出来是个null值,导致无法进行下去

继续跟踪,确定错误的源头就是下面这个方法:

  send:function(batch) {
        if (batch.fileUpload) {
          batch.httpMethod = "POST";
          batch.encType = "multipart/form-data";
        }
        var idname = dwr.engine.transport.iframe.getId(batch);
        batch.div = document.createElement("div");
        // Add the div to the document first, otherwise IE 6 will ignore onload handler.
        document.body.appendChild(batch.div);
        batch.div.innerHTML = "<iframe src='javascript:void(0)' frameborder='0' style='width:0px;height:0px;border:0;' id='" + idname + "' name='" + idname + "' onload='dwr.engine.transport.iframe.loadingComplete(" + batch.map.batchId + ");'></iframe>";
        batch.document = document;
        dwr.engine.transport.iframe.beginLoader(batch, idname);
      },

注:红色部分就是造成appendChild方法失效的源头,造成这种情况的原因在于iframe的onload事件,而造成这个情况的是调用方法中的dwr.engine.batch.validate(batch)方法造成的,
为什么这个方法会造成chrome浏览器没有吧div节点加入到dom树中,原因我不是很清楚

  loadingComplete:function(batchId) {
        var batch = dwr.engine._batches[batchId];
        if (batch) dwr.engine.batch.validate(batch);
      },
那么解决的方法是,重写这个方法,加入对chrome浏览器的判断,解决方法:


var isChrome = (/\bchrome\b/).test(navigator.userAgent.toLowerCase());
dwr.engine.transport.iframe.loadingComplete = function(batchId) {
        var batch = dwr.engine._batches[batchId];
        if(!isChrome)
        if (batch) dwr.engine.batch.validate(batch);
      };

如果各位有更好的解决方法,或者有更好的见解,多指教

1
2
分享到:
评论
5 楼 qq361837213 2014-12-26  
更换新版dwr的jar包就行了,新版本解决了这个问题
4 楼 无象心 2014-07-29  
无象心 写道
改为这样就可以了
	  loadingComplete:function(batchId) {
	       	var isChrome = (/\bchrome\b/).test(navigator.userAgent.toLowerCase());
        var batch = dwr.engine._batches[batchId];
		if(!isChrome)
        if (batch) dwr.engine.batch.validate(batch);
      },

3 楼 无象心 2014-07-29  
	  loadingComplete:function(batchId) {
		var isChrome = (/\bchrome\b/).test(navigator.userAgent.toLowerCase());
        var batch = dwr.engine._batches[batchId];
		if(!isChrome)
        if (batch) dwr.engine.batch.validate(batch);
      },

注意逗号
2 楼 无象心 2014-07-29  
改为这样就可以了
	  loadingComplete:function(batchId) {
		var isChrome = (/\bchrome\b/).test(navigator.userAgent.toLowerCase());
        var batch = dwr.engine._batches[batchId];
		if(!isChrome)
        if (batch) dwr.engine.batch.validate(batch);
      },
1 楼 huorezixin 2012-03-21  
謝謝,找了老半天,終于在這里找到答案,非常感謝!

相关推荐

    dwr和简单的文件上传

    在这个场景中,我们将讨论如何使用DWR来实现简单的文件上传功能。 文件上传是Web应用中常见的一种用户交互方式,通常涉及到前端的HTML表单、后端的处理逻辑以及可能的文件存储策略。DWR通过提供对Java方法的远程...

    dwr3 文件上传在chrome 浏览器下不支持问题解决

    NULL 博文链接:https://adminlin.iteye.com/blog/1682171

    Spring 集成 Dwr 文件上传

    DWR在文件上传中的作用是提供了一种在浏览器端与服务器端进行实时通信的方式,用户可以在前端选择文件后,通过DWR调用服务器端的方法,将文件数据发送到服务器。DWR使用JSON或XML格式传递数据,这样可以实现实时反馈...

    利用DWR实现文件上传进度条

    DWR允许在浏览器端的JavaScript直接调用服务器上的Java方法,这样我们就可以在前端获取到文件上传的实时信息,比如已读取的字节数、总大小等,从而计算出上传进度。 在提供的代码中,可以看到两个主要的JavaScript...

    Dwr+进度条上传文件(支持多文件)

    通过以上知识点,我们可以了解到这个项目是一个完整的DWR文件上传解决方案,包含前后端的全部实现,并且具有良好的可定制性。对于希望在Web应用中实现类似功能的开发者来说,这是一个有价值的参考和起点。

    使用dwr上传文件源码

    在使用DWR上传文件之前,我们需要先配置DWR。这通常包括以下步骤: 1. 添加DWR相关的jar文件到项目的类路径。 2. 创建`dwr.xml`配置文件,声明允许浏览器访问的Java类和方法。例如,如果有一个名为`...

    dwr操作文件上传下载

    在这个场景下,"dwr操作文件上传下载"指的是利用DWR框架来处理文件的上传和下载功能。 1. **DWR简介** DWR的核心功能是提供一种简单的API,使得JavaScript可以与服务器端的Java对象进行交互。它包括了自动处理JSON...

    DWR + Servlet 实现文件上传功能

    在文件上传场景中,Servlet处理实际的文件接收,而DWR则负责在前端与后端之间传递数据并更新用户界面。 首先,我们需要在项目中引入DWR的依赖。这通常通过Maven或Gradle等构建工具来完成。在`pom.xml`或`build....

    DWR3 文件上传显示进度条

    DWR(Direct Web Remoting)是一个开源Java框架,它允许JavaScript与服务器端的Java代码进行交互,实现异步更新页面,为了解决这个问题,DWR提供了文件上传显示进度条的功能。 标题“DWR3 文件上传显示进度条”指的...

    dwr3实现的无刷新文件上传

    在本项目中,我们看到的"**dwr3实现的无刷新文件上传**"是一个简单的示例,旨在展示如何使用DWR3来实现在不刷新整个页面的情况下上传文件。这对于提升用户体验非常关键,因为它使得用户能够在不离开当前页面的情况下...

    FileUpload+DWR 多文件上传实例

    原理: FileUpload实现上传功能, UploadListener 监听上传进度, DWR push (Reverse Ajax) 进度信息并更新页面, 实现无刷新多文件上传 运行环境: Tomcat 5/6 测试通过 说明:累计上传文件不超过10M(可以更改...

    Strues2-Dwr 带进度条文件上传

    在文件上传场景中,我们需要创建一个Struts2 Action来接收文件上传请求,处理文件,然后返回响应。 2. **Struts2文件上传插件**:Struts2有一个内置的文件上传插件,使用`&lt;s:file&gt;`标签可以方便地在表单中添加文件...

    DWR文件上传功能

    ### DWR文件上传功能及其配置解析 DWR(Direct Web Remoting)是一种简化Ajax应用程序开发的技术,它使得从JavaScript调用服务器端Java方法变得如同在客户端调用本地方法一样简单。本文将深入探讨DWR配置文件`dwr....

    dwr配置文件详解 dwr.xml配置文件详解

    在本文中,我们将详细介绍dwr配置文件的结构和配置方法,并探讨它在实际应用中的作用。 dwr配置文件的结构 -------------------- dwr配置文件是一个XML文件,名称通常为dwr.xml。它的结构主要包括以下几个部分: ...

    dwr3.0 文件上传

    在描述中提到的博客链接,虽然没有提供具体内容,但通常会包含如何在DWR 3.0中实现文件上传的步骤、示例代码以及可能遇到的问题和解决方法。在实际应用中,文件上传通常涉及以下几个关键知识点: 1. **HTML表单设计...

    DWR 实现ajax上传的小实例

    1. 引入DWR库:首先需要将DWR的JAR文件添加到项目的类路径中,并在Web应用的WEB-INF目录下创建`dwr.xml`配置文件,用于配置DWR允许暴露的Java类和方法。 2. 配置Servlet:在`web.xml`中注册DWR的`DWREngineServlet`...

    extjs+dwr3.0实现文件上传

    总的来说,EXTJS+DWR3.0的组合为文件上传提供了一个强大且灵活的解决方案,它使得前端能够创建直观的用户界面,而后台则专注于处理文件上传的逻辑。通过理解这两个技术的工作原理和它们之间的协作方式,开发者可以...

    用dwr做的上传下载

    总的来说,DWR为文件上传下载提供了一个高效且用户友好的解决方案。它简化了前后端通信,使开发者能够专注于业务逻辑,而不需要关心底层网络细节。然而,需要注意的是,由于文件上传可能涉及大量数据,因此在实际...

Global site tag (gtag.js) - Google Analytics