Web上传文件是一个很常用的功能,试用过不少上传组件,要么是每次只能选择一个文件,要么是选择了文件后不能取消,直接上传,要么就是对文件、队列等限制支持不佳。总之仅仅是依靠JavaScript的实现不太好用,Flash+JavaScript的方式似乎对于这种上传需求满足得更好。Uploadify是JQuery的一个上传插件,实现的效果非常不错,进度显示和速度显示都可以!
Uploadify是按尽可能易用的出发点设计的。在使用前,先看一下最低要求:
要求:
jQuery 1.4.x 或更高
Flash Player 9.0.24 或更高
服务器端支持:PHP, , Cold Fusion, 或类似服务器端语言
使用步骤:
1.下载免费的Uploadify包
2. Unzip并将下列文件上传到web站点:
jquery.uploadify-3.1.min.js
uploadify.php
uploadify.swf
uploadify.css
uploadify-cancel.png
check-exists.php (检测目标文件夹中文件是否已存在)
3.在使用Uploadify的页面,添加jQuery库的引用
4.在jQuery引用的下面,添加Uploadify的引用
5.在页面中,添加文件输入file input元素
6.初始化file input的Uploadify
$(function() {
$('#file_upload').uploadify({
'swf' : 'uploadify.swf',
'uploader' : 'uploadify.php'
// Put your options here
});
});
7.在文档头部,添加Uploadify样式表的链接
8.在服务器上创建上传目录并赋予正确的写权限(0755)
9.修改uploadify.php中的脚本,指向上传目录。
10.检测一下你的站点的上传安全。
经过上面的十个步骤,轻松搞定了uploadify,下面是参考代码:
My Uploadify Implementation
$(function() {
$('#file_upload').uploadify({
'swf' : 'uploadify.swf',
'uploader' : 'uploadify.php'
// Your options here
});
});