在現代網頁開發中,文件上傳是一個常見的需求。而PHP和jQuery作為知名的web開發技術,提供了方便的方法用于文件上傳。本文將討論兩種方法的應用和實現。
PHP文件上傳
<form action="upload.php" method="post" enctype="multipart/form-data">
<input type="file" name="fileToUpload" id="fileToUpload">
<input type="submit" value="Upload File" name="submit">
</form>
在HTML文件中,我們只需在form表單中加入enctype="multipart/form-data",即可添加文件上傳功能。同時,需要一個input標簽并設置type屬性為"file"。提交表單后,將會把文件復制到指定的目標文件夾,并將相關信息存儲到$_FILES變量中,并提供詳細的上傳狀態和信息。
比如,下面的PHP代碼將會把上傳的文件存儲到指定目錄,并輸出相關的狀態和信息。
<?php
$target_dir = "uploads/";
$target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
$uploadOk = 1;
$imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION));
// Check if image file is a actual image or fake image
if(isset($_POST["submit"])) {
$check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
if($check !== false) {
echo "File is an image - " . $check["mime"] . ".";
$uploadOk = 1;
} else {
echo "File is not an image.";
$uploadOk = 0;
}
}
// Check if file already exists
if (file_exists($target_file)) {
echo "Sorry, file already exists.";
$uploadOk = 0;
}
// Check file size
if ($_FILES["fileToUpload"]["size"] > 500000) {
echo "Sorry, your file is too large.";
$uploadOk = 0;
}
// Allow certain file formats
if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg"
&& $imageFileType != "gif" ) {
echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";
$uploadOk = 0;
}
// Check if $uploadOk is set to 0 by an error
if ($uploadOk == 0) {
echo "Sorry, your file was not uploaded.";
// if everything is ok, try to upload file
} else {
if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) {
echo "The file ". basename( $_FILES["fileToUpload"]["name"]). " has been uploaded.";
} else {
echo "Sorry, there was an error uploading your file.";
}
}
?>
這段代碼利用了PHP的各種文件操作函數,如file_exists()和move_uploaded_file()。同時,還用PHP的圖片函數getimagesize()檢測了上傳文件是否是一個真實的圖片。
jQuery文件上傳
<form method="post" action="upload.php" enctype="multipart/form-data">
<label for="fileToUpload">Select files to upload:</label>
<input type="file" name="fileToUpload[]" id="fileToUpload" multiple>
<input type="submit" value="Upload file" name="submit">
</form>
jQuery可以幫助我們更加優雅地實現文件上傳。jQuery的插件Form Plugin允許我們在不刷新整個頁面的情況下異步上傳一個文件。同時,使用了jQuery對象的formData方法,可以直接上傳表單數據,而不必使用PHP的$_POST變量。
比如下面的代碼將會在文件上傳時,將文件名和類型顯示在網頁上。
$(function() {
$('form').submit(function(){
var file = $('#fileToUpload')[0].files[0];
var reader = new FileReader();
reader.onload = function(e) {
$('#fileInfo').append('<p>Filename: '+file.name+'</p>');
$('#fileInfo').append('<p>Type: '+file.type+'</p>');
}
reader.readAsDataURL(file);
$.ajax({
url: 'upload.php',
type: 'POST',
data: new FormData($('form')[0]),
processData: false,
contentType: false,
success: function(response){
console.log(response);
alert(response);
},
error: function(xhr,status,error){
console.log(xhr);
console.log(status);
console.log(error);
alert(error);
}
});
return false;
});
});
我們使用了一個表單提交事件,在這個事件中,我們檢測文件是否存在,還利用了jQuery對象的異步方式來處理表單數據。當用戶選擇上傳文件時,文件名和類型會顯示在一個帶著id為fileInfo的div元素中。
從以上兩段代碼可以看出,實現文件上傳的方法有多種,我們需要根據具體的應用來選擇最合適的方式。同時,在開發過程中需要注意防止非法上傳、過大的文件和其他不安全因素。