[javascript] JavaScript에서 파일 입력 요소에 대해 프로그래밍 방식으로 “클릭”이벤트를 발생시킬 수 있습니까?

<input type="file">프로그래밍 방식 으로 태그 에서 클릭 이벤트를 시작하고 싶습니다 .

click ()을 호출해도 아무것도하지 않는 것 같거나 적어도 파일 선택 대화 상자가 나타나지 않습니다.

리스너를 사용하여 이벤트를 캡처하고 이벤트를 리디렉션하는 방법을 실험했지만 실제로 누군가가 클릭 한 것처럼 이벤트를 수행 할 수 없었습니다.



답변

모든 브라우저 에서이 작업을 수행 할 수는 없지만 IE 허용하지만 Mozilla와 Opera 허용하지 않습니다.

Gmail에서 메시지를 작성할 때 ‘파일 첨부’기능은 IE 및이를 지원하는 모든 브라우저에 대해 한 가지 방법으로 구현 된 다음 Firefox 및 그렇지 않은 브라우저에 대해 다른 방법으로 구현됩니다.

나는 당신이 그것을 할 수없는 이유를 모르겠지만, 한 가지 보안 위험을, 당신은 모든 브라우저에서 할 수 없습니다하는 프로그래밍 방식으로 HTML 파일 요소의 파일 이름을 설정한다.


답변

나는 하루 종일 해결책을 찾고 있습니다. 그리고 이것은 내가 한 결론입니다.

  1. 보안상의 이유로 Opera와 Firefox는 파일 입력을 트리거 할 수 없습니다.
  2. 유일한 편리한 대안은 “숨겨진”파일 입력 ( “숨겨진”또는 “디스플레이 : 없음”이 아닌 불투명도를 사용하여)을 만든 다음 “아래”단추를 만드는 것입니다. 이러한 방식으로 버튼이 표시되지만 사용자 클릭시 실제로 파일 입력이 활성화됩니다.

도움이 되었기를 바랍니다! 🙂

<div style="display: block; width: 100px; height: 20px; overflow: hidden;">
<button style="width: 110px; height: 30px; position: relative; top: -5px; left: -5px;"><a href="javascript: void(0)">Upload File</a></button>
<input type="file" id="upload_input" name="upload" style="font-size: 50px; width: 120px; opacity: 0; filter:alpha(opacity=0);  position: relative; top: -40px;; left: -20px" />
</div>


답변

모든 브라우저에서 click ()을 실행할 수 있지만 일부 브라우저에는 요소를 표시하고 초점을 맞춰야합니다. 다음은 jQuery 예입니다.

$('#input_element').show();
$('#input_element').focus();
$('#input_element').click();
$('#input_element').hide();

전에 hide와 함께 작동 click()하지만 show 메서드를 호출하지 않고 작동하는지 모르겠습니다. Opera에서 이것을 시도하지 않았으며 IE / FF / Safari / Chrome에서 테스트했으며 작동합니다. 이것이 도움이되기를 바랍니다.


답변

가능 : FF4 +에서 Opera?, Chrome ::

  1. inputElement.click()사용자 작업 컨텍스트에서 호출해야합니다! (스크립트 실행 컨텍스트 아님)

  2. <input type="file" />표시되어야합니다 ( inputElement.style.display !== 'none') (표시 또는 기타 속성으로 숨길 수 있지만 “디스플레이”속성은 숨길 수 없음)


답변

링크를 통해 보이지 않는 양식을 오버레이해야하지만 쓰기가 너무 게으르다는 것을 이해하는 사람들을 위해 작성했습니다. 글쎄, 나에게는 있지만 공유 할 수도 있습니다. 의견을 환영합니다.

HTML (어딘가) :

<a id="fileLink" href="javascript:fileBrowse();" onmouseover="fileMove();">File Browse</a>

HTML (당신이 신경 쓰지 않는 곳) :

<div id="uploadForm" style="filter:alpha(opacity=0); opacity: 0.0; width: 300px; cursor: pointer;">
    <form method="POST" enctype="multipart/form-data">
        <input type="file" name="file" />
    </form>
</div>

자바 스크립트 :

function pageY(el) {
    var ot = 0;
    while (el && el.offsetParent != el) {
        ot += el.offsetTop ? el.offsetTop : 0;
        el = el.offsetParent;
    }
    return ot;
}

function pageX(el) {
    var ol = 0;
    while (el && el.offsetParent != el) {
        ol += el.offsetLeft ? el.offsetLeft : 0;
        el = el.offsetParent;
    }
    return ol;
}

function fileMove() {
    if (navigator.appName == "Microsoft Internet Explorer") {
        return; // Don't need to do this in IE. 
    }
    var link = document.getElementById("fileLink");
    var form = document.getElementById("uploadForm");
    var x = pageX(link);
    var y = pageY(link);
    form.style.position = 'absolute';
    form.style.left = x + 'px';
    form.style.top = y + 'px';
}

function fileBrowse() {
    // This works in IE only. Doesn't do jack in FF. :( 
    var browseField = document.getElementById("uploadForm").file;
    browseField.click();
}


답변

이 솔루션을 사용해보십시오 : http://code.google.com/p/upload-at-click/


답변

입력을 숨기고 관련 레이블 https://developer.mozilla.org/fr/docs/Web/HTML/Element/Label을 통해 작동하도록 레이블 태그를 사용
하십시오.