Uploadify/uploadifive上传(中文文档)
Uploadify是一款基于JQuery的优秀的文件/图片上传的插件,有基于Flash和HTML5两种版本。
Uploadify/uploadifive主要特点有:
1. 多文件上传
2. 个性化设置
3. 上传进度条显示
4. 拖拽上传(HTML5版本)
http://www.uploadify.com/documentation/
案例讲解地址;
部署
在部署一个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。
1 2.引用jquery库 2 <script type="text/javascript" src="/uploadify/jquery.min.js"></script> 3 3.引用uploadify脚本 4 <script type="text/javascript" src="/uploadify /jquery.uploadify.min.js"></script> 5 4.引用uploadify样式表 6 <link rel="stylesheet" type="text/css" href="uploadify.css" /> 7 5. 声明一个普通的html文件上传控件,并指定id 8 <input id="file_upload" name="file_upload" type="file" multiple="true"> 9 6. 将声明的普通上传控件与Uploadify插件绑定,并初始化 10 <script type="text/javascript"> 11 $(function() { 12 $(‘#file_upload‘).uploadify({ 13 ‘swf‘ : ‘/uploadify uploadify.swf‘, //指定上传控件的主 14 15 体文件 16 ‘uploader‘ : ‘/uploadify uploadify.php‘ //指定服务器端上传处 17 18 理文件 19 //其他配置项 20 }); 21 }); 22 </script>