<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을 통해 작동하도록 레이블 태그를 사용 하십시오.

이 click방법이 Chrome, Firefox 등에서 작동하게하려면 입력 파일에 다음 스타일을 적용하십시오. 완벽하게 숨겨져 있습니다. 마치 마치display: none;

#fileInput {
    visibility: hidden;
    position: absolute;
    top: 0;
    left: -5000px;
}

그것은 간단합니다, 나는 그것이 작동하는지 테스트했습니다!

$(document).one('mousemove', function() { $(element).trigger('click') } );

비슷한 문제가 발생했을 때 나를 위해 일한 것은 일반적인 eRube Goldberg입니다.

작업 솔루션

이 오래된 게시물에 추가 해 보겠습니다.이 솔루션은 새로운 브라우저와 오래된 브라우저 모두에서 80 % 이상 작동합니다.

이 솔루션은 복잡하지만 단순합니다. 첫 번째 단계는 CSS를 사용하고 불투명도가 0 인 "언더 요소"로 입력 파일 유형을 지정하는 것입니다. 다음 단계는 JavaScript를 사용하여 필요에 따라 레이블을 업데이트하는 것입니다.

HTML _{특정 요소에 빠르게 액세스 할 수있는 방법을 원한다면 ID가 간단히 삽입되지만 클래스는이 전체 프로세스를 설정하는 CSS와 관련되어 있어야합니다.}

<div class="file-input wrapper">
    <input id="inpFile0" type="file" class="file-input control" />
    <div class="file-input content">
        <label id="inpFileOutput0" for="inpFileButton" class="file-input output">Click Here</label>
        <input id="inpFileButton0" type="button" class="file-input button" value="Select File" />
    </div>
</div>

CSS _{명심하고, 채색 및 글꼴 스타일은 전적으로 귀하가 선호하는 것입니다.이 기본 CSS를 사용하는 경우 언제든지 스타일에 따라 끝 마크를 사용할 수 있습니다. 이는 끝에 나열된 jsFiddle에 표시됩니다.}

.file-test-area {
    border: 1px solid;
    margin: .5em;
    padding: 1em;
}
.file-input {
    cursor: pointer !important;
}
.file-input * {
    cursor: pointer !important;
    display: inline-block;
}
.file-input.wrapper {
    display: inline-block;
    font-size: 14px;
    height: auto;
    overflow: hidden;
    position: relative;
    width: auto;
}
.file-input.control {
    -moz-opacity:0 ;
    filter:alpha(opacity: 0);
    opacity: 0;

    height: 100%;
    position: absolute;
    text-align: right;
    width: 100%;
    z-index: 2;
}
.file-input.content {
    position: relative;
    top: 0px;
    left: 0px;
    z-index: 1;
}
.file-input.output {
    background-color: #FFC;
    font-size: .8em;
    padding: .2em .2em .2em .4em;
    text-align: center;
    width: 10em;
}
.file-input.button {
    border: none;
    font-weight: bold;
    margin-left: .25em;
    padding: 0 .25em;
}

JavaScript _{순수하고 사실이지만 일부 OLDER (사용하지 않는) 브라우저는 여전히 Netscrape 2와 같이 문제가있을 수 있습니다!}

var inp = document.getElementsByTagName('input');
for (var i=0;i<inp.length;i++) {
    if (inp[i].type != 'file') continue;
    inp[i].relatedElement = inp[i].parentNode.getElementsByTagName('label')[0];
    inp[i].onchange /*= inp[i].onmouseout*/ = function () {
        this.relatedElement.innerHTML = this.value;
    };
};

jsFiddle 예제 작업

효과가있다 :

Firefox 및 Opera의 보안상의 이유로 파일 입력을 클릭 할 수는 없지만 MouseEvents를 사용하여 시뮬레이션 할 수 있습니다.

<script>
click=function(element){
    if(element!=null){
        try {element.click();}
        catch(e) {
            var evt = document.createEvent("MouseEvents");
            evt.initMouseEvent("click",true,true,window,0,0,0,0,0,false,false,false,false,0,null);
            element.dispatchEvent(evt);
            }
        }
    };
</script>

<input type="button" value="upload" onclick="click(document.getElementById('inputFile'));"><input type="file" id="inputFile" style="display:none">

나는 이것이 오래되었다는 것을 알고 있으며, 이러한 모든 솔루션은 실제 가치가있는 브라우저 보안 예방 조치에 대한 해킹입니다.

즉, 오늘 현재 fileInput.click ()은 현재 Chrome (36.0.1985.125 m) 및 현재 Firefox ESR (24.7.0)에서는 작동하지만 현재 IE (11.0.9600.17207)에서는 작동하지 않습니다. 버튼 위에 불투명도가 0 인 파일 필드를 오버레이해도 작동하지만 링크 요소를 가시 트리거로 원했고 마우스 오버 밑줄이 브라우저에서 제대로 작동하지 않습니다. 브라우저가 호버 스타일이 실제로 적용되는지 여부를 생각하면서 브라우저가 깜박입니다.

