Uploadify的目的是使实现尽可能地简单。在实现之前,请确保满足最低要求。
要求
- jQuery 1.4.x 或更高版本
- Flash Player 9.0.24 或更高版本
- 能够解析PHP,ASP.Net,Cold Fusion或类似的服务器端语言的服务器
实现
对于最基本的实现,请按照以下步骤进行:
1. 下载 Uploadify Zip Package. 免费的,不用担心!
2. 解压缩包并上传以下文件到一个文件夹在您的网站服务器:
- jquery.uploadify-3.1.min.js
- uploadify.php
- uploadify.swf
- uploadify.css
- uploadify-cancel.png
- check-exists.php (检查目标文件夹中存在的文件)
3.在网页上您是在实现Uploadify,所以首先要添加一个jQuery库。
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
4. 下面引用jQuery,添加一个引用到Uploadify脚本。
<script type="text/javascript" src="/jquery.uploadify-3.1.min.js"></script>
5. 在页面上,添加一个文件输入(或用一个ID的任何其他元素)。
<input type="file" name="file_upload" id="file_upload" />
6.在代码文件输入初始化Uploadify。
$(function() {
$('#file_upload').uploadify({
'swf' : 'uploadify.swf',
'uploader' : 'uploadify.php'
// Put your options here
});
});
7. 添加一个链接到Uploadify样式表中的文档头部。
<link rel="stylesheet" type="text/css" href="uploadify.css" />
8. 在服务器上创建上传的目标文件夹,并给它适当的权限(0755,如果不知道)。
9. 更新uploadify.php脚本来指向你的目标文件夹。
10.检查使Uploadify更安全,使网站更安全的文章。
最终的页面应该如下所示:
<!DOCTYPE html>
<html>
<head>
<title>My Uploadify Implementation</title>
<link rel="stylesheet" type="text/css" href="uploadify.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery.uploadify-3.1.min.js"></script>
<script type="text/javascript">
$(function() {
$('#file_upload').uploadify({
'swf' : 'uploadify.swf',
'uploader' : 'uploadify.php'
// Your options here
});
});
</script>
</head>
<body>
<input type="file" name="file_upload" id="file_upload" />
</body>
</html>
上一篇:
下一篇:
使用Uploadify方法
