二月 8th, 2010

SWFUpload 讓上傳可以選個檔案

程式語言, by 弦夜.

昨天在初心者站長論壇看到討論,因為是免費上傳圖片,因此我就有了興趣。
經過討論之後,我詢問提供「服務」者,取得交換條件。
我負責撰寫系統,而我可以取得一個廣告欄位以及放置網站連結的權利。

經過簡易的搜尋後,選定 SWF Upload 這款工具。
使用起來感覺不錯,功能也已經趨於完善。

今天下午則是做了實作,情況也非常不錯。

那麼簡單了解一下 SWF Upload 吧!
下載 Sample 版本後上傳,就有多種範例可用。

不過都是範例上傳,不會有實際作用。

而我使用的是Speed Demo來做改良。
成品除了能夠儲存資料之外,還可以顯示出連結。

首先,我們要來了解一下結構(核心部份在/而Speed Demo則在/speeddemo資料夾)
index.php – 頁面主體
upload.php – 負責處理上傳
/js/handlers.js – 客制化處理
/js/swfupload.queue.js – 查尋序列的JavaScript
/js/swfupload.speed.js – 統計上傳速度的 JavaScript
/images – 上傳按鈕的資料夾

首先調整index.php的表格,我是加在右方的表格:

<tr><td>上傳的檔案:</td><td id="fileup"></td></tr>

還有加入一項客製化訊息(在custom{} 中):

fileup : document.getElementById("fileup");

之後編輯 upload.php 加入上傳檔案的功能。

<?php

 function imgtype($name){
 $arr = explode('.', $name);
 return '.'.$arr[1];        
 }

 // Work-around for setting up a session because Flash Player doesn't send the cookies
 if (isset($_POST["PHPSESSID"])) {
 session_id($_POST["PHPSESSID"]);
 }
 session_start(); 

 // The Demos don't save files 

 if (!isset($_FILES["Filedata"]) || !is_uploaded_file($_FILES["Filedata"]["tmp_name"]) || $_FILES["Filedata"]["error"] != 0) {
 echo "上傳時出現了錯誤 - 無法取得檔名。";
 } 

 $img = $_FILES["Filedata"]["tmp_name"];
 $imgname = substr(md5(time().$_FILES["Filedata"]["name"]),0,16).imgtype($_FILES["Filedata"]["name"]);
 $path = './upload/'.$imgname;
 if(@move_uploaded_file($img, $path))
 echo '<a href="http://'.$_SERVER['HTTP_HOST'].'/swfupload/beta/upload/'.$imgname.'" target="_blank">'.$_FILES['Filedata']['name'].'</a>';
 else
 echo '這張圖片上傳發生錯誤 - 無法複製檔案。';
?>

接著修改 /js/handlers.js 加入更新上傳列表的設定:
修改 fileDialogComplete() 函式初使化上傳檔案列表:

function fileDialogComplete() {

	this.startUpload();
	this.customSettings.fileup.innerHTML = "";

}

接著修改 uploadSuccess() 函式自動加入新上傳的檔案連結:

function uploadSuccess(file, serverData) {

	try {

		updateDisplay.call(this, file);
		this.customSettings.fileup.innerHTML += "" + serverData;

	} catch (ex) {

		this.debug(ex);

	}

}

最後,選取多個檔案測試上傳。
就會發現原本不會列出檔案以及上傳檔案的功能,進化了!

相關文章

Back Top

Responses to “SWFUpload 讓上傳可以選個檔案”

  1. 請問是在哪邊做下載的呢?


Blog Widget by LinkWithin