그러나 모든 브라우저에서 작동하는 솔루션을 찾았습니다. 모든 브라우저의 모든 버전을 테스트했다고 주장하지는 않지만 브라우저가 계속 작동한다는 것을 알고 있지만 현재 내 요구를 충족시키는 것으로 보입니다.

간단합니다 : 파일 입력 필드를 화면 밖으로 배치하고 (위치 : 절대; 상단 : -5000px) 레이블 요소를 그 주위에 놓고 파일 필드 대신 레이블을 클릭합니다.

레이블의 click 메소드를 호출하기 위해 링크를 스크립팅해야합니다. 레이블 요소 내부의 텍스트를 클릭 할 때와 같이 링크를 자동으로 수행하지는 않습니다. 분명히 링크 요소는 클릭을 캡처하고 레이블을 통과시키지 않습니다.

또한 필드가 화면이 아니기 때문에 현재 선택된 파일을 표시하는 방법을 제공하지 않습니다. 파일을 선택할 때 즉시 제출하고 싶었으므로 문제가되지 않지만 상황이 다른 경우 다소 다른 방법이 필요합니다.

JS 피들 : http://jsfiddle.net/eyedean/1bw357kw/

popFileSelector = function() {
    var el = document.getElementById("fileElem");
    if (el) {
        el.click();  
    }
};

window.popRightAway = function() {
    document.getElementById('log').innerHTML += 'I am right away!<br />';
    popFileSelector();
};

window.popWithDelay = function() {
    document.getElementById('log').innerHTML += 'I am gonna delay!<br />';
    window.setTimeout(function() {
        document.getElementById('log').innerHTML += 'I was delayed!<br />';
        popFileSelector();
    }, 1000);
};

<body>
  <form>
      <input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)" />
  </form>
  <a onclick="popRightAway()" href="#">Pop Now</a>
    <br />
  <a onclick="popWithDelay()" href="#">Pop With 1 Second Delay</a>
    <div id="log">Log: <br /></div>
</body>

이 코드는 저에게 효과적입니다. 이것이 당신이하려는 일입니까?

<input type="file" style="position:absolute;left:-999px;" id="fileinput" />
<button  id="addfiles" >Add files</button>

<script language="javascript" type="text/javascript">
   $("#addfiles").click(function(){
      $("#fileinput").click();
   });
</script>

jQuery 및 jQuery-ui를 사용하는 Safari에 대한 내 솔루션 :

$("<input type='file' class='ui-helper-hidden-accessible' />").appendTo("body").focus().trigger('click');

이 문제에 대한 순수한 JavaScript 솔루션이 있습니다. 모든 브라우저에서 잘 작동

<script>
    function upload_image_init(){
        var elem = document.getElementById('file');
        if(elem && document.createEvent) {
           var evt = document.createEvent("MouseEvents");
           evt.initEvent("click", true, false);
           elem.dispatchEvent(evt);
        }
    }
</script>

이벤트를 컨트롤로 리디렉션하는 방법이 있지만 브라우저가 (좋은) 보안상의 이유로이를 차단하려고 시도 할 때 이벤트를 직접 화재 컨트롤에 실행할 수있는 것은 아닙니다.

사용자가 무언가를 클릭 할 때 파일 대화 상자 만 표시해야하는 경우 파일 업로드 버튼이 더 좋아 보이기 때문에 Shaun Inman 의 결과를 살펴볼 수 있습니다. .

키 다운, 키 누르기 및 키 업 이벤트 사이의 제어에 초점을 맞추고 밖으로 이동하면서 키보드 트리거링을 달성 할 수있었습니다. YMMV.

이것은 브라우저와 호환되지 않는 고통의 세계이기 때문에 진심으로 충고하는 것은 이것을 내버려 두는 것입니다. 사소한 브라우저 업데이트도 경고없이 트릭을 차단할 수 있으며 작동 상태를 유지하려면 해킹을 재발 명해야 할 수도 있습니다.

파일 대화 상자를 열고 즉시 업로드를 시작하는 사용자 정의 버튼을 만들고 싶었 기 때문에 얼마 전에 이것을 연구했습니다. 방금 업로드 할 수있는 곳을 클릭하면 firefox가 대화 상자를 여는 것처럼 보입니다. 따라서 다음과 같이 할 수 있습니다.

1. 파일 업로드 및 버튼으로 사용하려는 이미지가 포함 된 별도의 요소 만들기
2. 파일 요소가 겹치도록 배치하고 파일 요소를 backgroud 및 테두리로 투명하게 만들면 버튼 만 표시됩니다.
3. 버튼 / 파일 입력을 클릭 할 때 IE가 대화 상자를 열도록 자바 스크립트 추가
4. 파일을 선택할 때 onchange 이벤트를 사용하여 양식을 제출하십시오.

