프로그래밍 방식으로 "파일 선택"대화 상자 트리거

숨겨진 파일 입력 요소가 있습니다. 버튼의 클릭 이벤트에서 파일 선택 대화 상자 를 트리거 할 수 있습니까?

를 사용하는 대신 파일을 업로드 할 수있는 자체 버튼을 찾고 있다면 <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>

입력 파일 유형을 숨기면 브라우저에 문제가 발생합니다. 불투명도는 숨겨지지 않고 표시되지 않기 때문에 최상의 솔루션입니다. :)

보안상의 이유로 크로스 브라우저 방식이 없습니다. 사람들은 일반적으로 입력 파일을 다른 것에 오버레이하고 가시성을 숨김으로 설정하여 자체적으로 트리거되도록합니다. 여기에 더 많은 정보가 있습니다.

REACT에서 구성 요소 소품을 가져 오기 위해 바인딩을 사용하고 있는지 확인하십시오.

class FileUploader extends Component {
  constructor (props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }
   onChange=(e,props)=>{
    const files = e.target.files;
    const selectedFile = files[0];
    ProcessFileUpload(selectedFile,props.ProgressCallBack,props.ErrorCallBack,props.CompleatedCallBack,props.BaseURL,props.Location,props.FilesAllowed);
  }
   handleClick = () => {
    this.refs.fileUploader.click();
  }
  render()
  {
  return(
      <div>
        <button type="button" onClick={this.handleClick}>Select File</button>  
        <input type='file' onChange={(e)=>this.onChange(e,this.props)} ref="fileUploader" style={{display:"none"}} />
      </div>)
  }
}

jQuery를 사용 click()하면 클릭을 시뮬레이션하기 위해 호출 할 수 있습니다 .

이것은 나를 위해 일했습니다.

$('#fileInput').val('');

같은 것을 원하지만 React를 사용하는 사람들을 위해

openFileInput = () => {
    this.fileInput.click()
}

<a href="#" onClick={this.openFileInput}>
    <p>Carregue sua foto de perfil</p>
    <img src={img} />
</a>
<input style={{display:'none'}} ref={(input) => { this.fileInput = input; }} type="file"/>

<div id="uploadButton">UPLOAD</div>
<form action="[FILE_HANDLER_URL]" style="display:none">
     <input id="myInput" type="file" />
</form>
<script>
  const uploadButton = document.getElementById('uploadButton');
  const myInput = document.getElementById('myInput');

  uploadButton.addEventListener('click', () => {
    myInput.click();
  });
</script>