Uploadify
是一款基于
JQuery
的优秀的文件/图片上传的插件,有基于Flash和HTML5两种版本。
Uploadify/uploadifive主要特点有:
1. 多文件上传
2. 个性化设置
3. 上传进度条显示
Uploadify/uploadifive主要特点有:
1. 多文件上传
2. 个性化设置
3. 上传进度条显示
4. 拖拽上传(HTML5版本)
部署
在部署一个Uploadify实例前,请确保满足最低要求:
- 1.jQuery 1.4.x 或更高版本
- 2.Flash Player 9.0.24 或更高版本
- 3.支持PHP, ASP.Net, Cold Fusion的服务器环境(官方默认支持PHP)
下载最新版本的uploadify,解压到服务器根目录下的uploadify文件夹中,你可以看到以下文件:
- Change Log.txt(uploadify的升级日志,部署时删掉)
- check-exists.php(用来检查上传目标文件夹里是否存在相同文件)
- index.php(官方实例)
- jquery.uploadify.js(上传插件)
- jquery.uploadify.min.js(压缩版的上传插件,部署时使用)
- license.txt(许可证文件,部署时删掉)
- uploadify.css(上传控件样式表)
- uploadify.php(上传数据处理文件)
- uploadify.swf(flash基础文件)
- uploadify-cancel.png(取消按钮图片)
在官方提供的实例文件中,是引用的jquery官方网站上的jquery库,有需要的朋友还需要本地引用jquery库。
下面我们看一看如何在你的项目上部署uploadify:
1.我们假定上传控件部署在网站根目录下的upload.
php中,uploadify文件夹位于网站根目录中,上传的文件保存在根目录下的upload文件夹中,uploadify文件夹中包含check-exists.php、jquery.min.js 、jquery.uploadify.min.js、uploadify.css、uploadify.swf、uploadify-cancel.png。2.引用jquery库
- <script type="text/javascript" src="/uploadify/jquery.min.js"></script>
3.引用uploadify脚本
- <script type="text/javascript" src="/uploadify /jquery.uploadify.min.js"></script>
4.引用uploadify样式表
- <link rel="stylesheet" type="text/css" href="uploadify.css" />
5. 声明一个普通的html文件上传控件,并指定id
- <input id="file_upload" name="file_upload" type="file" multiple="true">
6. 将声明的普通上传控件与Uploadify插件绑定,并初始化
- <script type="text/javascript">
- $(function() {
- $('#file_upload').uploadify({
- 'swf' : '/uploadify uploadify.swf', //指定上传控件的主体文件
- 'uploader' : '/uploadify uploadify.php' //指定服务器端上传处理文件
- //其他配置项
- });
- });
- </script>