ExtJs学习篇---使用Extjs 加DWR 实现文件上传

当使用DWR调用Extjs的fileuploadfield 来做文件上传时，发现第一次调用可以正常执行，但不刷新页面的情况下，第二次调用就会出错。研究了DWR的源码，发现，每次调用DWR时，如果DWR发现您传的参数是个file类型的Input， dwr就会新建一个form，并且把你要上传的file input拿到他的form里去提交。同时，为了不影响页面，dwr会先把你传给他的file input 克隆一份，放在你原来的位置。正常情况下，这是没有问题的，可如果使用EXT的fileuploadfield, 问题就来了，ext的fileuploadfield实际上是一个普通的text input field和一个按钮，盖住了一个真正的fileinput, 这个真正的file input 会存在 fileuploadfield的fileInput域里，当dwr做了偷天换日的操作后，Ext就找不到自己的 fileInput了。

 

说了半天怎么解决呢？简单，这个事情不要让dwr做，我们自己来做，就可以了，找到dwr的engine.js, （在dwr.jar 的 org\directwebremoting\ 下面），把1808行的

var clone =value.cloneNode(true);

和 1812行的

value.parentNode.insertBefore(clone,value);

 

删掉（或者注释掉），重新打包的dwr.jar里

 

在每次调用文件上传的函数前，自己做相应的处理。类似以下的例子：

 

var  filefield = form.findField(‘myuploadfield’);

var  fileInputDom =filefield.fileInput.dom;

filefield.fileInput.dom= fileInputDom.cloneNode(true);

fileInputDom.parentNode.insertBefore(filefield.fileInput.dom,fileInputDom);

 

myfileService.uploadFile(fileInputDom, otherParams,callBackFunc(){ alert(‘upload ok’)});