2010-03-17 8 views
3

내 테스터는 파일 업로드 입력에 자유 텍스트를 입력하면 해당 텍스트가 제거되어 페이지를 제출할 수 없을 때까지 페이지의 아무 버튼도 작동하지 않는다는 것을 발견했습니다. 나는 (뒤에 어떤 코드) 다음 ASPX 코드로이를 복제 할 수 있어요IE 업로드 사용자가 파일 업로드 입력을 차단합니다.

:

<%@ Page Language="C#" AutoEventWireup="true" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
    <body> 
    <form id="form1" runat="server"> 
     <div> 
     <asp:FileUpload ID="fuTest" runat="server" /> 
     <asp:Button ID="btnSubmit" runat="server" Text="Submit" /> 
     </div> 
    </form> 
    </body> 
</html> 

(I 페이지에 대한 처리기를 바인딩하지 않습니다,이에도 불구하고, 페이지가 제출 업로드 텍스트 상자에 텍스트가 입력되지 않은 경우에만 제출 버튼을 클릭하십시오)

사용자가 파일 업로드 컨트롤에 자유 텍스트를 입력하지 못하게 할 방법이 있습니까? 이것은 IE에서만 가능합니다 - Firefox와 Chrome은 텍스트가 업로드 입력 필드에 입력되는 것을 기본적으로 방지합니다.

나는 입력을 숨기고 레이블/버튼 콤보로 대체하는 다른 해결책을 보았습니다. 그러나 문제가 더 많아지고 브라우저간에 일관성없이 작동하는 것처럼 보입니다.

의견이 있으십니까?

+0

다음과 같이

솔루션이 될 것입니다. IE7에서 테스트되었습니다. – DaveB

+0

@DaveB IE6에서 설명하는 동작을 확실히 보여주는 자체 포함 된 예제로 업데이트했습니다. – Dexter

+0

IE의 컨트롤의 '기능'을 지적 해 주셔서 감사합니다. 내가 테스트 한 페이지에는 2 개의 폼이 있었고 두 번째 폼의 버튼은 여전히 ​​작동했습니다. 그러므로 원래의 코멘트입니다. – DaveB

답변

5

업로드시 keypress 이벤트를 처리합니다. jQuery 사용 :

$(document).ready() { 
    $('input:file').keypress(function() { 
     return false; 
    }); 
} 
2

나는 예상대로이 작동한다면 모르겠지만, 당신이 시도가 : 렘의 제안, 나는에 의해 다른 기능 중 하나를 파괴하지 않고 파일 업로드에 입력을 방지 할 수 있었다 @ 당으로 <input readonly="readonly">

+0

이렇게하면 IE에서 입력을 완전히 비활성화합니다. "찾아보기"버튼이 더 이상 작동하지 않습니다 (사용하지 않는 것처럼 보이지는 않지만 아무 것도하지 않습니다). 재미있게도 readonly = "readonly"를 추가하면 Firefox 나 Chrome에서는 아무 것도 수행하지 않습니다. – Dexter

+2

키보드 입력을 무효화하는 키 누르기 이벤트를 추가 할 수 있습니까? 다시 말하지만, 이것이 파일 입력 요소와 함께 작동하는지 확신 할 수 없습니다. 단지 아이디어를 버리는 것입니다. – Jeremy

+0

keypress를 처리하면 고맙습니다. @ Jer. 내 해결책을 여기에 포함 시켰습니다. – Dexter

1

허용되는 답변은 기존의 모든 파일 컨트롤에서 완벽하게 적용됩니다.

실제 상황에서는 대부분 사용자가 하나 이상의 파일을 선택할 수 있도록 더 많은 파일 컨트롤을 추가하는 기능을 제공합니다.

이 경우 솔루션의 핵심은 .live function입니다. 내가 파일 업로드 입력 제어와 업로드 응용 프로그램을 내가 컨트롤에 무료로 텍스트를 입력하는 작업에서 내 다른 버튼을 계속하지 않는 것을 발견했다

$('input:file').live('keypress', function() { return false; });