Dalam tutorial singkat ini kami menyiapkan formulir HTML dasar untuk mengunggah gambar dengan PHP, kami juga mengeksplorasi cara mengamankan skrip PHP kami sehingga tidak dapat disalahgunakan oleh pengguna jahat
Menyiapkan Formulir Pengunggahan Gambar
Kita mulai dengan bentuk dasar
Formulir berisi tombol kirim dan memiliki atribut action. Atribut tindakan menunjuk ke halaman tempat formulir akan memposting semua isinya ketika tombol kirim diklik
<form action="upload.php" method="POST"> <button type="submit">Upload</button> </form>Formulir memposting ke file PHP bernama upload.php. File ini akan menangani pengunggahan gambar. Kita akan membahasnya sebentar lagi
Untuk mengizinkan pengguna memilih file, kami menambahkan bidang input file
<form action="upload.php" method="POST" enctype="multipart/form-data"> <input type="file" name="image" accept="image/*" /> <button type="submit">Upload</button> </form>_Pada saat yang sama kami juga menambahkan atribut form dan menyetelnya ke <form action="upload.php" method="POST" enctype="multipart/form-data"> <input type="file" name="image" accept="image/*" /> <button type="submit">Upload</button> </form>1. Ini diperlukan jika kita memiliki kolom input file di formulir kita
Karena kami hanya mengunggah gambar, kami menambahkan atribut <form action="upload.php" method="POST" enctype="multipart/form-data"> <input type="file" name="image" accept="image/*" /> <button type="submit">Upload</button> </form>2 ke elemen input file dan menyetelnya ke <form action="upload.php" method="POST" enctype="multipart/form-data"> <input type="file" name="image" accept="image/*" /> <button type="submit">Upload</button> </form>3 memberitahukannya untuk hanya menerima file yang memiliki tipe mime yang dimulai dengan <form action="upload.php" method="POST" enctype="multipart/form-data"> <input type="file" name="image" accept="image/*" /> <button type="submit">Upload</button> </form>4, seperti <form action="upload.php" method="POST" enctype="multipart/form-data"> <input type="file" name="image" accept="image/*" /> <button type="submit">Upload</button> </form>5 atau <form action="upload.php" method="POST" enctype="multipart/form-data"> <input type="file" name="image" accept="image/*" /> <button type="submit">Upload</button> </form>6
Mari kita tulis penangan upload gambar PHP selanjutnya
Menangani Pengunggahan Gambar PHP
Kami akan membuat file baru bernama upload.php di direktori yang sama dengan halaman yang berisi formulir kami
Selanjutnya kita membuat direktori bernama <form action="upload.php" method="POST" enctype="multipart/form-data"> <input type="file" name="image" accept="image/*" /> <button type="submit">Upload</button> </form>_8, juga di direktori yang sama. Di sinilah skrip kami akan menyimpan file gambar yang diunggah menggunakan fungsi <form action="upload.php" method="POST" enctype="multipart/form-data"> <input type="file" name="image" accept="image/*" /> <button type="submit">Upload</button> </form>9
<?php // Get reference to uploaded image $image_file = $_FILES["image"]; // Image not defined, let's exit if (!isset($image_file)) { die('No file uploaded.'); } // Move the temp image file to the images/ directory move_uploaded_file( // Temp image location $image_file["tmp_name"], // New image location, __DIR__ is the location of the current PHP file __DIR__ . "/images/" . $image_file["name"] );Dilakukan. Ini semua yang diperlukan untuk membuatnya bekerja
Sayangnya tidak semua orang di internet adalah orang suci. Skrip kami saat ini mengizinkan siapa saja untuk mengunggah apa pun, ini adalah risiko keamanan. Kami perlu memastikan orang mengunggah gambar yang valid dan tidak mencoba merusak server kami
Mengamankan Proses Pengunggahan Gambar
Kami akan memastikan ketiga hal ini sudah beres
- File harus berupa gambar
- File harus lebih kecil dari 5 MB
- File harus memiliki nama yang valid
Memastikan File Adalah Gambar
Mari kita mulai dengan memastikan bahwa file yang diunggah memang berupa gambar
Menggunakan <?php // Get reference to uploaded image $image_file = $_FILES["image"]; // Image not defined, let's exit if (!isset($image_file)) { die('No file uploaded.'); } // Move the temp image file to the images/ directory move_uploaded_file( // Temp image location $image_file["tmp_name"], // New image location, __DIR__ is the location of the current PHP file __DIR__ . "/images/" . $image_file["name"] );_0 kita bisa mendapatkan image mimetype, fungsinya mengembalikan <?php // Get reference to uploaded image $image_file = $_FILES["image"]; // Image not defined, let's exit if (!isset($image_file)) { die('No file uploaded.'); } // Move the temp image file to the images/ directory move_uploaded_file( // Temp image location $image_file["tmp_name"], // New image location, __DIR__ is the location of the current PHP file __DIR__ . "/images/" . $image_file["name"] );1 ketika file tersebut bukan gambar
<?php // Get reference to uploaded image $image_file = $_FILES["image"]; // Exit if no file uploaded if (!isset($image_file)) { die('No file uploaded.'); } // Exit if is not a valid image file $image_type = exif_imagetype($image_file["tmp_name"]); if (!$image_type) { die('Uploaded file is not an image.'); } // Move the temp image file to the images/ directory move_uploaded_file( // Temp image location $image_file["tmp_name"], // New image location __DIR__ . "/images/" . $image_file["name"] );Selanjutnya kita perlu menghentikan pengguna mengunggah file yang sangat besar
Membatasi Ukuran File
Pada contoh di bawah ini kami membatasi ukuran file gambar hingga 5MB, tentu saja Anda dapat memilih batas Anda sendiri, tetapi ada baiknya setidaknya membatasinya pada titik tertentu untuk mencegah pengguna mengunggah gigabyte data dalam upaya serangan DoS.
Di direktori skrip upload.php_ kami, kami membuat file <?php // Get reference to uploaded image $image_file = $_FILES["image"]; // Image not defined, let's exit if (!isset($image_file)) { die('No file uploaded.'); } // Move the temp image file to the images/ directory move_uploaded_file( // Temp image location $image_file["tmp_name"], // New image location, __DIR__ is the location of the current PHP file __DIR__ . "/images/" . $image_file["name"] );3 dan mengatur isinya sebagai berikut
LimitRequestBody 5242880Mencegah permintaan melebihi 5MB, perhatikan bahwa ini termasuk bidang lain dalam formulir
Sekarang pastikan pengguna tidak dapat mengunggah file 0 byte. Kami menggunakan <?php // Get reference to uploaded image $image_file = $_FILES["image"]; // Image not defined, let's exit if (!isset($image_file)) { die('No file uploaded.'); } // Move the temp image file to the images/ directory move_uploaded_file( // Temp image location $image_file["tmp_name"], // New image location, __DIR__ is the location of the current PHP file __DIR__ . "/images/" . $image_file["name"] );_5 untuk membacakan ukuran file sebenarnya alih-alih mengandalkan <?php // Get reference to uploaded image $image_file = $_FILES["image"]; // Image not defined, let's exit if (!isset($image_file)) { die('No file uploaded.'); } // Move the temp image file to the images/ directory move_uploaded_file( // Temp image location $image_file["tmp_name"], // New image location, __DIR__ is the location of the current PHP file __DIR__ . "/images/" . $image_file["name"] );6 yang dilaporkan oleh <?php // Get reference to uploaded image $image_file = $_FILES["image"]; // Image not defined, let's exit if (!isset($image_file)) { die('No file uploaded.'); } // Move the temp image file to the images/ directory move_uploaded_file( // Temp image location $image_file["tmp_name"], // New image location, __DIR__ is the location of the current PHP file __DIR__ . "/images/" . $image_file["name"] );7 karena dapat dimodifikasi oleh pengguna
<?php // Get reference to uploaded image $image_file = $_FILES["image"]; // Exit if no file uploaded if (!isset($image_file)) { die('No file uploaded.'); } // Exit if image file is zero bytes if (filesize($image_file["tmp_name"]) <= 0) { die('Uploaded file has no contents.'); } // Exit if is not a valid image file $image_type = exif_imagetype($image_file["tmp_name"]); if (!$image_type) { die('Uploaded file is not an image.'); } // Move the temp image file to the images/ directory move_uploaded_file( // Temp image location $image_file["tmp_name"], // New image location __DIR__ . "/images/" . $image_file["name"] );Mari sekarang pastikan nama file dari gambar itu valid
Menjaga Terhadap Nama File Berbahaya
Pelaku jahat dapat mencoba mengunggah gambar dengan nama <?php // Get reference to uploaded image $image_file = $_FILES["image"]; // Image not defined, let's exit if (!isset($image_file)) { die('No file uploaded.'); } // Move the temp image file to the images/ directory move_uploaded_file( // Temp image location $image_file["tmp_name"], // New image location, __DIR__ is the location of the current PHP file __DIR__ . "/images/" . $image_file["name"] );8, skrip PHP kami sekarang akan menyimpan "gambar" ini di <?php // Get reference to uploaded image $image_file = $_FILES["image"]; // Image not defined, let's exit if (!isset($image_file)) { die('No file uploaded.'); } // Move the temp image file to the images/ directory move_uploaded_file( // Temp image location $image_file["tmp_name"], // New image location, __DIR__ is the location of the current PHP file __DIR__ . "/images/" . $image_file["name"] );9 mungkin menimpa file <?php // Get reference to uploaded image $image_file = $_FILES["image"]; // Exit if no file uploaded if (!isset($image_file)) { die('No file uploaded.'); } // Exit if is not a valid image file $image_type = exif_imagetype($image_file["tmp_name"]); if (!$image_type) { die('Uploaded file is not an image.'); } // Move the temp image file to the images/ directory move_uploaded_file( // Temp image location $image_file["tmp_name"], // New image location __DIR__ . "/images/" . $image_file["name"] );0 kami sendiri
Kami dapat mencoba membersihkan nama file gambar, tetapi pendekatan yang lebih aman adalah membuat nama file kami sendiri
Kami akan menghasilkan beberapa <?php // Get reference to uploaded image $image_file = $_FILES["image"]; // Exit if no file uploaded if (!isset($image_file)) { die('No file uploaded.'); } // Exit if is not a valid image file $image_type = exif_imagetype($image_file["tmp_name"]); if (!$image_type) { die('Uploaded file is not an image.'); } // Move the temp image file to the images/ directory move_uploaded_file( // Temp image location $image_file["tmp_name"], // New image location __DIR__ . "/images/" . $image_file["name"] );_1 dan menggunakannya sebagai nama untuk gambar kami
<?php // Get reference to uploaded image $image_file = $_FILES["image"]; // Exit if no file uploaded if (!isset($image_file)) { die('No file uploaded.'); } // Exit if image file is zero bytes if (filesize($image_file["tmp_name"]) <= 0) { die('Uploaded file has no contents.'); } // Exit if is not a valid image file $image_type = exif_imagetype($image_file["tmp_name"]); if (!$image_type) { die('Uploaded file is not an image.'); } // Get file extension based on file type, to prepend a dot we pass true as the second parameter $image_extension = image_type_to_extension($image_type, true); // Create a unique image name $image_name = bin2hex(random_bytes(16)) . $image_extension; // Move the temp image file to the images directory move_uploaded_file( // Temp image location $image_file["tmp_name"], // New image location __DIR__ . "/images/" . $image_name );Langkah terakhir kita adalah mencegah kode dieksekusi di direktori <?php // Get reference to uploaded image $image_file = $_FILES["image"]; // Exit if no file uploaded if (!isset($image_file)) { die('No file uploaded.'); } // Exit if is not a valid image file $image_type = exif_imagetype($image_file["tmp_name"]); if (!$image_type) { die('Uploaded file is not an image.'); } // Move the temp image file to the images/ directory move_uploaded_file( // Temp image location $image_file["tmp_name"], // New image location __DIR__ . "/images/" . $image_file["name"] );2 kita
Mencegah Eksekusi Kode Di Direktori Gambar
Di direktori <?php // Get reference to uploaded image $image_file = $_FILES["image"]; // Exit if no file uploaded if (!isset($image_file)) { die('No file uploaded.'); } // Exit if is not a valid image file $image_type = exif_imagetype($image_file["tmp_name"]); if (!$image_type) { die('Uploaded file is not an image.'); } // Move the temp image file to the images/ directory move_uploaded_file( // Temp image location $image_file["tmp_name"], // New image location __DIR__ . "/images/" . $image_file["name"] );_2 kami, kami membuat file <?php // Get reference to uploaded image $image_file = $_FILES["image"]; // Image not defined, let's exit if (!isset($image_file)) { die('No file uploaded.'); } // Move the temp image file to the images/ directory move_uploaded_file( // Temp image location $image_file["tmp_name"], // New image location, __DIR__ is the location of the current PHP file __DIR__ . "/images/" . $image_file["name"] );3 dan mengatur isinya sebagai berikut untuk mencegah file PHP yang diunggah dijalankan
Ini memastikan bahwa kode PHP di folder ini tidak akan dijalankan. Jadi jika seseorang masih berhasil mengupload file PHP, misalnya file PHP yang disamarkan menjadi gambar, tetap tidak akan berjalan.
php_flag engine offProses pengunggahan file kami sekarang aman. 🎉
Kesimpulan
Kami telah menulis formulir dasar dengan elemen input file, untuk menangani unggahan kami membuat file PHP yang memindahkan gambar yang diunggah ke direktori di server. Untuk mengamankan proses upload, kami memastikan nama file valid, ukuran file tidak terlalu besar, dan file yang diupload benar-benar berupa gambar.
Jika Anda juga ingin menambahkan fungsionalitas pengeditan gambar ke kolom upload file, Anda dapat menggunakan elemen <?php // Get reference to uploaded image $image_file = $_FILES["image"]; // Exit if no file uploaded if (!isset($image_file)) { die('No file uploaded.'); } // Exit if is not a valid image file $image_type = exif_imagetype($image_file["tmp_name"]); if (!$image_type) { die('Uploaded file is not an image.'); } // Move the temp image file to the images/ directory move_uploaded_file( // Temp image location $image_file["tmp_name"], // New image location __DIR__ . "/images/" . $image_file["name"] );5. Komponen web bertenaga Pintura ini secara otomatis membuka editor gambar yang kuat saat gambar ditambahkan ke bidang dan memungkinkan pengguna Anda untuk mengedit gambar sebelum mengunggah