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

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

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

사용하지 않고 파일을 업로드할 수 있는 자신만의 버튼을 찾고 있는 경우<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에서 키워드는 프로그램을 클릭하기 전에 브라우저 창을 중단시킵니다.

기록만 해도 자바스크립트가 필요없는 대안이 있습니다.라벨을 클릭하면 관련 입력에 초점이 맞춰진다는 점을 악용한 약간의 해킹입니다.

당신은 필요합니다.<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"및 모든 것), 해야 합니다:안 려및든것이다과야나는소다야이(s:나k안과d소(는ds

$('input[type="file"]').click();

Chrome, Firefox, Opera에서 이 JSFiddle을 테스트해봤는데 모두 파일 찾아보기 대화상자를 보여줍니다.

오늘날 이와 같은 하이브리드 솔루션은 최고의 경험을 할 수 있습니다.

let fileHandle;
async function fileOpen() {
    [fileHandle] = await window.showOpenFilePicker();
    const file = await fileHandle.getFile();
    console.log(await file.text());
}
// The advantage of this is fileHandle can be used to save to
// the opened file itself later, read more on this in https://web.dev/file-system-access/


// in April 2021, window.showOpenFilePicker still not support in Safari
// so one should have this around also
function legacyFileOpen() {
    var input = document.createElement('input');
    input.type = 'file';
    input.onchange = function () {
        input.files[0].arrayBuffer().then(function (arrayBuffer) {
            console.log(new TextDecoder().decode(arrayBuffer));
        });
    }
    input.click();
}

는 합니다를 요.input[type=file]벨서을다e을서벨nne,aglelabel당신이 좋아하는 대로, 그리고 숨깁니다.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 솔루션.

최고의 솔루션은 모든 브라우저에서 작동합니다.모바일에서도

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

입력 파일 형식을 숨기면 브라우저에 문제가 발생합니다. 보이지 않을 뿐만 아니라 숨길 수 없기 때문에 불투명성이 가장 좋은 해결책입니다.:)

기본적으로 유일한 방법은 그들을 만드는 것입니다.<input type="file">안타깝게도 요소를 구성한 다음 클릭을 시뮬레이션할 수 있습니다.

항상 이렇게 해야 하는 고통을 덜어줄 작은 플러그(파렴치한 플러그)가 있습니다. 파일 대화 상자

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

보안상의 이유로 크로스 브라우저를 사용할 수 있는 방법은 없습니다.사람들이 주로 하는 일은 입력 파일을 다른 것 위에 겹쳐 놓고 숨겨진 파일이 스스로 트리거되도록 가시성을 설정하는 것입니다.자세한 내용은 이쪽.

바인딩을 사용하여 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>)
  }
}

파일을 프로그래밍 방식으로 찾아보기

function browseFile(accept) {
    const promise = resolvingPromise();
    const input = document.createElement('input');
    input.type = "file";
    input.accept = accept;
    input.onchange = function (e) {
        const files = e.target.files;
        promise.resolve(files);
    }
    setTimeout(function () {
        click(input);
    }, 0);
    return promise;
}

function click(node) {
    try {
        node.dispatchEvent(new MouseEvent('click'))
    } catch (e) {
        const evt = document.createEvent('MouseEvents')
        evt.initMouseEvent('click', true, true, window, 0, 0, 0, 80, 20, false, false, false, false, 0, null)
        node.dispatchEvent(evt);
    }
}

jQuery를 사용하면 클릭 시뮬레이션을 위해 전화를 걸 수 있습니다.

효과가 있었습니다.

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

동일한 것을 원하지만 리액트를 사용하고 있는 분들을 위한

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>

언급URL : https://stackoverflow.com/questions/8595389/programmatically-trigger-select-file-dialog-box