입력 형식 파일을 별도의 업로드 버튼으로 수정했습니다.

Question

어쩌면 제 질문은 중복되었지만 여기에서 많은 답변을 시도했지만 성공하지 못했습니다.

내 JSP 페이지에는 입력 유형 파일뿐 아니라 업로드를 트리거하는 업로드 버튼이 있습니다. 이런 식으로 뭔가 :

<div id="test_form"> 
<input type="file" id="file" style = "position:absolute; top:-100px;"> 
<button id="selectFileButton">Please choose file</button> 
</div> 
<button id="upload">Upload selected file</button> 

그리고 일부 JS : 내가 '파일을 선택하십시오'버튼을 클릭하면

$(document).ready(function() { 
    $("#selectFileButton").click(function() { 
     $("#file").click(); 
    }); 
}); 

, 선택을위한 새로운 창이 나타납니다. 하지만 파일을 선택하면 모든 것이 사라 지므로 실제 '업로드'버튼을 누르게되었습니다. 도와 주시겠습니까?

Answer 1

내가하는 일은 맞춤 레이아웃으로 div를 만들고 보이지 않는 파일을 그 위에 배치하는 것입니다. 이렇게하면 사용자가 실제로 파일 업로드를 클릭합니다. 선택한 파일의 이름을 표시하려면 javascript가 필요합니다.

<div style="position: relative; width: 300px; height: 50px;"> 
    <div class="button" style="position: absolute;">Click me!</div> 
    <input type="file" style="float: left; opacity: 0; cursor: pointer;" /> 
</div> 

일부 JS :

$("input[type=file]").change(function(){ 
    $(this).siblings("div").eq(0).html($(this).val()); 
});