欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-03-05 12:27:29
...

今天发现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);
      };

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