Pertama buat folder bernama, "unggah-gambar". Di bawah "upload-image", buat folder lain untuk gambar, beri nama "image" tempat gambar saya akan ditampilkan setelah diupload
Struktur Folder
Langkah 2
1. Buat file bernama, “index. php” dan simpan di bawah “upload-image”
2. Before tag, type this script:
3. Next, under tag, write down the following code:
<form id="form" method="post" action="upload.php" enctype="multipart/form-data" target="iframe"> <input type="file" id="file" name="file"><br><br> <input type="submit" id="submit" name="submit" value="Submit"><br> </form> <p id="message">Message will show here</p> <img id="image" name="image" style="min-height:120;min-width:200;max-height:120px;”> <iframe id="iframe" style="display:none;" name="iframe"></iframe> _Langkah 3
1. Sekarang, buat file baru bernama, “upload. php” dan simpan di bawah “upload-image”
2. Di sini, tuliskan skrip berikut
Sekarang, jalankan file. Sebelum menjalankan file, pastikan server lokal berjalan jika tidak, kami tidak akan dapat menampilkan halaman PHP. Setelah berhasil mengunggah gambar, masuk ke folder "gambar", di sini kita melihat gambar yang diunggah
*** Untuk pengguna Linux,
Setelah mengikuti semua langkah, jika gambar tidak dapat ditampilkan di halaman, buka Terminal dan minta izin untuk folder tersebut
Pada artikel ini, saya akan menunjukkan kepada Anda cara membuat unggahan gambar khusus dan desain pratinjau. Pratinjau Gambar adalah sistem hebat tempat Anda dapat memeriksa sebelum mengunggah gambar apakah gambar memenuhi syarat untuk diunggah
Ini adalah sistem yang sangat sederhana yang hanya dapat Anda buat dengan bantuan HTML dan javascript. Tapi di sini saya menggunakan sedikit CSS untuk mendesainnya
✅ Tonton Pratinjau Langsung 👉👉 Unggah Gambar Dengan Pratinjau
HTML memiliki banyak jenis fungsi input, salah satunya adalah teks, kata sandi, email, dll. yang selalu kami gunakan. Ada juga jenis input lain yang dikenal sebagai file input (<input type=" file">). Di sini Anda dapat menggunakan semua jenis file untuk input
Ini mirip dengan desain input umum. Hanya 'File' yang akan digunakan sebagai pengganti 'Password' atau 'Email'. Ini akan menerima file dari perangkat Anda dan kemudian menampilkannya sebagai pratinjau. Namun, untuk melakukan pratinjau gambar ini, Anda harus mengambil bantuan JavaScript atau JQuery. Di sini saya telah membuat desain pengunggahan dan pratinjau gambar ini menggunakan Pure JavaScript
Pratinjau gambar sebelum diunggah
Sekarang saatnya untuk memahami sepenuhnya bagaimana itu dibuat. Sebelum memulai tutorial, izinkan saya memberi tahu Anda beberapa poin penting. Pertama saya mendesain halaman web menggunakan beberapa CSS. Lalu saya membuat kotak di halaman web. Saya membuat tombol kecil menggunakan input di kotak itu
Saya menggunakan level untuk membuat tombol ini di sini. Dengan ini, saya telah membuat tampilan kecil untuk mempratinjau gambar. Saya menerapkannya menggunakan JavaScript pada akhirnya. Mari kita lihat cara membuatnya dalam langkah lengkap di bawah ini
Langkah 1. Desain halaman web dengan CSS
Pertama saya mendesain halaman web menggunakan kode CSS. Di sini kita telah mengatur warna latar belakang halaman web menjadi biru dan tingginya 100vh
body { margin:0px; height:100vh; background: #1283da; }
Masuk ke mode layar penuh Keluar dari mode layar penuh
Langkah 2. Buat struktur dasar pratinjau gambar
Sekarang saya telah membuat kotak kecil di halaman web menggunakan beberapa HTML dan CSS dasar. Seperti yang Anda lihat di atas, pratinjau gambar dan tombol semuanya ada di kotak ini
Lebar kotaknya 350 px dan warna latar belakangnya putih. Saya telah menggunakan beberapa bayangan kotak di sini yang membuatnya lebih cerah dan lebih menarik
<div class="center"> <div class="form-input"> </div> </div> _
Masuk ke mode layar penuh Keluar dari mode layar penuh
.center { height:100%; display:flex; align-items:center; justify-content:center; } .form-input { width:350px; padding:20px; background:#fff; box-shadow: -3px -3px 7px rgba(94, 104, 121, 0.377), 3px 3px 7px rgba(94, 104, 121, 0.377); }
Masuk ke mode layar penuh Keluar dari mode layar penuh
Langkah 3. Buat tempat untuk melihat pratinjau gambar
Saya membuat tampilan kecil untuk melihat gambar pratinjau. Meski tidak bisa dilihat dalam kondisi normal. Ini hanya dapat dilihat ketika kami mengimplementasikannya dengan bantuan JavaScript
<div class="preview"> <img id="file-ip-1-preview"> </div> _
Masuk ke mode layar penuh Keluar dari mode layar penuh
.form-input img { width:100%; display:none; margin-bottom:30px; }
Masuk ke mode layar penuh Keluar dari mode layar penuh
Langkah 4. Buat kotak input dan tombol
Sekarang saya telah membuat kotak input menggunakan input file dan membuat tombol di sana. Saya menggunakan level input untuk membuat tombol ini. Kemudian, dengan menggunakan CSS, saya memberi level itu bentuk tombol. Tinggi tombol 45 px dan width 45%
<label for="file-ip-1">Upload Image</label> <input type="file" id="file-ip-1" accept="image/*" onchange="showPreview(event);"> _
Masuk ke mode layar penuh Keluar dari mode layar penuh
.form-input input { display:none; } .form-input label { display:block; width:45%; height:45px; margin-left: 25%; line-height:50px; text-align:center; background:#1172c2; color:#fff; font-size:15px; font-family:"Open Sans",sans-serif; text-transform:Uppercase; font-weight:600; border-radius:5px; cursor:pointer; } _
Masuk ke mode layar penuh Keluar dari mode layar penuh
Langkah 5. Aktifkan Pengunggahan Gambar dengan kode JavaScript
Seperti yang Anda lihat di atas, kami telah mendesainnya sepenuhnya. Sekarang saya akan mengimplementasikan sistem pratinjau gambar ini dengan bantuan JavaScript
function showPreview(event){ if(event.target.files.length > 0){ var src = URL.createObjectURL(event.target.files[0]); var preview = document.getElementById("file-ip-1-preview"); preview.src = src; preview.style.display = "block"; } }
Masuk ke mode layar penuh Keluar dari mode layar penuh
Setelah menggunakan js, pratinjau dan unggahan gambar akan sepenuhnya efektif. Kemudian ketika Anda mengklik tombol unggah, Anda akan melihat pratinjau gambar apa pun yang Anda pilih dari file Anda
Pos Terkait
- Footer Desain HTML CSS
- Buat Daftar Todo menggunakan JavaScript
- Stopwatch sederhana menggunakan JavaScript
- Kalkulator Usia Javascript
- Generator Kata Sandi Acak dengan JavaScript
- Penggeser Gambar Otomatis dalam Html, CSS
- Menu Sidebar Menggunakan HTML CSS
Semoga dari tutorial diatas anda sudah belajar cara membuat upload gambar dengan preview. Saya telah membuat sistem pratinjau beberapa gambar menggunakan JQuery