SWFUpload
Saturday, September 27th, 2008SWFUpload 是一個可以同時上傳檔個檔案的flash+javascript 的小程式, 就需要 HTML 及 ServerSide 做一些設定, 以下用 PHP 作示範:
HTML
在<head> … </head>內 加入 以下的 javascript 內容
<script type="text/javascript">
// 上傳之前執行的, 需要return true 代表可以繼續上傳
var uploadStart = function(obj){
return true;
}
// 執行於上傳出現錯誤
var uploadError = function(obj, code, message){
document.getElementById('message').innerHTML+='Upload Failure:'+code+':
\n'+message+'
\n';
}
// 當上傳檔案中執行
var uploadProgress = function(obj, completed, total){
document.getElementById('message').innerHTML='Uploading...'+Math.floor(completed/total)+'%
\n';
}
// 當上傳一個檔案後執行
var uploadSuccess = function(obj, message){
document.getElementById('message').innerHTML='Upload Successful:
\n'+message+'
\n';
}
var fileQueued = function (obj){
//當有檔案被選擇後, 便立即上傳檔案
swfu.startUpload();
}
var swfu;
window.onload = function() {
var settings = {
file_post_name : "Filedata", // 上傳名稱, 等同<input type="file" name="Filedata" />
flash_url : “../swfupload/swfupload_f9.swf”,
upload_url: “../simpledemo/upload.php”, // 這一個檔案是負責接收SWFUpload選擇好的檔案
post_params: {“PHPSESSID” : “”,”other_data”:”123″}, // 如果你需要處理識別使用者, 可加入PHPSESSID 的資料; 另外可加其他資料到 post_params
file_size_limit : “100 MB”, // 最大的檔案size
file_types : “*.*”, // 如需要指定文件格式如jpeg , 可輸入 “*.jpg”
file_types_description : “All Files”,
file_upload_limit : 100, // 同一頁最多上傳的數量(只計成功上傳)
file_queue_limit : 0,
custom_settings : {
progressTarget : “fsUploadProgress”, //
cancelButtonId : “btnCancel” //取消按鈕位置
},
debug: false,
// 設定 Handler
file_queued_handler: fileQueued,
upload_progress_handler : uploadProgress,
upload_start_handler : uploadStart,
upload_error_handler : uploadError,
upload_success_handler : uploadSuccess,
};
swfu = new SWFUpload(settings);
};
</script>
在<body> … </body>內 加入 以下的內容
<fieldset id="fsUploadProgress">
<legend>Upload Queue</legend>
</fieldset>
<div id="message"></div>
<div>
<input type="button" value="Upload file (Max 100 MB)" onclick="swfu.selectFiles()" />
<input id="btnCancel" type="button" value="Cancel All Uploads" onclick="swfu.cancelQueue();" disabled="disabled" />
</div>
在<body> … </body>內 加入 以下的內容
PHP
<?php
// 已接收檔案的位置
$tmp_name = $_FILES['Filedata']['tmp_name'];
// 原本檔案名字
$orginial_name = $_FILES['Filedata']['name'];
// 將檔案放到目標位置
if(move_uploaded_file($tmp_path,’/path/to/your/place/’.$orginial_name)){
print “$orginial_name uploaded successful”;
}else{
print “$orginial_name uploaded failure.”;
}
?>