commons-fileupload结合XMLHttpRequest实现有进度条上传功能
之前找了很多关于更新文件上传进度条的资料，其大部分都是不断向后台获取数据实现更新的！
现在，我们使用commons-fileupload结合XMLHttpRequest实现，客户端Ajax更新上传进度，免去不断向服务器端获取数据，而影响效率。

这里使用Ext.MessageBox，实现最终效果


首先是通过使用Extjs官方提供的Ext.ux.form.FileUploadField结合commons-fileupload实现文件上传，我以前做了一篇关于实现这个功能的详细说明，这里就重复。如有需要，请看http://jayklin.iteye.com/blog/841602

在这一篇中，主要想探讨一下如何commons-fileupload和XMLHttpRequest协同工作，实现上传进度显示。

据我所知，XMLHttpRequest.send()方法只能向服务端发送文本信息，而对于二进制文件，需要做编码处理（没有深入研究！）。所以，如果直接用这个方法实现上传，可能需要的工作量会很大。但我们可以利用它实现客户端的上传进度条的更新！

在XMLHttpRequest中，有个onreadystatechange事件句柄。每次 readyState 属性改变的时候调用的事件句柄函数。当 readyState 为 3 时，它也可能调用多次。ps：readyState有5个状态：
上面是定义一个upload方法。当执行send()方法后，readyState变为3。发送文件过程中不断调用xhr.upload.onprogress
而在Ext.form.FormPanel的beforeaction这个事件响应的时候，执行以下代码：

var xhrhandler = new uploadprogress.UploadHandlerXhr({            action: "do-nothing.htm",                        onProgress: function(id, fileName, loaded, total){                // is only called for xhr upload                this._updateProgress(id, loaded, total);                                },            onComplete: function(id, fileName, result){            },            _updateProgress: function(id, loaded, total){                if(loaded == total){                    Ext.MessageBox.hide();                }else{                    var i = loaded/total;                    Ext.MessageBox.updateProgress(i, Math.round(100*i)+'% completed from '+uploadprogress.formatSize(total));                }    }                });                            var id = xhrhandler.add(files[0]);                xhrhandler.upload(id,{});

以上便能实现在客户端更新上传文件进度。附件fileuploadprogress源文件。