Rumah >hujung hadapan web >tutorial css >Bagaimanakah Saya Boleh Menyesuaikan Rupa dan Fungsi Elemen Input Fail HTML?

Bagaimanakah Saya Boleh Menyesuaikan Rupa dan Fungsi Elemen Input Fail HTML?

Barbara Streisandasal: 2024-12-14 00:44:10650semak imbas

How Can I Customize the Appearance and Functionality of an HTML File Input Element?

Fail Jenis Input Gaya? [pendua]

Memperibadikan penampilan elemen input fail boleh menjadi mencabar, terutamanya disebabkan oleh isu keserasian penyemak imbas. Walau bagaimanapun, terdapat teknik yang berkesan untuk mencapai ini:

1. Penyesuaian HTML dan CSS:

Buat elemen input fail tersembunyi menggunakan
Buat butang tersuai menggunakan
dan gayakannya menggunakan CSS (imej latar belakang, jidar).
Gunakan JavaScript untuk mencetuskan acara klik pada input fail apabila butang tersuai diklik.

<form action="#">
  <div>

function getFile() {
  document.getElementById("upfile").click();
}

2. Muat Naik Automatik:

Untuk mengautomasikan proses muat naik fail, tambahkan acara perubahan pada elemen input fail:

<form action="#">
  <div>

function sub(obj) {
  var file = obj.value;
  var fileName = file.split("\");
  document.getElementById("yourBtn").innerHTML = fileName[fileName.length - 1];
  document.myForm.submit();
  event.preventDefault();
}

3. Contoh Lengkap:

Contoh komprehensif ini termasuk semua kod yang diperlukan untuk borang muat naik fail tersuai berfungsi sepenuhnya dengan penyerahan automatik:

<html>
<style>
  #yourBtn {
    position: relative;
    top: 150px;
    font-family: calibri;
    width: 150px;
    padding: 10px;
    border-radius: 5px;
    border: 1px dashed #BBB;
    text-align: center;
    background-color: #DDD;
    cursor: pointer;
  }
</style>
<script type="text/javascript">
  function getFile() {
    document.getElementById("upfile").click();
  }
  function sub(obj) {
    var file = obj.value;
    var fileName = file.split("\");
    document.getElementById("yourBtn").innerHTML = fileName[fileName.length - 1];
    document.myForm.submit();
    event.preventDefault();
  }
</script>

<body>
  <center>
    <form action="#" method="POST" enctype="multipart/form-data" name="myForm">
      <div>

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menyesuaikan Rupa dan Fungsi Elemen Input Fail HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript css html for using Event this border background input

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Bagaimana untuk Mengisi Bulatan dengan Imej PNG Menggunakan Corak SVG?Artikel seterusnya：Bagaimana untuk Mengisi Bulatan dengan Imej PNG Menggunakan Corak SVG?

Artikel berkaitan

Lihat lagi