hujung hadapan webtutorial cssBagaimana untuk memilih berbilang fail menggunakan teg input HTML?
Teg input HTML ialah alat berkuasa yang membolehkan pembangun mencipta halaman web dinamik. Satu ciri berguna teg input ialah keupayaan untuk memilih berbilang fail serentak.
Teg input HTML ialah elemen yang biasa digunakan untuk membuat borang web dan membolehkan pengguna berinteraksi dengan aplikasi web. Salah satu kes penggunaan yang paling biasa untuk teg input ialah pemilihan fail di mana pengguna boleh memilih satu atau lebih fail untuk dimuat naik.
Teg input dalam HTML mempunyai pelbagai atribut yang membolehkan kami menyesuaikan tingkah laku teg. Atribut yang paling biasa digunakan untuk pemilihan fail ialah atribut "jenis" dengan nilai "fail". Atribut ini memberitahu pelayar bahawa elemen input digunakan untuk memilih fail.
Sintaks
<input type="file" name="files" multiple>
Dalam sintaks di atas −
Teg input digunakan untuk mencipta medan input pengguna pada halaman web.
Atribut type menentukan jenis medan input. Dalam kes ini, kami menggunakan type="file" untuk mencipta medan muat naik fail.
Atribut name menentukan nama medan input fail. Nama ini akan digunakan untuk mengenal pasti medan input fail apabila borang diserahkan.
Atribut berbilang menentukan bahawa pengguna boleh memilih berbilang fail untuk dimuat naik.
Mencipta Tag Input HTML untuk Muat Naik Fail
Untuk membuat teg input HTML untuk muat naik fail yang membolehkan pengguna memilih berbilang fail, kami akan menggunakan kod HTML berikut −
<input type="file" name="fileUpload" multiple>
Dalam contoh ini, kami menggunakan atribut jenis "fail" untuk membuat teg input untuk muat naik fail. Kami juga menentukan atribut nama untuk teg input supaya kami boleh mengenal pasti fail yang dimuat naik di bahagian pelayan.
Menambah Label pada Teg Input
Adalah amalan yang baik untuk menambah label pada teg input fail supaya pengguna mengetahui jenis fail yang mereka patut muat naik. Berikut ialah contoh cara menambah label pada teg input fail −
<label for="fileUpload">Choose the files to upload:</label> <input type="file" id="fileUpload" name="files[]" multiple>
Dalam contoh ini, kami menggunakan atribut "untuk" tag label untuk memautkan label dengan teg input fail. Kami juga menggunakan atribut "id" bagi teg input untuk memadankannya dengan label.
Menggayakan Medan Input Fail
Pandangan lalai medan input fail kelihatan tidak menarik dan mungkin tidak sesuai dengan reka bentuk tapak web. Jadi, kami menggunakan CSS untuk menggayakan medan input fail.
Contoh 1
Berikut ialah contoh medan input fail asas dengan berbilang atribut.
<!DOCTYPE html>
<html>
<head>
<style>
body{
text-align:center;
}
</style>
</head>
<body>
<h3 id="Basic-file-input-field-with-multiple-attributes">Basic file input field with multiple attributes</h3>
<p> You can choose multiple files below
<form method="post" action="upload.php" enctype="multipart/form-data">
<label for="fileUpload">Choose files:</label>
<input type="file" id="fileUpload" name="files[]" multiple>
<input type="submit" name="submit" value="Submit">
</form>
</body>
</html>
Contoh 2
Berikut ialah satu lagi contoh medan input fail dengan penggayaan tersuai.
<!DOCTYPE html>
<html>
<head>
<style>
body{ text-align:center; }
.file-upload {
overflow: hidden;
display: inline-block;
background-color: #009688;
color: #fff;
padding: 10px 20px;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
}
.file-upload input[type=file] {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0;
cursor: pointer;
}
.submit-btn{
display: inline-block;
background-color: #544000;
color: #fff;
padding: 10px;
width:125px;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body>
<h3 id="File-input-field-with-custom-styling">File input field with custom styling</h3>
<form method="post" action="upload.php" enctype="multipart/form-data">
<label class="file-upload"> Choose Files
<input type="file" name="files[]" multiple>
</label> <br>
<input class="submit-btn" type="submit" name="submit" value="Submit">
</form>
</body>
</html>
Kesimpulan
Dalam artikel ini, kami telah membincangkan cara memilih berbilang fail menggunakan teg input HTML. Dengan menambahkan berbilang atribut pada teg input, pengguna boleh memilih berbilang fail untuk dimuat naik. Kami juga telah menunjukkan cara untuk menggayakan medan input fail. Dengan teknik ini, anda boleh mencipta ciri muat naik fail yang mesra pengguna untuk aplikasi web.
Atas ialah kandungan terperinci Bagaimana untuk memilih berbilang fail menggunakan teg input HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Begitu banyak pautan warnaApr 13, 2025 am 11:36 AMDi sana ' s telah menjalankan alat, artikel, dan sumber tentang warna akhir -akhir ini. Tolong izinkan saya menutup beberapa tab dengan membulatkannya di sini untuk keseronokan anda.
Bagaimana margin automatik berfungsi di flexboxApr 13, 2025 am 11:35 AMRobin telah menutupi ini sebelum ini, tetapi saya telah mendengar kekeliruan mengenainya dalam beberapa minggu yang lalu dan melihat orang lain menikam menerangkannya, dan saya mahu
Melangkah Rainbow Garis bawahApr 13, 2025 am 11:27 AMSaya sangat suka reka bentuk tapak sandwic. Di antara banyak ciri yang indah ialah tajuk utama ini dengan garis bawah Rainbow yang bergerak ketika anda menatal. Ia ' s tidak
Tahun Baru, pekerjaan baru? Let ' s membuat resume berkuasa grid!Apr 13, 2025 am 11:26 AMBanyak reka bentuk resume yang popular membuat sebahagian besar ruang halaman yang tersedia dengan meletakkan bahagian dalam bentuk grid. Mari kita gunakan grid CSS untuk membuat susun atur yang
Salah satu cara untuk memecahkan pengguna dari kebiasaan tambah nilai terlalu banyakApr 13, 2025 am 11:25 AMTambah nilai halaman adalah satu perkara. Kadang -kadang kita menyegarkan halaman apabila kita fikir ia tidak bertindak balas, atau percaya bahawa kandungan baru tersedia. Kadang -kadang kita hanya marah
Reka bentuk yang didorong oleh domain dengan ReactApr 13, 2025 am 11:22 AMTerdapat panduan yang sangat sedikit tentang cara mengatur aplikasi front-end di dunia React. (Hanya gerakkan fail sehingga ia "terasa betul," lol). Kebenaran
Mengesan pengguna yang tidak aktifApr 13, 2025 am 11:08 AMKebanyakan masa anda tidak benar -benar peduli sama ada pengguna secara aktif terlibat atau tidak aktif sementara pada aplikasi anda. Tidak aktif, makna, mungkin mereka
Wufoo ZapierApr 13, 2025 am 11:02 AMWufoo sentiasa hebat dengan integrasi. Mereka mempunyai integrasi dengan aplikasi tertentu, seperti Monitor Kempen, MailChimp, dan TypeKit, tetapi mereka juga
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
mPDF
mPDF ialah perpustakaan PHP yang boleh menjana fail PDF daripada HTML yang dikodkan UTF-8. Pengarang asal, Ian Back, menulis mPDF untuk mengeluarkan fail PDF "dengan cepat" dari tapak webnya dan mengendalikan bahasa yang berbeza. Ia lebih perlahan dan menghasilkan fail yang lebih besar apabila menggunakan fon Unicode daripada skrip asal seperti HTML2FPDF, tetapi menyokong gaya CSS dsb. dan mempunyai banyak peningkatan. Menyokong hampir semua bahasa, termasuk RTL (Arab dan Ibrani) dan CJK (Cina, Jepun dan Korea). Menyokong elemen peringkat blok bersarang (seperti P, DIV),
DVWA
Damn Vulnerable Web App (DVWA) ialah aplikasi web PHP/MySQL yang sangat terdedah. Matlamat utamanya adalah untuk menjadi bantuan bagi profesional keselamatan untuk menguji kemahiran dan alatan mereka dalam persekitaran undang-undang, untuk membantu pembangun web lebih memahami proses mengamankan aplikasi web, dan untuk membantu guru/pelajar mengajar/belajar dalam persekitaran bilik darjah Aplikasi web keselamatan. Matlamat DVWA adalah untuk mempraktikkan beberapa kelemahan web yang paling biasa melalui antara muka yang mudah dan mudah, dengan pelbagai tahap kesukaran. Sila ambil perhatian bahawa perisian ini
Dreamweaver Mac版
Alat pembangunan web visual
SecLists
SecLists ialah rakan penguji keselamatan muktamad. Ia ialah koleksi pelbagai jenis senarai yang kerap digunakan semasa penilaian keselamatan, semuanya di satu tempat. SecLists membantu menjadikan ujian keselamatan lebih cekap dan produktif dengan menyediakan semua senarai yang mungkin diperlukan oleh penguji keselamatan dengan mudah. Jenis senarai termasuk nama pengguna, kata laluan, URL, muatan kabur, corak data sensitif, cangkerang web dan banyak lagi. Penguji hanya boleh menarik repositori ini ke mesin ujian baharu dan dia akan mempunyai akses kepada setiap jenis senarai yang dia perlukan.
