實現Uploadify


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>