HTML 파일 입력 요소의 모양과 기능을 어떻게 사용자 정의할 수 있습니까?-CSS 튜토리얼-php.cn

스타일 입력 유형 파일? [중복]

집

웹 프론트엔드

CSS 튜토리얼

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

Barbara Streisand

Dec 14, 2024 am 12:44 AM

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.