Rumah > Artikel > hujung hadapan web > Bagaimana untuk menambah fungsi muat naik fail ke halaman web HTML?
Bagaimana untuk menambah fungsi muat naik fail ke halaman web HTML?
- 王林ke hadapan
- 2023-09-04 12:29:051732semak imbas
Pengenalan
Dalam artikel ini, kami akan membimbing anda melalui proses menambah fungsi muat naik fail ke halaman web anda. Kami akan menunjukkan kepada anda cara membuat borang HTML dengan medan input fail dan cara membuat skrip yang mengendalikan proses muat naik fail.
Kaedah
Kami boleh menggunakan dua kaedah berikut untuk menambah fungsi muat naik fail pada halaman web HTML -
Gunakan borang HTML asas dengan medan input fail
Menggunakan jQuery dan ajax
Sekarang mari bincangkannya secara terperinci.
Kaedah 1: Gunakan borang HTML asas dengan medan input fail
Kaedah ini melibatkan mencipta borang HTML ringkas yang mengandungi medan input fail yang membolehkan pengguna memilih fail untuk dimuat naik. Borang tersebut kemudiannya dihantar ke skrip sebelah pelayan yang mengendalikan penyimpanan sebenar fail.
Langkah 1 - Buat fail bernama index.html.
Langkah 2 - Buat borang HTML dengan medan input fail.
Contoh
Mari kita memahami perkara ini dengan lebih baik dengan contoh.
Contoh
Mari kita memahami perkara ini dengan lebih baik dengan contoh. >
<!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>
Ini akan mencipta borang HTML yang mengandungi medan input fail yang membolehkan pengguna memilih fail untuk dimuat naik dan butang hantar untuk menghantar borang. Atribut tindakan ditetapkan kepada "upload.php", iaitu skrip sebelah pelayan yang mengendalikan muat naik fail. Atribut enctype ditetapkan kepada "multipart/form-data", yang diperlukan untuk muat naik fail.
Langkah 3 - Buat skrip PHP sebelah pelayan (action.php) untuk mengendalikan muat naik fail.
<?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);
}
}
?>
Skrip ini mula-mula menyemak sama ada medan input fail mengandungi fail menggunakan fungsi isset dan pembolehubah superglobal $_FILES. Skrip kemudian menyemak saiz fail dan sambungan fail menggunakan fungsi in_array dan senarai sambungan fail yang dipratakrifkan. Jika fail itu sah, gunakan fungsi move_uploaded_file untuk mengalihkannya ke direktori "muat naik" pada pelayan. Jika fail tidak sah, mesej ralat dipaparkan.
Kaedah 2: Menggunakan jQuery dan ajax
Kaedah ini ialah cara yang lebih maju untuk mengendalikan muat naik fail, membolehkan anda mengendalikan proses muat naik fail tanpa memuat semula halaman.
Langkah 1 - Buat fail bernama index.html
Langkah 2 - Sertakan pemalam borang jQuery dan jQuery dalam fail ini -
Contoh
Mari kita memahami perkara ini dengan lebih baik dengan contoh.
><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://malsup.github.io/jquery.form.js"></script>
Langkah ini melibatkan memasukkan jQuery dan perpustakaan Pemalam Borang jQuery dalam dokumen HTML. Perpustakaan ini akan membolehkan anda mengendalikan proses muat naik fail melalui JavaScript menggunakan kaedah ajaxForm.
Langkah 3 − Cipta borang HTML dengan medan input fail -
<form id="fileUploadForm" action="upload.php" method="post" enctype="multipart/form-data"> <input type="file" name="uploadedFile"> <input type="submit" value="Upload"> </form>
Langkah ini serupa dengan langkah 1 kaedah 1. Anda mencipta borang HTML yang mengandungi medan input fail dan butang serah, dan tetapkan atribut tindakan untuk menghala ke skrip sebelah pelayan yang akan mengendalikan muat naik fail, dan tetapkan atribut enctype kepada "berbilang bahagian/data-bentuk" sejak di situlah muat naik fail diperlukan.
Langkah 4 - Gunakan jQuery untuk mengendalikan muat naik fail -
$(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.");
}
});
});
Langkah ini melibatkan penggunaan jQuery untuk mengendalikan proses muat naik fail. Kaedah ajaxForm digunakan untuk menyerahkan borang melalui JavaScript, dan sebelumSubmit, kejayaan, dan fungsi ralat digunakan untuk mengendalikan pelbagai peringkat proses muat naik fail.
Fungsi beforeSubmit digunakan untuk mengesahkan fail sebelum memuat naik, dan fungsi kejayaan digunakan untuk memproses respons pelayan selepas fail dimuat naik. Fungsi ralat digunakan untuk mengendalikan sebarang ralat yang berlaku semasa muat naik fail.
Langkah 5 - HTML penuh kod jQuery untuk fail index.html disertakan di sini -
Contoh
<!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>
Langkah 6 - Buat skrip sebelah pelayan PHP (upload.php) untuk mengendalikan muat naik fail -
<?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);
}
}
?>
Skrip terlebih dahulu menyemak sama ada medan input fail mengandungi fail menggunakan fungsi isset dan pembolehubah superglobal $_FILES. Skrip kemudian menyemak saiz fail dan sambungan fail menggunakan fungsi in_array dan senarai sambungan fail yang dipratakrifkan. Jika fail itu sah, gunakan move_uploaded_file untuk mengalihkannya ke direktori "muat naik" pada pelayan.
Kesimpulan
Dalam artikel ini, kami membincangkan dua cara untuk menambah fungsi muat naik fail dalam halaman web HTML. Kaedah pertama ialah menggunakan borang HTML asas dengan medan input fail dan kemudian menghantar borang tersebut ke skrip sebelah pelayan yang mengendalikan penyimpanan sebenar fail. Kaedah kedua ialah menggunakan jQuery dan ajax, kaedah ini membolehkan anda mengendalikan proses muat naik fail tanpa menyegarkan halaman.
Kedua-dua kaedah memerlukan pengesahan yang betul, cara yang betul untuk menyimpan fail, kebenaran yang betul pada bahagian pelayan dan cara yang betul untuk membersihkan nama fail dan sambungan atas sebab keselamatan.
Atas ialah kandungan terperinci Bagaimana untuk menambah fungsi muat naik fail ke halaman web HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!