关于input的file 控件及美化
在一些网站进行上传时，当单击了“浏览”按钮之后会弹出【选择文件】的对话框。想要实现这一功能，用input的file控件来实现就好啦~
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style></style> </head> <body> <input type="file" value="选择文件" /> </body> </html>
效果图是酱婶的：
注意！别以为这个是由一个text和一个button组合成的，其实它就是一个file控件哦
今天工作中遇到要求：不显示“未选择任何文件”，捣鼓够一个小时，发现设置它的width值就搞定了：
代码：
width值设置为70px刚刚好，如下图：
【美化】
思路：
外面的一层p是为了给里面的input提供位置参考，因为写样式的时候需要相对定位，使真正的file控件覆盖在模拟的上面，然后隐藏掉file控件（即使file控件不可见）
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.file-box{ position:relative;width:340px}
.txt{ height:22px; border:1px solid #cdcdcd; width:180px;}
.btn{ background-color:#FFF; border:1px solid #CDCDCD;height:24px; width:70px;}
.file{ position:absolute; top:0; right:80px; height:24px; opacity:0;width:260px; }
</style>
</head>
<body>
<br><br>
<p class="file-box">
<form action="" method="post" enctype="multipart/form-data">
<input type='text' name='textfield' id='textfield' class='txt' />
<input type='button' class='btn' value='浏览' />
<input type="file" name="fileField" class="file" id="fileField" size="28"/>
</form>
</p>
</body>
</html>效果：
以上这篇关于input的file 控件及美化就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支PHP中文网。
更多关于input的file 控件及美化相关文章请关注PHP中文网！
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
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Gunakan fungsi File.length() java untuk mendapatkan saiz fail
Jul 24, 2023 am 08:36 AM
Gunakan fungsi File.length() Java untuk mendapatkan saiz fail Saiz fail adalah keperluan yang sangat biasa apabila berurusan dengan operasi fail Java menyediakan cara yang sangat mudah untuk mendapatkan saiz fail, iaitu, menggunakan panjang(. ) kaedah kelas Fail. Artikel ini akan memperkenalkan cara menggunakan kaedah ini untuk mendapatkan saiz fail dan memberikan contoh kod yang sepadan. Pertama, kita perlu mencipta objek Fail untuk mewakili fail yang kita ingin dapatkan saiznya. Berikut ialah cara membuat objek Fail: Filef
Bagaimana untuk menukar gumpalan php kepada fail
Mar 16, 2023 am 10:47 AM
Cara menukar gumpalan php kepada fail: 1. Buat fail sampel php 2. Melalui "function blobToFile(blob) {return new File([blob], 'screenshot.png', { type: 'image/jpeg' }) } ” kaedah boleh digunakan untuk menukar Blob kepada Fail.
Aplikasi asli Hongmeng puisi rawak
Feb 19, 2024 pm 01:36 PM
Untuk mengetahui lebih lanjut tentang sumber terbuka, sila lawati: Komuniti Pembangun 51CTO Hongmeng https://ost.51cto.com Persekitaran berjalan DAYU200:4.0.10.16SDK: 4.0.10.15IDE: 4.0.600 1. Untuk membuat aplikasi, klik Fail- >newFile->CreateProgect. Pilih templat: [OpenHarmony] EmptyAbility: Isikan nama projek, shici, nama pakej aplikasi com.nut.shici dan lokasi storan aplikasi XXX (tiada bahasa Cina, aksara khas atau ruang). CompileSDK10, Model: Stage. Peranti
Namakan semula fail menggunakan fungsi File.renameTo() java
Jul 25, 2023 pm 03:45 PM
Gunakan fungsi File.renameTo() Java untuk menamakan semula fail Dalam pengaturcaraan Java, kita selalunya perlu menamakan semula fail. Java menyediakan kelas Fail untuk mengendalikan operasi fail, dan fungsi renameTo() boleh menamakan semula fail dengan mudah. Artikel ini akan memperkenalkan cara menggunakan fungsi File.renameTo() Java untuk menamakan semula fail dan menyediakan contoh kod yang sepadan. Fungsi File.renameTo() ialah kaedah kelas Fail.
Gunakan fungsi File.getParent() java untuk mendapatkan laluan induk fail
Jul 24, 2023 pm 01:40 PM
Gunakan fungsi File.getParent() java untuk mendapatkan laluan induk fail Dalam pengaturcaraan Java, kita selalunya perlu mengendalikan fail dan folder. Kadangkala, kita perlu mendapatkan laluan induk bagi fail, iaitu laluan folder tempat fail itu berada. Kelas Fail Java menyediakan kaedah getParent() untuk mendapatkan laluan induk bagi fail atau folder. Kelas Fail ialah perwakilan abstrak Java bagi fail dan folder. Ia menyediakan satu siri kaedah untuk mengendalikan fail dan folder. Antaranya, dapatkan
Bagaimana untuk merangkum komponen input dan data borang bersatu dalam vue3
May 12, 2023 pm 03:58 PM
Penyediaan Gunakan vuecreateexample untuk mencipta projek Parameternya adalah seperti berikut: gunakan input asli terutamanya nilai dan perubahan. App.tsx adalah seperti berikut: import{ref}from'vue';exportdefault{setup(){//username is the data constusername=ref('Zhang San');//Apabila kotak input berubah, segerakkan data constonInput =;kembali( )=>({
Bagaimana untuk melaksanakan medan tersembunyi input laravel
Dec 12, 2022 am 10:07 AM
Cara melaksanakan medan tersembunyi input laravel: 1. Cari dan buka fail templat Blade 2. Gunakan kaedah method_field dalam templat Blade untuk mencipta medan tersembunyi Sintaks penciptaan ialah "{{ method_field('DELETE') }} ".
Gunakan fungsi File.getParentFile() java untuk mendapatkan direktori induk fail
Jul 27, 2023 am 11:45 AM
Gunakan fungsi File.getParentFile() java untuk mendapatkan direktori induk fail Dalam pengaturcaraan Java, kita selalunya perlu mengendalikan fail dan folder. Apabila kita perlu mendapatkan direktori induk fail, kita boleh menggunakan fungsi File.getParentFile() yang disediakan oleh Java. Artikel ini menerangkan cara menggunakan fungsi ini dan menyediakan contoh kod. Kelas fail dalam Java ialah kelas utama yang digunakan untuk mengendalikan fail dan folder. Ia menyediakan banyak kaedah untuk mendapatkan dan memanipulasi sifat fail
