파일 업로드 기능을 개발한 경험들은 많을 것 이다. 보통 서버에서 파일 크기 확인을 해서, 실패 응답을 내려주기도 했지만, 요청 전에 직접 확인이 가능 하다.


<input type="file" name="sample" />


정보를 직접 확인 해보자.


$(document).on('change', 'input[type=file]', function() {
    console.log($(this)[0].files[0].size);
    console.log($(this)[0].files[0].name);
});


기본 객체가 Array 로 되어 있어 확인하기 까지 시간을 많이 소비 했다. 평소에 연락을 자주 하고 지내는 전산실 공장장 지단로보트님이 방법을 알려주셨다. Script 에 위 내용을 추가 하고 파일을 업로드 해보자. 확인이 가능 할 것이다.


Submit 이벤트 발생 시, 클릭이 안된 Checkbox 는 값 전달 이 무시 된다. 이런 경우에는 Hidden Tag 를 만들어서 해결 하자. Sample 코드는 jQuery 를 사용 하였다.


  • Html
<input type="checkbox" name="sampleCheckbox" />
<input type="hidden" name="sampleHidden" />

  • JavaScript
if ($('input[name=sampleCheckbox]').is(":checked")) {
    $('input[name=sampleHidden]').val('Y');
} else {
    $('input[name=sampleHidden]').val('N');
}


위 샘플을 적용 해보자. 값이 전달 될 것이다.


'Html' 카테고리의 다른 글

HTML Input File 크기 체크 하기  (0) 2014.11.04
HTML Input 자동완성 막기  (0) 2013.04.01
Form 태그 기본 Submit 막기  (0) 2013.02.28
Brower에서 cache 할 경우 안하게 하는 방법  (0) 2013.02.21
HTML DOCTYPE 이란  (0) 2012.12.08
<input ... autocomplete="off" /> 

 

위와 같은 속성을 주면 막을 수 있다.

 

$(element).bind('keypress', function(e) {
    e.preventDefault();
}) 

 

e.preventDefault(); 디폴드 Submit 을 막는다.

 

 

no-cache 옵션을 주어 항상 서버에서 최신 데이터를 받도록 유지 한다.

 

<meta http-equiv="Expires" content="0"/> 
<meta http-equiv="Pragma" content="no-cache"/>

'Html' 카테고리의 다른 글

HTML Input File 크기 체크 하기  (0) 2014.11.04
HTML Form Submit 시 Checkbox 클릭 안된 경우 값 전달 방법  (0) 2014.10.15
HTML Input 자동완성 막기  (0) 2013.04.01
Form 태그 기본 Submit 막기  (0) 2013.02.28
HTML DOCTYPE 이란  (0) 2012.12.08


DOCTYPE는 페이지의 최상단에 존재하면서 어떤 타입의 HTML인지 알려주게 된다.

템플릿은 Aptana Studio 3 을 사용하여 생성 했다.


1.  Strict (엄격모드): 모든 마크업은 XHTML을 수용할 수 있게 된다.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>strict</title>
        <meta name="author" content="minchul" />
        <!-- Date: 2012-12-08 -->
    </head>
    <body>

    </body>
</html>


2.  Transitional (호환모드): 과거의 HTML과 새로운 HTML 코드 양쪽을 모두 수용할 수 있는 모드이다. 오래된 HTML 코드와 새로운 HTML 코드를 함께 사용이 가능 하다.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>transitional</title>
        <meta name="author" content="minchul" />
        <!-- Date: 2012-12-08 -->
    </head>
    <body>
        
    </body>
</html>


+ Recent posts