IE는

2013-09-18 2 views
0

내가 페이지 (demo)가 제출에 입력 [유형 = "파일"] 웁니다IE는

나는 (내가 그것을보고 "가짜 버튼"을 선택 파일을 클릭을 통해 찾아보기 대화 상자를 엽니 다 경우
<!DOCTYPE html> 
    <html> 
    <head> 
     <title></title> 
     <script type="text/javascript" src="http://codeorigin.jquery.com/jquery-1.10.2.min.js"></script> 
     <script type="text/javascript"> 
      $(function() { 
       $("#id_button").click(function(e) { 
        $("#id_file").click(); 
       }); 
      }); 
     </script> 
    </head> 
    <body> 
     <form method="post" enctype="multipart/form-data" action="http://www.google.com/"> 
      <input type="file" name="file" id="id_file" /> 
      <input type="button" id="id_button" value="fake button" /> 
      <input type="submit"> 
     </form> 
    </body> 

</html> 

input[type="file"]), 제출 버튼을 클릭 한 후 게시물이 나타나지 않으면 input[type="file"]이 삭제됩니다.

변경하려면 어떻게해야합니까?

IE8 및 IE10에서이 문제가 발생합니다.

PS : 파일 입력이 숨겨져있어 사용자가 가짜 버튼으로 만 작업 할 수 있습니다.

+0

'삭제'란 무엇을 의미합니까? IE에서 마크 업을 제거 했습니까, 아니면 선택한 파일을 제거한다는 의미입니까? 만약 당신이'display : none'을 가지고 있다면'visibility : hidden'으로 변경해보십시오. –

+0

@ JeevanJose IE는 파일 입력에서 선택된 파일을 제거합니다. –

+0

나에게 잘 보입니다. http://jsfiddle.net/JGTHB/5/ –

답변

3

모든 브라우저는 프로그래밍 방식으로 파일 입력에 대한 입력 버튼을 클릭하는 것과 관련하여 자바 스크립트에서 허용하는 동작이 서로 다릅니다.

크로스 브라우저에서 작동하는 것으로 보이는 가장 좋은 해결책은 불투명도를 0으로 설정하고 (표시 : 없음 사용 안함) 입력란 아래에 버튼을 배치하는 것입니다. 그러면 사용자가 입력란에 0 개의 불투명도 입력을 통해 클릭합니다. 버튼을 누르면 입력 선택 대화 상자가 열립니다. 파일 입력을 스타일링에

좋은 작성자는 여기에서 찾을 수 있습니다 : http://www.quirksmode.org/dom/inputfile.html

+0

여기에 샘플을 추가하겠습니다. http://jsfiddle.net/VBGpm/1/ –

0

나는 모든 브라우저가 보안 이유로 그 동작을 수행 생각합니다. 양식을 제출하면 다른 페이지 (또는 동일한 페이지)로 리디렉션되고 동일한 페이지로 이동하면 양식이 다시 초기화됩니다. 이 경우 보안상의 이유로 파일 값을 설정할 수 없습니다. 예를 들어, How to set a value to a file input in HTML?에서

, 당신이 구글 크롬에서

<form name="foo" method="post" enctype="multipart/form-data"> 
    <input type="file" value="c:\passwords.txt"> 
</form> 
<script>document.foo.submit();</script> 
+0

하지만 파일 입력을 클릭하면 제대로 작동합니까? –

1

http://jsfiddle.net/j38Wj 작품 벌금을 발생하지만 'IE 외부에서 파일 선택을 허용하지 않는 생각으로 IE (10) 에서 작동하지 않습니다 싶지 않아 클릭 이벤트. input [type = file]을 "사용자 정의"하는 한 가지 방법은 그것을 숨기려면 불투명도 스타일을 사용하고 그 아래에 사용자 정의 버튼 컨트롤을 상대적으로 배치하는 것입니다. 근무 예 : http://blueimp.github.io/jQuery-File-Upload/

[...] 
+0

http://blueimp.github.io/jQuery-File-Upload/ 정말 멋지다. 내일 다시 시도해 보겠다. jsfiddle이 작동하지 않는다. –

0

입력 파일 요소와 함께 라벨 태그를 추가합니다. 레이블의 'for'속성을 입력 파일 요소의 ID로 설정하십시오.

레이블을 클릭하면 입력 파일 요소가 '클릭'되고 파일 대화 상자가 열립니다.

그런 다음 원하는대로 레이블의 스타일을 지정하십시오. 다양한 IE 버전을 사용해 보았습니다.