CSS를 사용하여 양식 요소를 아름답게 만들 때 파일 업로드 제어를 아름답게 만드는 좋은 방법은 없었습니다. http://www.quirksmode.org/dom/inputfile.html (웹사이트에 오류가 있는 것 같습니다)에서는 파일 업로드 제어를 아름답게 하는 방법을 제공합니다. 이 방법에 영감을 받아 자체 프로젝트를 결합하여 기능을 개선한 결과 다음과 같은 특징이 있습니다.
인터넷에 이미 jQuery.fakeFile이라는 플러그인이 있으므로 구별하기 위해 jQuery.liveFakeFile이라는 이름을 지정하겠습니다. 이번 글에서는 이 방법의 원리와 사용법을 소개하겠습니다.
1. 수요
요구 사항은 매우 간단하지만 이를 구현하려면 다음과 같이 간략하게 설명하는 특정 기술이 필요합니다.
2. 분석
버튼을 클릭하면 그림 선택 대화 상자가 팝업되는 효과를 실감해보세요.
텍스트 업로드 컨트롤 앞에 입력 상자가 있습니다(이 기사 를 번역한 ljzcome ). 그런 다음 파일 업로드 컨트롤의 불투명도 속성을 변경하고 0으로 설정합니다. 위치 지정 속성을 사용하여 클릭 영역이 버튼 위에 있도록 합니다. 이런 식으로 사용자가 클릭할 때마다 버튼을 클릭한 것처럼 보이지만 실제로는 텍스트 업로드 제어 그 자체입니다.
사용자가 선택한 이미지 표시
그림을 표시하는 것은 매우 간단해 보이지만 브라우저마다 차이가 있습니다. IE6은 그림을 올바르게 표시할 수 없으며 IE7은 AlphaImageLoder 필터를 사용하여 표시할 수 있습니다. Firefox는 이미지를 정상적으로 표시할 수 없지만 이미지를 표시하는 방법(getAsDataURL())이 있습니다. 다른 브라우저인 Opera와 Safari에서는 이미지를 제대로 표시할 수 없습니다. 따라서 우리는 브라우저 스니핑 기술을 사용하여 서로 다른 브라우저를 별도로 처리하고, 이미지를 표시할 수 없는 브라우저만 정상적으로 텍스트를 표시하도록 합니다.
이미지 형식 결정
파일 업로드 컨트롤의 변경 이벤트가 트리거될 때만 정규식 확인을 통과하면 됩니다. 형식 요구 사항이 충족되면 이미지 또는 프롬프트 텍스트가 표시되고, 그렇지 않으면 오류 메시지가 표시됩니다.
유용성 분석
js는 파일 업로드 컨트롤의 모양을 변경하는 데 사용되므로 js가 비활성화된 경우 사용자가 이미지를 정상적으로 업로드할 수 있는지 확인해야 합니다. 따라서 우리가 html 구조에 배치하는 것은 일반적인 파일 업로드 컨트롤이어야 합니다.