파일 입력 요소를 숨기고 '찾아보기' 버튼으로 바꾸는 방법은 무엇입니까?

찾아보기 버튼으로 파일 입력 요소를 세련되게 숨기기

<input type="file"> 요소에는 선택한 파일 경로를 표시하는 텍스트 필드가 포함되어 있습니다. 그러나 파일 경로가 표시되지 않는 다중 파일 업로드와 같은 상황에서는 "찾아보기" 버튼만 보이는 보다 간소화된 인터페이스를 선호할 수 있습니다.

이를 달성하려면 CSS와 JavaScript를 활용할 수 있습니다.

<input type="file">

이 코드 조각은 onclick 이벤트 리스너를 사용하여 ID가 ​​"selectedFile"이고 "찾아보기..."라는 표시 버튼이 있는 숨겨진 파일 입력 요소를 생성합니다. 버튼을 클릭하면 숨겨진 파일 입력 요소의 클릭 이벤트가 트리거되어 보이는 텍스트 필드 없이 파일을 선택할 수 있습니다.

예를 들어 morningz.com에서 언급한 다중 파일 업로드 코드를 사용하는 경우 , 이 기술을 통합하여 사용자 인터페이스를 향상할 수 있습니다.

<input type="file">

이 수정을 통해 다중 파일 업로드 페이지에는 "찾아보기..." 버튼만 표시되어 보다 사용자 친화적이고 간소화된 경험.

위 내용은 파일 입력 요소를 숨기고 '찾아보기' 버튼으로 바꾸는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!