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);
????? };
如果各位有更好的解决方法,或者有更好的见解,多指教