html의 파일 찾아보기 버튼을 대체하는 가장 좋은 방법은 무엇입니까?

Question

input 태그를 type="file과 함께 사용하면 html로 생성 된 찾아보기 버튼을 교체 할 수 있다는 것을 알고 있습니다.

나는 무엇이 최선의 방법인지 모르겠다. 누군가이 경험을 가지고 있다면 기부 해주십시오. 절대적 위치 뭔가 - (: 또는 "표시 없음는"하지 않는다 "숨겨진가시성"매우 낮은 불투명도를 제공하여)

Answer 1

가장 좋은 방법은 거의 보이지 않는 파일 입력 컨트롤을 만드는 것입니다 그 아래에 - 더 낮은 z- 색인.

이렇게하면 실제 컨트롤을 볼 수 없으며 사용자가 입력 한 내용이 모두 표시됩니다. 하지만 컨트롤이 버튼 위에 위치하기 때문에 클릭 이벤트가 캡처됩니다 (이 때문에 가시성이나 표시가 아닌 불투명도를 사용하려는 이유 - 브라우저에서 요소를 숨기면 요소를 클릭 취소 할 수 없게됩니다).

This article은 기술에 대해 자세히 설명합니다.

Answer 2

이것은 보안 상 기술적으로 가능하지 않으므로 사용자를 속일 수 없습니다.

그러나 몇 가지 해결 방법이 있습니다. 예를 들어 http://www.quirksmode.org/dom/inputfile.html을 살펴보십시오.

기록을 위해이 질문에 이미 묻습니다. here (동일한 대답을 한 곳).

Answer 3

브라우저는 파일 입력을 어지럽히 지 않는 것을 좋아하지만 실제로는 가능합니다. 두 가지 기술을 보았지만 가장 간단한 방법은 단추로 사용하려는 파일 위에 파일 입력을 절대적으로 배치하고 불투명도를 0 또는 거의 0으로 설정하는 것입니다. 즉, 사용자가 이미지 (또는 그 아래에있는 것이 무엇이든)를 클릭하면 보이지 않는 찾아보기 버튼을 실제로 클릭하고 있다는 것을 의미합니다. 당신이 0에 파일 입력의 opasity을 설정할 수 있습니다 자바 스크립트 사용 괜찮다면

<input type="file" id="fileInput"> 
<img src="..."> 

#fileInput{ 
    position: absolute; 
    opacity: 0; 
    -moz-opacity: 0; 
    filter: alpha(opacity=0); 
} 

Answer 4

가, Z- 인덱스를 통해 정상에 당신의 스타일 컨트롤을 배치하고 보내 예를 들어

버튼에서 파일 입력까지를 클릭하십시오. 이 기술에 대해서는 여기를 참조하십시오. http://www.quirksmode.org/dom/inputfile.html

Answer 5

SWFupload과 같은 플래시 업 로더도 사용할 수 있습니다.