首页 >web前端 >css教程 >如何自定义 HTML 文件输入元素的外观和功能？

如何自定义 HTML 文件输入元素的外观和功能？

Barbara Streisand原创: 2024-12-14 00:44:10655浏览

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中文网其他相关文章！

JavaScript css html for using Event this border background input

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：How to Fill a Circle with a PNG Image Using SVG Patterns?下一篇：How to Autosize a Textarea Vertically Using Prototype?

查看更多