자바 스크립트를 사용하여 Chrome의 iframe 내에 파일 입력을 실행하는 경우

회사 웹 프레임 워크에서 브라우저에 특정한 업로드 버튼을 사용하지 않으려 고합니다.자바 스크립트를 사용하여 Chrome의 iframe 내에 파일 입력을 실행하는 경우

내가 만든 것은 양식이있는 숨겨진 iframe입니다. iframe 바깥쪽에는 "파일 선택"버튼이 있습니다. 이 버튼은 iframe에서 입력 요소를 가져 와서 해당 요소에서 'click()'을 호출합니다.

클릭하면 IE 및 FF에는 파일 선택 대화 상자가 열리지 만 Chrome에는 표시되지 않습니다. 자바 스크립트 함수에서 iframe 내에서 'click()'을 호출하면 Chrome에서 작동하지 않습니다.

일부 예 번호 :

가

fileuploadtest.html :

가

<div id="button" style="background-color:red; height:50px; width:200px;" onclick="clicky()">Browse files</div> 
<iframe id="frame" src="fileupload.html" style="display:none"></iframe> 

<script type="text/javascript"> 
    function clicky() { 
     var iframe = document.getElementById("frame"); 
     var innerDoc = iframe.contentDocument || iframe.contentWindow.document; 
     innerDoc.getElementById("input").click(); 
    }; 
</script>

fileupload.html :

<form> 
    <div><input type="file" id="input" multiple/></div> 
</form>

iframe에서 제거하고 단지 첫 번째 페이지 내의 형상을 갖는 저자가 크롬이 열리고 내가 원하는 것처럼 파일 선택기 대화 상자. 그러나 웹 애플리케이션에서 iframe을 사용해야하므로 별도로 제출할 수 있습니다.

"display : none"제거는 아무 효과가 없습니다. 입력 요소에 'onclick'속성이 추가되면 Chrome의 'click()'이벤트에 의해 트리거됩니다.

iframe의 입력에서 'click()'을 호출 할 때 Chrome이 파일 선택 대화 상자를 열지 않는 이유는 무엇입니까?

출처

2012-09-25 Vincentz

우리의 문제는 click 이벤트에서 "clicky()"메서드를 호출하지 않고 별도의 브라우저 이벤트에서 발생했기 때문에 나타납니다. 이 예제에서는 표시되지 않지만 실제 응용 프로그램 코드는 여기에 복사하여 붙여 넣기 할 수있는 옵션이 아닙니다. – Vincentz

나는 같은 문제가있다. :(수정하는 방법에 대한 힌트를 줄 수 있습니까? –

크롬은 모든 파일 경로를 다른 출처로 취급합니다. 서버에서 예제를 호스팅하면 Chrome에서 정상적으로 작동합니다. 또한 security measure을 우회하기 위해 매개 변수로 "--allow-file-access-from-files"를 사용하여 Chrome을 시작할 수도 있습니다.

출처

2012-09-25 16:30:40 lvanberkel

Python을 설치했다면'python -m SimpleHTTPServer'가이 문제를 해결할 수있는 좋은 대안입니다. –

자바 스크립트를 사용하여 Chrome의 iframe 내에 파일 입력을 실행하는 경우

답변

관련 문제