Bagaimanakah Saya Boleh Menyesuaikan Rupa dan Fungsi Elemen Input Fail HTML?-tutorial css-php.cn

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

Barbara Streisand

Lepaskan： 2024-12-14 00:44:10

asal

648 orang telah melayarinya

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>

Salin selepas log masuk

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

Salin selepas log masuk

2. Muat Naik Automatik:

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

<form action="#">
  <div>

Salin selepas log masuk

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

Salin selepas log masuk

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>

Salin selepas log masuk

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!