cari

Rumah  >  Artikel  >  hujung hadapan web  >  Pengesahan jenis fail apabila memuat naik menggunakan JavaScript

Pengesahan jenis fail apabila memuat naik menggunakan JavaScript

PHPz
PHPzke hadapan
2023-09-20 17:25:031438semak imbas

使用 JavaScript 上传时进行文件类型验证

Platform media sosial yang hanya tertumpu pada pekerjaan membolehkan pengguna membuat akaun dan akan diminta memuat naik dokumen yang diperlukan supaya ia boleh dianalisis oleh perekrut. Untuk mengumpul fail daripada pengguna, tapak web ini akan menyediakan pilihan "Muat Naik Fail" atau "Pilih Fail" dalam borang butiran pengguna mereka hanya menerima jenis fail tertentu seperti ".pdf", ".jpg", ".png " "tunggu. Proses ini dipanggil pengesahan fail dan boleh dilakukan menggunakan JavaScript.

Dalam artikel ini, kami akan mereka bentuk pilihan untuk mengesahkan jenis fail menggunakan JavaScript. Untuk melakukan ini, begini caranya -

  • Langkah 1 - Buat fungsi yang dipanggil validateFileType().

  • Langkah 2 - Cetuskan fungsi validateFileType() apabila nilai medan input fail berubah.

  • Langkah 3 - Dapatkan semula fail yang dipilih daripada medan input fail menggunakan document.getElementById('fileInput').files[0].

  • Langkah 4 - Tentukan tatasusunan yang dipanggil allowedTypes yang mengandungi jenis fail yang dibenarkan (cth. "image/jpeg", "image/png", "application/pdf").

  • Langkah 5 - Gunakan kaedah includes() untuk menyemak sama ada jenis fail yang dipilih disertakan dalam tatasusunan yang dibenarkanTypes.

    Jika dalam tatasusunan Jenis yang dibenarkan, paparkan nama fail pada skrin.

    Jika jenis fail tidak dijumpai, sila ikuti langkah di bawah.

  • Langkah 6 - Paparkan mesej amaran kepada pengguna yang menyatakan "Jenis fail tidak sah. Sila pilih fail JPEG, PNG atau PDF

  • Langkah 7 - Kosongkan nama medan input fail dengan menetapkan document.getElementById('fileInput').value kepada rentetan kosong.

Contoh

Dalam contoh di bawah kami cuba mengesahkan jenis fail semasa memuat naik menggunakan kaedah di atas -

<!DOCTYPE html>
<html>
<head>
   <title>File Type Validation Example</title>
   <script>
      function validateFileType() {
         var selectedFile = document.getElementById('fileInput').files[0];
         var allowedTypes = ['image/jpeg', 'image/png', 'application/pdf'];

         if (!allowedTypes.includes(selectedFile.type)) {
            alert('Invalid file type. Please upload a JPEG, PNG, or PDF file.');
            document.getElementById('fileInput').value = '';
         }
      }
   </script>
</head>
<body>
   <h1>File Type Validation Example</h1>
   <input type="file" id="fileInput" onchange="validateFileType()">
</body>
</html>

Selepas melaksanakan prosedur di atas, cuba muat naik fail Jika fail itu ialah ".jpg", ".png" atau ".pdf", nama fail akan dipaparkan pada skrin. Jika tidak, ia akan memaparkan amaran yang menyatakan "Jenis fail tidak sah".

Atas ialah kandungan terperinci Pengesahan jenis fail apabila memuat naik menggunakan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript 字符串
Kenyataan：
Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Artikel sebelumnya：Jenis data simbol dalam javascriptArtikel seterusnya：Jenis data simbol dalam javascript

Artikel berkaitan

Lihat lagi