如何在HTML網頁中加入文件上傳功能？
- 王林轉載
- 2023-09-04 12:29:051715瀏覽
簡介
在本文中，我們將引導您完成在網頁上新增檔案上傳功能的過程。我們將向您展示如何建立帶有文件輸入欄位的 HTML 表單，以及如何建立處理文件上傳過程的腳本。
方法
我們可以使用以下兩種方法在 HTML 網頁中新增檔案上傳功能 -
使用具有檔案輸入欄位的基本 HTML 表單
使用 jQuery 和 ajax
現在讓我們詳細討論它們。
方法 1：使用具有檔案輸入欄位的基本 HTML 表單
此方法涉及建立一個簡單的 HTML 表單，其中包含一個文件輸入字段，允許使用者選擇要上傳的文件。然後，該表單被傳送到處理文件實際保存的伺服器端腳本。
第 1 步 - 建立一個名為 index.html 的檔案。
步驟 2 - 建立一個帶有檔案輸入欄位的 HTML 表單。
範例
讓我們透過範例更好地理解這一點。
範例
讓我們透過範例更好地理解這一點。 >
<!DOCTYPE html>
<html>
<head>
<title>File Upload</title>
</head>
<body>
<h1>Welcome to Tutorials Point</h1>
<form action="upload.php" method="post" enctype="multipart/form-data">
<input type="file" name="uploadedFile">
<input type="submit" value="Upload">
</form>
</body>
</html>
這將建立一個 HTML 表單，其中包含一個文件輸入字段，允許使用者選擇要上傳的文件，以及一個用於發送表單的提交按鈕。 action 屬性設定為“upload.php”，這是處理檔案上傳的伺服器端腳本。 enctype 屬性設定為“multipart/form-data”，這是檔案上傳所必需的。
第 3 步 - 建立伺服器端 PHP 腳本 (action.php) 來處理檔案上傳。
<?php
if(isset($_FILES['uploadedFile'])){
$errors= array();
$file_name = $_FILES['uploadedFile']['name'];
$file_size = $_FILES['uploadedFile']['size'];
$file_tmp = $_FILES['uploadedFile']['tmp_name'];
$file_type = $_FILES['uploadedFile']['type'];
$file_ext=strtolower(end(explode('.',$_FILES['uploadedFile']['name'])));
$extensions= array("jpeg","jpg","png");
if(in_array($file_ext,$extensions)=== false){
$errors[]="extension not allowed, please choose a JPEG or PNG file.";
}
if($file_size > 2097152) {
$errors[]='File size must be excately 2 MB';
}
if(empty($errors)==true) {
move_uploaded_file($file_tmp,"upload/".$file_name);
echo "Success";
}else{
print_r($errors);
}
}
?>
此腳本首先使用 isset 函數和 $_FILES 超全域變數檢查檔案輸入欄位是否包含檔案。然後，該腳本使用 in_array 函數和預先定義的允許檔案副檔名清單檢查檔案大小和檔案副檔名。如果檔案有效，則使用 move_uploaded_file 函數將其移至伺服器上的「upload」目錄。如果檔案無效，則會顯示錯誤訊息。
方法 2：使用 jQuery 和 ajax
此方法是處理文件上傳的更高級方法，可讓您無需刷新頁面即可處理文件上傳過程。
第 1 步 - 建立一個名為index.html的檔案
第 2 步 - 在該檔案中包含 jQuery 和 jQuery 表單外掛 -
範例
讓我們透過範例更好地理解這一點。
><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://malsup.github.io/jquery.form.js"></script>
此步驟涉及在 HTML 文件中包含 jQuery 和 jQuery Form Plugin 函式庫。這些程式庫將允許您使用 ajaxForm 方法透過 JavaScript 處理檔案上傳過程。
第 3 步驟 − 建立具有檔案輸入欄位的 HTML 表單 -
<form id="fileUploadForm" action="upload.php" method="post" enctype="multipart/form-data"> <input type="file" name="uploadedFile"> <input type="submit" value="Upload"> </form>
此步驟與方法 1 的步驟 1 類似。您建立一個包含檔案輸入欄位和提交按鈕的HTML 表單，並將操作屬性設定為指向將處理檔案上傳的伺服器端腳本，並將enctype 屬性設為“multipart/form-data”，因為這是檔案上傳所必需的。
第 4 步 - 使用 jQuery 處理檔案上傳 -
$(document).ready(function(){
$('#fileUploadForm').ajaxForm({
beforeSubmit: function(){
// do validation here
var fileInput = document.getElementById('fileInput');
var file = fileInput.files[0];
var maxFileSize = 2097152; // 2 MB
var validFileExtensions = ["jpg", "jpeg", "png"];
var extension = file.name.split('.').pop().toLowerCase();
if(file.size > maxFileSize) {
alert("File size must be exactly 2 MB.");
return false;
}
if(validFileExtensions.indexOf(extension) === -1) {
alert("Invalid file type. Only JPEG and PNG files are allowed.");
return false;
}
},
success: function(response){
// handle response
var jsonResponse = JSON.parse(response);
if(jsonResponse.status === "success"){
alert("File upload successful!");
}else{
alert("File upload failed. Please try again.");
}
},
error: function(response){
// handle errors
alert("There was an error while uploading the file. Please try again later.");
}
});
});
此步驟涉及使用 jQuery 來處理檔案上傳過程。 ajaxForm 方法用於透過 JavaScript 提交表單，beforeSubmit、success 和 error 函數用於處理檔案上傳過程的各個階段。
beforeSubmit函數用於在上傳前驗證文件，success函數用於處理文件上傳後伺服器的回應。 error 函數用於處理文件上傳過程中發生的任何錯誤。
第 5 步驟 - 此處包含 index.html 檔案的 jQuery 程式碼的完整 HTML -
範例
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://malsup.github.io/jquery.form.js"></script>
</head>
<body>
<h1>Greetings from Tutorials Point!</h1>
<form id="fileUploadForm" action="upload.php" method="post" enctype="multipart/form-data">
<input type="file" name="uploadedFile">
<input type="submit" value="Upload">
</form>
<script>
$(document).ready(function(){
$('#fileUploadForm').ajaxForm({
beforeSubmit: function(){
// do validation here
var fileInput = document.getElementById('fileInput');
var file = fileInput.files[0];
var maxFileSize = 2097152; // 2 MB
var validFileExtensions = ["jpg", "jpeg", "png"];
var extension = file.name.split('.').pop().toLowerCase();
if(file.size > maxFileSize) {
alert("File size must be exactly 2 MB.");
return false;
}
if(validFileExtensions.indexOf(extension) === -1) {
alert("Invalid file type. Only JPEG and PNG files are allowed.");
return false;
}
},
success: function(response){
// handle response
var jsonResponse = JSON.parse(response);
if(jsonResponse.status === "success"){
alert("File upload successful!");
}else{
alert("File upload failed. Please try again.");
}
},
error: function(response){
// handle errors
alert("There was an error while uploading the file. Please try again later.");
}
});
});
</script>
</body>
</html>
第 6 步 - 建立 PHP 伺服器端腳本 (upload.php) 來處理檔案上傳 -
<?php
if(isset($_FILES['uploadedFile'])){
$errors= array();
$file_name = $_FILES['uploadedFile']['name'];
$file_size = $_FILES['uploadedFile']['size'];
$file_tmp = $_FILES['uploadedFile']['tmp_name'];
$file_type = $_FILES['uploadedFile']['type'];
$file_ext=strtolower(end(explode('.',$_FILES['uploadedFile']['name'])));
$extensions= array("jpeg","jpg","png");
if(in_array($file_ext,$extensions)=== false){
$errors[]="extension not allowed, please choose a JPEG or PNG file.";
}
if($file_size > 2097152) {
$errors[]='File size must be excately 2 MB';
}
if(empty($errors)==true) {
move_uploaded_file($file_tmp,"upload/".$file_name);
echo "Success";
}else{
print_r($errors);
}
}
?>
此腳本首先使用 isset 函數和 $_FILES 超全域變數檢查檔案輸入欄位是否包含檔案。然後，該腳本使用 in_array 函數和預先定義的允許檔案副檔名清單檢查檔案大小和檔案副檔名。如果檔案有效，則使用 move_uploaded_file 將其移至伺服器上的「upload」目錄。
結論
在本文中，我們討論了兩種在 HTML 網頁中新增檔案上傳功能的方法。第一種方法是使用具有文件輸入欄位的基本 HTML 表單，然後將該表單傳送到處理文件實際保存的伺服器端腳本。第二種方法是使用 jQuery 和 ajax，這種方法允許您處理檔案上傳過程而無需刷新頁面。
這兩種方法都需要正確的驗證、儲存檔案的正確方法、在伺服器端具有正確的權限，以及出於安全原因清理檔案名稱和副檔名的正確方法。
以上是如何在HTML網頁中加入文件上傳功能？的詳細內容。更多資訊請關注PHP中文網其他相關文章！