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方法