SWFUpload(1) 超簡陋的上傳範例

Swfupload 結合flash與javascript來提供檔案上傳的功能

簡介：

• 可選擇多個檔案.
• AJAX-style uploading without a page refresh.
• 有進度顯示
• 相容於其他的 JavaScript libraries (i.e., jQuery, Prototype, etc.).
• 支援Falsh 9,Flash 10

需求：

要讓SWFUpload正常可運作，至少需要

1. 引用SWFUpload.js
2. 設定參數並產生實例
3. 處理上傳的檔案

實例：超簡單的上傳，讓你完全不知道以上傳完成

1. 下載並在 vs 2008內引用：

A. 至http://swfupload.googlecode.com/

下載最新版本的SWFUpload v2.2.0.1 Core.zip，解壓縮，找出

B. 在vs 2008內，”加入現有項目”

C. 開始在Default.aspx裡面寫東西

1.在程式碼中引用swfupload.js

<script src="swfupload.js" type="text/javascript"></script>

2. 產生一個swfupload instatnce

var swfu; // 宣告參數

//在網頁load後

window.onload = function() {

//設定一堆swfupload的參數

var settings_object = {

//處理上傳檔案的伺服器網頁

upload_url: "upload.aspx",

//flash檔案：檔案選取與傳送到伺服端

flash_url: "swfupload.swf",

//畫面上”檔案上傳按鈕”顯示的字樣

button_text: ' Attach Files',

//放置檔案上傳按鈕的容器Id (html裡要有這個 id tag)，按鈕的長度寬度

button_placeholder_id: "spanButtonPlaceholder",button_width: 140,

button_height: 30,

//當選取完要上傳的檔案，對話視窗關閉就會引發下列的事件

file dialog complete 這裡是要指定處理這事件的函式

file_dialog_complete_handler: fileDialogComplete };

//使用前面的設定，產生 SWFUpload

swfu = new SWFUpload(settings_object);

}

//對話方塊結束，對話方塊完成事件的處理函式，就呼叫SWFUpload

的startUpload( ) 方法開始上傳。

function fileDialogComplete(numFilesSelected, numFilesQueued) { swfu.startUpload(); }

3. 在網頁上產生要放置”上傳檔案按鈕”的容器：需與button_placeholder_id一致

<div>

<span id="spanButtonPlaceholder"></span>

</div>

4. 建立處理上傳檔案的伺服器端程式碼：舉例upload.aspx

protected void Page_Load(object sender, EventArgs e)

{ HttpPostedFile file = Request.Files["Filedata"];

//注意存放檔案的資料夾位置和權限

string savePath = Server.MapPath("~/upload/");

string fileName = file.FileName;

savePath += fileName;

file.SaveAs(savePath); }

D.實際執行，按Attach File，選擇好檔案，按open

去指定要存放上載檔案的資料夾裡去看，應該就有了。

看不到的原因有可能因為:

1.IIS 不接受中文路徑及檔名

2.在web.config裡，看看maxRequestLength設多大

<httpRuntime maxRequestLength="xxxx" executionTimeout="xx" />

下次就會試範比較完整的範例，是哪一天會post我也不知道。