Bagaimana untuk menambah fungsi muat naik fail ke halaman web HTML?-html tutorial-php.cn

Bagaimana untuk menambah fungsi muat naik fail ke halaman web HTML?

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>

Salin selepas log masuk

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);
      }
   }
?>

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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.");
      }
   });
});

Salin selepas log masuk

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>

Salin selepas log masuk

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);
      }
   }
?>

Salin selepas log masuk

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!