網頁應用的上傳功能在網絡應用開發中已經成為不可或缺的部分,其中PHP和HTML5作為熱門的開發語言,也在不斷優化上傳控件的功能,為開發人員提供更加方便、快捷、安全的上傳體驗。
一、PHP文件上傳
PHP文件上傳功能需要了解以下參數:
$_FILES["file"]["name"]:文件名 $_FILES["file"]["type"]:文件類型 $_FILES["file"]["size"]:文件大小 $_FILES["file"]["tmp_name"]:文件上傳后的臨時文件名 $_FILES["file"]["error"]:上傳文件時出現的錯誤代碼
通過設置上傳文件路徑、文件格式等屬性,開發人員可以對上傳控件的功能進行限制,例如只允許上傳圖片格式文件。具體代碼如下:
<form action="upload.php" method="post" enctype="multipart/form-data">選擇文件:
<input type="submit" name="submit" value="上傳" /></form>PHP代碼: <?php $allowedExts = array("gif", "jpeg", "jpg", "png"); $temp = explode(".", $_FILES["file"]["name"]); $extension = end($temp); if ((($_FILES["file"]["type"] == "image/gif") || ($_FILES["file"]["type"] == "image/jpeg") || ($_FILES["file"]["type"] == "image/jpg") || ($_FILES["file"]["type"] == "image/pjpeg") || ($_FILES["file"]["type"] == "image/x-png") || ($_FILES["file"]["type"] == "image/png")) && ($_FILES["file"]["size"]< 204800) && in_array($extension, $allowedExts)) { if ($_FILES["file"]["error"] >0) { echo "錯誤:" . $_FILES["file"]["error"] . "<br />"; } else { echo "上傳文件名: " . $_FILES["file"]["name"] . "<br />"; echo "文件類型: " . $_FILES["file"]["type"] . "<br />"; echo "文件大小: " . ($_FILES["file"]["size"] / 1024) . " Kb<br />"; echo "文件臨時存儲的位置: " . $_FILES["file"]["tmp_name"]; if (file_exists("upload/" . $_FILES["file"]["name"])) { echo $_FILES["file"]["name"] . " 文件已經存在。 "; } else { move_uploaded_file($_FILES["file"]["tmp_name"], "upload/" . $_FILES["file"]["name"]); echo "文件位置: " . "upload/" . $_FILES["file"]["name"]; } } } else { echo "不允許上傳非法文件"; } ?>
二、HTML5文件上傳
HTML5新增了多個屬性,支持更加便捷的文件上傳方式。
multiple:選擇多個文件 accept:限制文件類型
HTML5的文件上傳功能具有如下優點:
1. HTML5支持多文件上傳,只需在input標簽中設置multiple屬性即可支持一次上傳多個文件; 2. HTML5還支持拖拽上傳功能,用戶可以直接將文件拖拽至瀏覽器中,即可實現上傳文件; 3. HTML5還支持限制文件類型功能,限制圖片格式、音頻格式等;
HTML5的文件上傳控件代碼如下:
<!DOCTYPE html><html><head><meta charset="utf-8"><title>HTML5 文件上傳</title></head><body><form action="upload.php" method="post" enctype="multipart/form-data"><input type="file" name="file" multiple="multiple" accept="image/gif, image/jpeg"/><br><input type="submit" name="submit" value="上傳" /></form></body></html>
通過以上兩種文件上傳方式的介紹,我們可以看到這兩種方式雖然代碼不同,但是都是一樣的上傳功能。但是,HTML5文件上傳能夠通過多選文件來實現批量上傳,并且拖拽上傳的功能也帶來了更便捷的交互。總之,無論是PHP還是HTML5,都為文件上傳的控件功能產生了非常大的改進,為用戶帶來了更加便捷安全的上傳體驗。