jsupload实现js上传文件，并显示文件上传进度

　　在传统的文件上传过程中，要想达到更好的客户体验一般是选择Flash来实现的。但是随着 Web 2.0 应用技术的不断发展，JavaScript 正在扮演越来越重要的角色，现在已经可以用JavaScript来实现访问本地文件，并且把上传进度信息反馈给用户。这一切都因为 File API 的出现而得到了彻底的改变。有关File API的介绍可以参考：http://www.ibm.com/developerworks/cn/web/1101_hanbf_fileupload/。

　　本文对上传文件功能做了兼容，支持目前所有主流浏览器包括ie6+，firefox，chrome，safari，opera等等，对于支持File API的浏览器会自动调用File API接口实现上传文件信息预览，上传信息实时反馈给用户。服务器端由Java实现，用了Apache的上传组件commons-fileupload-1.2.1.jar实现上传功能和上传进度监听。

　　目前该功能只支持单文件上传，页面布局结构以及样式来自http://www.matlus.com/html5-file-upload-with-progress/，由于有部分css3样式所以在ie下不能达到预期的效果，该地址有更详细的使用File API 来实现文件上传信息预览及上传文件进度显示，但是该地址的介绍只适用于支持File API的浏览器。

　　下面是几种浏览器下上传文件效果：

　　1.ie6

　　　　　　预览效果：

　　　　

　　　　　　上传进度：

　　   

　　　　　　上传完成：

　　　　

　　2.ie8

　　　　预览效果：

　　　 　

　　　　上传进度：

　　　

　　　　上传完成：

　　　　

　　具体实现：

　　　　上传文件信息预览、上传以及上传进度显示的实现封装在JsUpload类里面，初始化时候需要创建JsUpload的一个实例，同时传递必须的参数。通过页面File控件的change事件来处理上传文件信息的预览，在change事件的回调函数里面调用JsUpload的实例方法change同时为这个方法传递一个回调函数作为上传文件信息显示的处理，该回调函数会接收JsUpload实例方法change传递回来的数据。上传方法的实现是通过JsUpload的实例方法upload来实现的，上传进度的实现主要是通过Ajax每隔一定的时间去服务器端请求获取上传文件大小来刷新页面的进度数据。

　　最后附上源码，有感兴趣的可以一起讨论，学习，源码地址：http://115.com/file/bep0l17x 。