最近在处理后台数据时需要实现文件上传.考虑到对浏览器适配上采用[url=http://fineuploader.com/]Fine Uploader[/url]. Fine Uploader 采用ajax方式实现对文件上传.同时在浏览器中直接支持文件拖拽[对浏览器版本有要求类似IE版本必须是9或是更高的IE10].在不同浏览器中提供统一用户体验.该组件基本覆盖目前所有主流浏览器.同时没有任何第三方组件依赖.相当Clear.在服务器端已经覆盖支持了ASP.NET/ColdFusion/Java/Node.js/Perl/PHP/Python. 对上传细节类似限制文件大小，文件类型，文件上传的数量等通过统一接口以暴露选项方式操作. 编程素材网下载地址 [url=http://www.1sucai.cn/codes/70040.html]http://www.1sucai.cn/codes/70040.html[/url] 看到[url=https://github.com/valums/file-uploader]Github 上Fine Uploader[/url] 按照官方的说法. Fine Uploader前身是Ajax Upload. 新版本Fine Uploader主要添加一些新特性.从1.0版本发布的Realse Note来看.二者最大的区别在于.Fine Uploder不在基于Jquery组件.而某些细节处理也更加统一严格.类似返回值全部统一为Json格式.对后台服务器操作和前端Dom对象一些操作Code全部集中Js Script脚本文件中.这样集成使Fine Uploader组件使用非常简单.只需要添加一个CSS+JavaScript文件即可实现文件上传.大大简化用户引用和操作组件难度. Fine Uploader特点如下: Fine Uploader Features: A：支持文件上传进度显示. B：文件拖拽浏览器上传方式 C：Ajax页面无刷新. D：多文件上传. F：跨浏览器. E：跨后台服务器端语言. 在Git Hub上Fine Uploader上下载打包源码,在Php Designer 8中打开其源码可以看到其源码结构如下: [img]http://files.jb51.net/file_images/article/201301/2013010617145435.png[/img] 在根目录中可以看到Client客户端调用需要使用文件.Server目录则是对应不同语言Perl/Php/Asp.net[VB]等版本实现.test目录则有包含一个完整本地Sample Demo.可供参考. 如何快速构建一个简单Demo? 其实官方在[url=http://fineuploader.com/fine-uploader-basic-demo.html]Basic-Demo-Page[/url]上已经给出一个简单的演示.这里基于[url=http://twitter.github.com/bootstrap/]Bootstrap[/url]方式构建. 首先新建一个Html空白页面.命名FineUploderDemo.html.添加如下CSS引用如下: 这两个文件时必须引用的.fineuploader.css则是对应下载Fine Uploder源码Client目录下.fineuploder.css 提供JS脚本中所需的CSS样式，主要包括按钮的样式、进度显示的样式以及上传结果的样式.添加JavaScript文件引用如下: 其中uploder.js和uploder.basic.js则是前端的所有上传功能都在该脚本中实现.必须引用. 同时添加client目录下processing和loading两张进度显示所需要的动态图片.该图片都在fineuploder.css文件调用. 在body添加如下Code:

[url=http://www.php.net/manual/en/ini.list.php]配置说明[/url] 修改php.ini配置文件. 至此整个Fine Uploader配置流程已经全部完成.点击选择文件时.会如下效果: [img]http://files.jb51.net/file_images/article/201301/2013010617145437.png[/img] 提示上传成功.当然更多的请参考[url=http://fineuploader.com/fine-uploader-demo.html]官方给出演示demo[/url].如上从Fine Uploader源码角度分析其实现原理. 参考链接如下: [url=http://fineuploader.com/]Fine Uploader[/url] [url=http://fineuploader.com/fine-uploader-basic-demo.html]Fine Uploader Basic Upload Demo[/url] [url=https://github.com/valums/file-uploader]Git Hub Fine Uploader Document and Code Sample[/url]