jQuery, HTML 및 CSS를 사용하여 사용자 정의 파일 업로드하기

Question

제가 디자인하고있는 웹 사이트에이 작은 문제가 있습니다. 그것은 상당히 끝났지 만 여기서는 jQuery가 문제라고 생각합니다.

<img src="files/register_page/upload_photo/body.png" id="upload"> 
<input type="file" name="file_upload" id="file_upload" style="visibility:hidden;"> 

을 그리고 jQuery를 문서의 일부는 다음과 같다 :

코드는 다음과 같다, 아무 일도 발생하지의 IMG를 클릭시,

$(document).ready(function(){ 
     $("#upload").click(function(){ 
      $('#file_upload').click(); 
     }); 
    }); 

그러나 어디 파일 업로드 대화 상자가 나타납니다. 더 자세한 정보가 필요하면 알려주세요. 그렇지 않다면 여기에 어떤 문제가있을 수 있습니까? 나는 jQuery 1.8.0을 사용하고있다.

Answer 1

사용하여 HTML5 label 요소 : 크롬, IE와 오페라가 아니라 FF에서

<label for="file_upload"><img src="files/register_page/upload_photo/body.png" id="upload"></label> 
<input type="file" name="file_upload" id="file_upload" style="visibility:hidden;"> 

Fiddle

작품.

브라우저는 input type="file"으로 수행 할 수있는 작업을 제한하는 경향이 있습니다. label 요소는 id 속성이 for 속성과 동일한 입력으로 포커스를 리디렉션하므로 보이지 않는 요소를 트리거하는 해결 방법입니다.

---

최신 브라우져하지만 그 제한의 좋은 부분을 완화, 그래서 당신은 문제없이 .click()을 트리거 할 수 있습니다.

그러나 CSS 해킹을 변경하면 이전 브라우저와의 백 호환을 위해 display:none 또는 visibility:hidden을 사용하지 않고 숨길 수 있습니다. 어느

position:absolute; top:-100px; 

또는

opacity:0; 
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
filter: alpha(opacity=0); 
width:0; height:0; 

는 display 또는 visibility CSS 속성을 사용하지 않고 요소를 숨길 수 있습니다.

---

Fiddle

는 또한, 여기 FF의 라벨 요소에 대한 해결 방법, 당신은 opacity:0하여 visibility:hidden을 변경 할 수 있습니다

$('#file_upload').focus(function() { 
    $(this).click(); 
}); 

Fiddle합니다. 그러나 기본 스크립트가 정상적으로 작동하면 불필요합니다.