2010年11月2日 星期二

ⓒMultiUploader 多檔案上傳 JavaScript + PHP

前言:
檔案上傳的PHP程式是許多學PHP的同學們最初的初等範例,而且網路上已經太多相同的教學,站長現在來點不一樣的,加入了JavaScript來增添幾分色彩,這支程式是不小心在Google Docs整理資料時發現,是我以前在研究如何寫多檔上傳系統的時候寫的,現在這隻程式已經非常龐大,這篇只是貼出其中的小部分功能。

現在釋出的這支還算能用的程式,是給已經學會PHP上傳程式的同學參考的,印象中應該是修改過後支援度比較廣的那版,如果對這支程式哪個部分有問題請留言。

PHP(upload_file.php):
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<?php
/**************************************************
 File:upload_file.php
 Name:檔案上傳程式
 Explain:
 請將php.ini內之以下參數調整為需求大小
 upload_max_filesize
 post_max_size
****************************************By QQBoxy*/
$uploadhtm = 'upload.htm';
$uploaddir = './uoload_data/';//儲存路徑
$total = $_POST['jsvalue'];//檔案個數
if(!$total) {
echo "好像沒有檔案耶?請<a href=\"".$uploadhtm."\">返回上傳頁面</a>檢查看看吧。";
return;
}
//多檔上傳開始
for($i=0;$i<$total;$i++) {
echo "<br />上傳第".($i+1)."個檔案:";
$myfile = 'myfile'.$i;//input.name

$filename = $_FILES[$myfile]['name'];//檔案完整名稱
$extension = explode(".", $filename);//檔名依點切割
$extension = $extension[count($extension)-1];//檔案副檔名
if($filename) {
if (eregi("(jpg|jpeg|png|gif)$", $extension)) {//不分大小寫限制檔案格式
$type = 1;
} else if(eregi("(zip|rar|7z|swf|wnk|pdf|mp3)$", $extension)) {
$type = 2;
} else {
echo "副檔名不可為『".$extension."』";
continue;
}
$complete = upload_file($uploaddir,$filename,$myfile);//進入移動副程式
if ($complete == 1) {
echo "『<a target=\"_blank\" href=\"".$uploaddir.$filename."\">".$filename."</a>』成功的上傳了";
if ($type == 1)
echo "<br /><img src=\"".$uploaddir.$filename."\" style=\"border:3px #99CCFF solid;\" />";
} else {
echo "『".$filename."』Sorry~上傳失敗了";
}
} else {
echo "檔案有問題唷";
}
}
echo "<br />上傳完成囉,可以<a href=\"".$uploadhtm."\">返回上傳頁面</a>了。";

function upload_file($uploaddir,$filename,$input_filename){
$uploadfile = $uploaddir.basename($filename);
    if (move_uploaded_file($_FILES[$input_filename]['tmp_name'], iconv("utf-8", "big5", $uploadfile))) {
        $complete = 1;
    } else {
        $complete = 0;
    }
    return $complete;
}
?>


HTML(upload.htm):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>QQBoxy Upload Website</title>
<!--///////////////////////////////////////////////
 File:upload.htm
 Name:檔案上傳介面
 Explain:
 請將102400000數值調整為您的需求大小。
/////////////////////////////////// By QQBoxy //-->
</head>
<body>
<script language="JavaScript" type="text/javascript">
<!--
var num = 0;
function add_check(chk) {
 if(eval('chk.form.myfile'+num+'.value.length')) {
  if(num < 9) {
  num++;
  var new_inputfile = document.createElement("input");
  new_inputfile.type = "file";
  new_inputfile.name = "myfile" + num;
  new_inputfile.onchange = function(){add_check(this)};
  chk.form.appendChild(new_inputfile);
  var s = document.createElement("br");
  chk.form.appendChild(s);
  }
 }
}
function submitform() {
 document.upload.jsvalue.value = num;
 document.upload.submit();
}

function resetform() {
 document.upload.reset();
}
-->
</script>
酷酷方盒子上傳網頁<br />
<br />
允許的檔案類型:jpg、jpeg、png、gif、zip、rar、7z、swf、wnk、pdf<br />
檔案上傳大小限制:100MB<br />
多檔上傳數量限制:10個
<form name="upload" action="upload_file.php" method="post" enctype="multipart/form-data">
<input type="hidden" name="max_file_size" value="102400000">
<input type="hidden" name="jsvalue" id="jsvalue" value="javascript:num" />
<input type="file" name="myfile0" onchange="add_check(this)"><br />
</form>
<input type="button" value="上傳" onclick="javascript: submitform()">
<input type="button" value="清除" onclick="javascript: resetform()">
</body>
</html>

最後請在相同目錄新增一個資料夾名稱為(uoload_data)用來放置檔案。
張貼留言