입력 버튼을 파일 선택 창에 연결하는 방법은 무엇입니까?

Question

가능한 중복 :
Jquery trigger file input

나는 사용자가 웹 사이트에 이미지를 업로드 할 수있는 형태로 일하고 있어요. 지금까지 Chrome과 Safari에서 작동하는 드래그 앤 드롭 솔루션이 있습니다. 그러나 사용자가 버튼을 클릭하고 기존 방식으로 파일을 탐색하는 작업을 지원해야합니다.

<input type="file" name="my_file"> 

을하지만 대신 어설픈 파일 설명 영역 및 취소 편집 찾아보기 버튼이 차라리 같은 것을 사용하는 것이 갖는 :

<input type="button" id="get_file"> 

내 질문이 어떻게 할 것인지 유사

따라서이 버튼을 파일 선택 창을 열고 어떻게 처리 할 것인가와 동일한 방법으로 선택을 처리하는 방법은 무엇입니까? type="file"

건배.

---

내 솔루션

HTML :

<input type="button" id="my-button" value="Select Files"> 
<input type="file" name="my_file" id="my-file"> 

CSS :

#my-file { visibility: hidden; } 

jQuery를 :

$('#my-button').click(function(){ 
    $('#my-file').click(); 
}); 

Chrome, Firefox 및 IE7 +에서 지금까지 작업했습니다 (IE6을 사용해 본적 없음).

Answer 1

JavaScript를 사용하여 버튼 입력을 클릭하면 숨겨진 파일 입력을 트리거 할 수 있습니다.

http://jsfiddle.net/gregorypratt/dhyzV/ - 간단한

http://jsfiddle.net/gregorypratt/dhyzV/1/ - 조금 JQuery와

또는, 당신은 클릭 이벤트가 통과 할 수 있도록 없음으로 CSS에 pointer-events을 직접 파일 입력을 통해 사업부의 스타일을 설정할 수와 애호가 공상 div의 "뒤에"있는 파일 입력.이것은 특정 브라우저에서만 작동합니다. http://caniuse.com/pointer-events

Answer 2

사용자가 파일을 탐색 할 수있게하려면 input type="file"이 있어야합니다. 요구 사항에 가장 근접한 것은 페이지에 input type="file"을 놓고 숨기는 것입니다. 버튼을 클릭하면 다음, 입력의 클릭 이벤트를 트리거 :

#myFileInput { 
    display:none; 
} 

<input type="file" id="myFileInput" /> 
<input type="button" 
     onclick="document.getElementById('myFileInput').click()" 
     value="Select a File" /> 

여기 a working fiddle입니다.

참고 :이 방법은 권장하지 않습니다. input type="file"은 사용자가 파일을 업로드하는 데 익숙한 메커니즘입니다.