숨겨진 파일 입력 요소가 있습니다. 버튼의 클릭 이벤트에서 파일 선택 대화 상자 를 트리거 할 수 있습니까?
답변
를 사용하는 대신 파일을 업로드 할 수있는 자체 버튼을 찾고 있다면 <input type="file" />다음과 같이 할 수 있습니다.
<input id="myInput" type="file" style="visibility:hidden" />
<input type="button" value="Show Dialog" onclick="$('#myInput').click();" />내가 사용합니다 visibility: hidden대신, display: none. 표시되지 않는 파일 입력에 대해서는 클릭 이벤트를 호출 할 수 없습니다.
답변
여기에 대부분의 답변에는 유용한 정보가 없습니다.
예, jQuery / JavaScript를 사용하여 입력 요소를 프로그래밍 방식으로 클릭 할 수 있지만 사용자가 시작한 이벤트에 속하는 이벤트 처리기에서 클릭하는 경우에만 가능합니다!
예를 들어 스크립트가 프로그래밍 방식으로 ajax 콜백에서 버튼을 클릭하면 아무 일도 일어나지 않지만 사용자가 제기 한 이벤트 핸들러에 동일한 코드 줄을 넣으면 작동합니다.
추신 : debugger;키워드는 적어도 크롬 33에서 프로그래밍 방식으로 클릭하기 전에 검색 창을 방해합니다 …
답변
기록을 위해 javascript가 필요하지 않은 대체 솔루션이 있습니다. 레이블을 클릭하면 관련 입력에 초점이 맞춰진다는 사실을 악용하는 것은 약간의 해킹입니다.
<label>적절한 for속성 (입력을 가리킴) 이 필요하며 , 선택적으로 버튼과 같은 스타일 (부트 스트랩과 함께 사용 btn btn-default)이 필요합니다. 사용자가 레이블을 클릭하면 대화 상자가 열립니다. 예 :
<!-- optionnal, to add a bit of style -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<!-- minimal setup -->
<label for="exampleInput" class="btn btn-default">
Click me
</label>
<input type="file" id="exampleInput" style="display: none" />답변
브라우저가 type="file"요소 (보안 문제 및 모든 사항)에 대한 클릭을 처리하는 방법을 잘 모르겠지만 작동합니다.
$('input[type="file"]').click();이 JSFiddle 을 Chrome, Firefox 및 Opera에서 테스트 했으며 모두 파일 찾아보기 대화 상자를 표시합니다.
답변
input[type=file]라벨 태그를 감싸고 label원하는대로 스타일 을 지정하고 input.
<label class="btn btn-default fileLabel" data-toggle="tooltip" data-placement="top" title="Upload">
<input type="file">
<span><i class="fa fa-upload"></i></span>
</label>
<style>
.fileLabel input[type="file"] {
position: fixed;
top: -1000px;
}
</style>순전히 CSS 솔루션.
답변
기본적으로 유일한 방법은 <input type="file"> 요소를 만든 다음 클릭을 시뮬레이션하는 것입니다.
항상이 작업을 수행해야하는 고통을 덜어 줄 작은 플러그인 (부끄러운 플러그)이 있습니다. file-dialog
fileDialog()
.then(file => {
const data = new FormData()
data.append('file', file[0])
data.append('imageName', 'flower')
// Post to server
fetch('/uploadImage', {
method: 'POST',
body: data
})
})답변
최고의 솔루션은 모바일에서도 모든 브라우저에서 작동합니다.
<div class="btn" id="s_photo">Upload</div>
<input type="file" name="s_file" id="s_file" style="opacity: 0;">';
<!--jquery-->
<script>
$("#s_photo").click(function() {
$("#s_file").trigger("click");
});
</script>입력 파일 유형을 숨기면 브라우저에 문제가 발생합니다. 불투명도는 숨겨지지 않고 표시되지 않기 때문에 최상의 솔루션입니다. 🙂
