실제로 순수한 CSS로 할 수 있으며 매우 쉽습니다 …

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;
}

아이디어는 입력을 레이블 내부에 절대적으로 배치하는 것입니다. 입력의 글꼴 크기를 크게 설정하면 “찾아보기”버튼의 크기가 커집니다. 그런 다음 네거티브 left / top 속성을 사용하여 입력 찾아보기 버튼을 레이블 뒤에 배치하는 데 시행 착오가 걸립니다.

버튼을 배치 할 때 알파를 1로 설정합니다. 완료되면 다시 0으로 설정합니다 (현재 수행중인 작업을 볼 수 있음).

모든 브라우저에서 입력 버튼을 약간 다른 크기로 렌더링하므로 여러 브라우저에서 테스트해야합니다.

답변

.image-upload > input {
  visibility:hidden;
  width:0;
  height:0
}

<div class="image-upload">
  <label for="file-input">
    <img src="https://placehold.it/100/000000/ffffff?text=UPLOAD" style="pointer-events: none"/>
  </label>

  <input id="file-input" type="file" />
</div>

<label for="FileInput">
    <img src="tools/img/upload2.png" style="cursor:pointer" onmouseover="this.src='tools/img/upload.png'" onmouseout="this.src='tools/img/upload2.png'" alt="Injaz Msila" style="float:right;margin:7px" />
</label>
<form action="upload.php">
    <input type="file" id="FileInput" style="cursor: pointer;  display: none"/>
    <input type="submit" id="Up" style="display: none;" />
</form>

<script type="text/javascript">
    $( "#FileInput" ).change(function() {
      $( "#Up" ).click();
    });
</script>

$("#image id").click(function(){
    $("#input id").click();
});

<img src="/images/uploadButton.png" id="upfile1" style="cursor:pointer" />
<input type="file" id="file1"  name="file1" style="display:none" />

$("#upfile1").click(function () {
    $("#file1").trigger('click');
});