Code For Web: การตรวจสอบนามสกุลไฟล์และขนาดของไฟล์ก่อนการ upload

คุณสมบัติ

1.รับแต่ไฟล์ที่มี่นามสกุล Gif, Jpg, Pdf, Png, Tiff, Doc และ Docx เท่านั้น
2.ต้องมีขนาดไฟล์ไม่เกิน 200 KB
3.หาก Upload ไม่ผ่านจะ Alert แล้วเคลียร์ค่าในช่อง File ให้ทันที
4.หาก Upload สำเร็จจะซ่อนคอนโทรลสำหรับการ Upload ทั้งหมดแล้วส่งชื่อไฟล์ที่ Upload ไปไว้ที่ Text Box
5.ทั้งหมดนี้สำเร็จในหน้าเดียว ไม่มีการ Reload ไปหน้าอื่นใด ๆ ทั้งสิ้น

ทดลองบน IE8 แล้วใช้ได้ผลดี ฝากท่านผู้อ่านบทความไปลองกับ Browser ตัวอื่น ๆ ด้วยครับ

1. upload.html

<script>
function reset_file(name)
{
var elem=document.myform(name);
elem.parentNode.innerHTML=elem.parentNode.innerHTML;
return false;
}
function clickupload()
{
if(document.myform.fileupload.value.length==0)
{
alert("Please select file to upload");
return false;
}
alert("Now uploading please wait");
document.myform.btn.disabled=true;
return true;
}
function uploadok(pathfile)
{
document.myform.fileupload.style.display="none";
document.myform.btn.style.display="none";
document.myform.txt.style.display="";
document.myform.txt.value=pathfile;
alert("Upload complete\n"+pathfile);
return true;
}
function over_size(size)
{
alert("File not over 200 KB\n"+size+" KB");
reset_file("fileupload");
document.myform.btn.disabled=false;
return false;
}
function wrong_type(type)
{
alert("Please upload only file type\nGif, Jpg, Png, Pdf, Doc, Docx, Tiff\n"+type);
reset_file("fileupload");
document.myform.btn.disabled=false;
return false;
}
</script>
<iframe id="uploadtarget" name="uploadtarget" style="display=none"></iframe>
<form name="myform" action="upload.php" method="post" enctype="multipart/form-data" onsubmit="return clickupload();" target="uploadtarget">
<input name="fileupload" type="file"><br>
<font color="red" size="2">Not over 200 KB (Gif, Jpg, Pdf, Doc, Docx, Tiff)</font><br>
<input id="btn" name="btn" type="submit" value="Upload">
<input name="txt" style="display=none"> 
</form>

2. upload.php

<?
$file = strtolower($_FILES["fileupload"]["name"]);
$sizefile = $_FILES["fileupload"]["size"];
$type= strrchr($file,".");
if($sizefile>204800)
{
?>
<script>
window.parent.over_size("<?=$sizefile/1024?>");
</script>
<?
}
elseif(($type==".jpg")||($type==".jpeg")||($type==".gif")||($type==".png")||($type==".doc")||($type==".docx")||($type==".pdf")||($type==".tif")||($type==".tiff"))
{
$tempfile = date("Y-m-d")."-".$file;
copy($_FILES["fileupload"]["tmp_name"],$tempfile);
?>
<script>
window.parent.uploadok("<?=$tempfile?>");
</script>
<?
}
else
{
?>
<script>
window.parent.wrong_type("<?=$_FILES["fileupload"]["name"]?>");
</script>
<?
}
?>

หน้าตาของ upload.html