如何自訂 HTML 文件輸入元素的外觀和功能？-css教學-PHP中文網

如何自訂 HTML 文件輸入元素的外觀和功能？

Barbara Streisand

發布： 2024-12-14 00:44:10

原創

648 人瀏覽過

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

樣式輸入型檔？ [重複]

自訂檔案輸入元素的外觀可能具有挑戰性，特別是由於瀏覽器相容性問題。然而，有一些有效的技術可以實現這一點：

1。 HTML 與 CSS 自訂：

使用
使用
建立自訂按鈕並使用 CSS 對其進行樣式設定（背景圖片、邊框）。
按一下自訂按鈕時，使用 JavaScript 觸發檔案輸入上的按一下事件。

<form action="#">
  <div>

登入後複製

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

登入後複製

2.自動上傳：

要自動執行檔案上傳過程，請將 onchange事件加入文件輸入元素：

<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.完整範例：

這個綜合範例包含具有自動提交功能的功能齊全的自訂文件上傳表單的所有必要代碼：

<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>

登入後複製

以上是如何自訂 HTML 文件輸入元素的外觀和功能？的詳細內容。更多資訊請關注PHP中文網其他相關文章！