이것은 이미 문제를 해결하기 위해 다른 방법을 사용했기 때문에 이론적이지만 효과가 있습니다.

나는 한 <input type="button">보기에서 숨겨진 태그를. 내가 한 것은 첨부"onClick" 레이블과 같은 모든 유형의 보이는 구성 요소에 이벤트를 . 마우스 오른쪽 클릭 "HTML 편집"명령을 사용하여 Chrome 개발자 도구 또는 Mozilla Firefox의 Firebug를 사용하여 수행되었습니다. 이 경우 다음 스크립트 또는 이와 유사한 것을 지정하십시오.

JQuery가있는 경우 :

$('#id_of_component').click();

그렇지 않은 경우 :

document.getElementById('id_of_component').click();

감사.

이 솔루션이 효과가 있습니다. 다운로드하려면 MSBLOB을 사용해야합니다

$scope.getSingleInvoicePDF = function(invoiceNumberEntity) {
   var fileName = invoiceNumberEntity + ".pdf";
   var pdfDownload = document.createElement("a");
   document.body.appendChild(pdfDownload);

   AngularWebService.getFileWithSuffix("ezbillpdfget",invoiceNumberEntity,"pdf" ).then(function(returnedJSON) {
       var fileBlob = new Blob([returnedJSON.data], {type: 'application/pdf'});
       if (navigator.appVersion.toString().indexOf('.NET') > 0) { // for IE browser
           window.navigator.msSaveBlob(fileBlob, fileName);
       } else { // for other browsers
           var fileURL = window.URL.createObjectURL(fileBlob);
           pdfDownload.href = fileURL;
           pdfDownload.download = fileName;
           pdfDownload.click();      
       }
   });
};

AngularJS 또는 일반 자바 스크립트.

이것은 Firefox 4에서 가능하며 팝업 창으로 간주되어 팝업 창이있을 때마다 차단된다는 경고가 있습니다.

다음은 나를 위해 작동하는 솔루션입니다. CSS :

#uploadtruefield {
    left: 225px;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 266px;
    opacity:0;
    -moz-opacity:0;
    filter:alpha(opacity:0);
    width: 270px;
    z-index: 2;
}

.uploadmask {
    background:url(../img/browse.gif) no-repeat 100% 50%;
}
#uploadmaskfield{
    width:132px;
}

"작은"JQuery 도움말이있는 HTML :

<div class="uploadmask">
    <input id="uploadmaskfield" type="text" name="uploadmaskfield">
</div>
<input id="uploadtruefield"  type="file" onchange="$('#uploadmaskfield').val(this.value)" >

실제 업로드 필드에 maskfied가 포함되어 있는지 확인하십시오.

<a> 태그의 파일 열기 대화 상자에서 답변별로이 작업을 수행 할 수 있습니다.

<input type="file" id="upload" name="upload" style="visibility: hidden; width: 1px;     height: 1px" multiple />
<a href="" onclick="document.getElementById('upload').click(); return false">Upload</a>

input (file)이 형식이 아닌 경우 firing click 이벤트가 파일 대화 상자를 호출한다는 것을 알았습니다.

잘하면 이것은 누군가를 도울 것입니다-나는 그것에 대해 머리를 두드리는 데 2 ​​시간을 보냈습니다.

IE8 또는 IE9에서 javascript로 파일 입력을 전혀 트리거하지 않으면 (내가 모두 시도했다고 믿습니다) javascript를 사용하여 양식을 제출하지 못하게하면 자동으로 실패합니다.

정규 제출 단추를 통해 양식을 제출하면 작동하지만 form.submit (); 조용히 실패합니다.

투명한 파일 입력으로 파일 선택 버튼을 오버레이해야했습니다.

이것은 나를 위해 일했다 :

<script>
    function sel_file() {
        $("input[name=userfile]").trigger('click');
    }  
</script>

<input type="file" name="userfile" id="userfile" />

<a href="javascript:sel_file();">Click</a>

불가능하지 않습니다 :

var evObj = document.createEvent('MouseEvents');
evObj.initMouseEvent('click', true, true, window);  
setTimeout(function(){ document.getElementById('input_field_id').dispatchEvent(evObj); },100);

그러나 어떻게 든 이것이 클릭 이벤트를 통해 호출 된 함수에있는 경우에만 작동합니다.

따라서 다음 설정이있을 수 있습니다.

html :

<div onclick="openFileChooser()" class="some_fancy_stuff">Click here to open image chooser</div>
<input type="file" id="input_img">

자바 스크립트 :

    function openFileChooser() {
      var evObj = document.createEvent('MouseEvents');
      evObj.initMouseEvent('click', true, true, window);  
      setTimeout(function()
      { 
        document.getElementById('input_img').dispatchEvent(evObj);      
      },100);      
    }

당신이 사용할 수있는

<button id="file">select file</button>
<input type="file" name="file" id="file_input" style="display:none;">
<script>
$('#file').click(function() {
        $('#file_input').focus().trigger('click');
    });
</script>