집 >웹 프론트엔드 >CSS 튜토리얼 >HTML 파일 입력 요소의 모양과 기능을 어떻게 사용자 정의할 수 있습니까?

HTML 파일 입력 요소의 모양과 기능을 어떻게 사용자 정의할 수 있습니까?

Barbara Streisand원래의: 2024-12-14 00:44:10650검색

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

성명：

이전 기사：SVG 패턴을 사용하여 원을 PNG 이미지로 채우는 방법은 무엇입니까?다음 기사：SVG 패턴을 사용하여 원을 PNG 이미지로 채우는 방법은 무엇입니까?