Onclick 이미지 열기/팝업 파일 필드

Question

내 양식에 파일 필드가 있습니다. 그 분야는 너무 이상해 보입니다. 그래서 저는 그것을 이미지로 만들고 싶습니다. 그래서 나는 이미지를 클릭하고 파일 필드 (파일 선택)를 엽니 다.

나에게 최고의 솔루션을 제공하십시오. 모든 브라우저 지원.

Answer 1

이 수행해야합니다

HTML 코드

<label class="filebutton"> 
Browse For File! 
<span><input type="file" id="myfile" name="myfile"></span> 
</label> 

CSS 스타일

label.filebutton { 
    width:120px; 
    height:40px; 
    overflow:hidden; 
    position:relative; 
    background-color:#ccc; 
} 

label span input { 
    z-index: 999; 
    line-height: 0; 
    font-size: 50px; 
    position: absolute; 
    top: -2px; 
    left: -700px; 
    opacity: 0; 
    filter: alpha(opacity = 0); 
    -ms-filter: "alpha(opacity=0)"; 
    cursor: pointer; 
    _cursor: hand; 
    margin: 0; 
    padding:0; 
} 

Answer 2

투명 현장을 확인하고 오버 플로우와 사업부 내부에 배치 : 숨겨진 배경으로 이미지 :

<div style="width:16px;height:16px;overflow:hidden"> 
    <input type="file" name="file" style="opacity:0;filter:alpha(opacity=0)"> 
</div> 

이미지가 필드의 기본 크기보다 큰 경우 커서 위치에 따라 필드를 이동시키는 JS도 작성해야하므로 피하려고합니다.