[Javascript] input file 이미지 미리보기, 썸네일 보기, Thumbnail

Posted by Find my true self Fimtrus
2013.07.10 14:11 Programming/Hybrid App
/**
  * 이미지 썸네일을 불러오는 function
  * @param html : input 필드의 dom을 인자로 받는다. 물론 타입은 file
  * @param $target : 불러온 이미지를 적용할 jquery 객체.
  **/
function getThumbnail(html, $target) {
	if (html.files && html.files[0]) {
		var reader = new FileReader();
		reader.onload = function (e) {
			$target.css('background-image', 'url(\"' + e.target.result + '\")');
		}
		reader.readAsDataURL(html.files[0]);
	}
}


냉무.
이 댓글을 비밀 댓글로
  1. 안녕하세요 혹시 위 소스 사용법좀 알수있을까요?
    아래와 같이 코딩해서 테스트해보니 html.files 에서 에러가 발생하더라구여
    dom 객체를 어떤식으로 넘겨 주어야 하나요?
    감사합니다. 좋은하루되세요.
    ===============================================
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    function getThumbnail(html, $target) {
    if (html.files && html.files[0]) {

    var reader = new FileReader();
    reader.onload = function (e) {
    $target.css('background-image', 'url(\"' + e.target.result + '\")');
    }
    reader.readAsDataURL(html.files[0]);
    }
    }
    function filechange(){
    var $target = $("#test");
    var html = document.getElementById("file1");
    getThumbnail(html,$target);

    }
    </script>
    <div id="test"></div>
    <input id="file1" type="file" onchange="javascript:filechange();">
    • 제가 이제 봤네요...한동안 너무 바쁘게 지내서 블로그를 돌볼 시간이 없었어요.

      해결하셨다고 생각하지만 답변드릴께요.

      getThumbnail 이라는 function은 두개의 인자를 받습니다.

      첫번째는 input tag의 input document 객체, 즉 document.querySelector('input') 하였을때 나오는 객체를 말합니다.
      file dom을 말하는거죠..
      두번째인자인 target은 jquery 객체를 말하는건데....
      소스 보시면 알겠지만 읽어 들인 파일의 thumbnail을 표시할 객체입니다.
      img tag일수도 있고, background를 주기 위한 division일 수도 있습니다.
      저는 division에 background-image로 적용하였습니다.

      결론을 말씀드리면, html은 input tag의 dom 객체를 넘기면 됩니다.

      더 궁금하신게 있으시다면 답변바랍니다.

[Javascript] // 주석제거 정규식.

Posted by Find my true self Fimtrus
2013.06.19 17:58 Programming/Hybrid App

언어마다 정규식 표현방식이 다르다.

특히 Javascript의 경우, RegExp라는 function을 사용하여 만든다. ( 물론 사용하지 않고도 만들 수 있다. 하지만 Syntax Error 를 경험하게 될것이다.)

기본적인 문법은 다음과 같다.

/**
 * 1.권장하는 방법..
 **/
var regExp = new RegExp(pattern,modifiers);

//또는.
/**
 * 2.같은 정규식을 만들더라도..Syntax Error가 많이 발생하는 것을 경험했다.
 **/
var regExp = /pattern/modifiers;


1번방법을 이용하여, 주석을 제거하는 정규식을 만들어 보겠다.("//" 에 해당하는 주석만 삭제된다.)



/**
 * "//"로 시작하고, "\n"(줄바꿈)으로 끝나는 글자(문장?)를 찾는다. 
 * modifier로 gm 을 지정. g 는 global(전체검색), m은 multiline(여러줄 찾기)
 */
var regExp = new RegExp("//.*\n", "gm");
/**
 * 그리고 제거하고자 하는 String value의 replace를 사용하면된다.
 * trim은 양 끝의 공백, 줄바꿈 등을 제거하기 위해 사용.
 * str은 임의의 문자.
 */
str = str.replace(regExp, "").trim()

위의 코드대로 검색하면, "//"에 해당하는 주석은 모두 제거된다.

"/* */"도 제거하는 코드는 다음에....업데이트.,,

이 댓글을 비밀 댓글로

[CSS] CSS Property 관련 사이트.

Posted by Find my true self Fimtrus
2013.06.11 10:53 Programming/Hybrid App

크롬으로 디버깅을 하더라도, CSS에서 지원하는 function들의 code assist 를 지원하지 않는 경우가 많다.

아래의 사이트를 참고하면 보다 편하게 작업할 수 있을 것이다.



이 댓글을 비밀 댓글로

[Javascript] 현재 위치 얻어오기.

Posted by Find my true self Fimtrus
2013.06.10 21:16 Programming/Hybrid App
 window.navigator.geolocation.getCurrentPosition(successCallback, failedCallback);

이 댓글을 비밀 댓글로

[jQuery] html 동적 추가후 jQuery Default UI 적용하기.

Posted by Find my true self Fimtrus
2013.06.04 17:28 Programming/Hybrid App

이것때문에 몇일을 삽질하고....화면 만든 다음에 크롬에서 컨트롤 CV를 얼마나했는데...

아래의 코드로 간단하게 적용할 수 있다....


//이렇게만 하면 jQuery의 Default UI가 적용이 되지 않는다.
$("타겟").append("추가할 html");

//하지만 강제로 pagecreate 트리거를 발생시키면!!
$("타겟").append("추가할 html").trigger("pagecreate");
//Default UI가 짠하고 생성된다.!!


위의 코드는 오직!! data-role 이 page 인 것만 동작한다.

다른 data-role에서도 적용할 수 있는 방법을 찾아...보아야겠다.


..

.

.


잠깐의 고민으로... 위의 문제를 수정한 코드!!

정말 간단하네..참..이걸로 몇일을 고민하다니.

//트리거를 create로 변경해주면 된다.
$("타겟").append("추가할 html").trigger("create");
//
//

실제 적용화면~~!

적용전...

적용후...


이 댓글을 비밀 댓글로

[jQuery] checkbox, radiobox javascript로 제어하기.

Posted by Find my true self Fimtrus
2013.05.28 11:35 Programming/Hybrid App

화면 진입시 체크박스에 대한 세팅이 필요할 때가 있다.

jQuery는 익숙치 않아, 이부분을 찾는데 시간이 많이 걸렸는데, 

아래의 코드로 간단하게 제어할 수 있다.



//uncheck.
$('.selector').prop('checked',false).checkboxradio('refresh');

//check
$('.selector').prop('checked',true).checkboxradio('refresh');

화면을 refresh 해주어야 정상적으로 check가 되는 것을 확인 할 수 있다.



그리고, 해당 checkbox의 체크여부를 알고 싶다면???



/**
  * @return boolean
  */
$('.selector').is(':checked');

이 댓글을 비밀 댓글로

[jQuery] append, remove animation 적용하기.

Posted by Find my true self Fimtrus
2013.05.23 13:41 Programming/Hybrid App

이건..길게 설명 할 것도 없고, 아래의 코드를 적용하면 된다.



Append :


$('Root View').append($(data).fadeIn());

Remove :


$('삭제할 화면').fadeOut("normal", function() { $(this).remove(); });

이 댓글을 비밀 댓글로

[jQuery] 외부 html파일을 읽어 현재 페이지에 추가하기.(append external html into current page)

Posted by Find my true self Fimtrus
2013.05.23 13:35 Programming/Hybrid App

화면을 동적추가할때 코드로 html을 추가하게된다.

하지만, 그 양이 많다면, 소스코드가 지저분해질 수 있는데, 

아래와 같은 방법으로 html파일을 읽어 원하는 곳에 추가할 수 있다.


/**
 * @param data : 파싱된 데이터가 리턴된다.
**/
$.get("fileName", function(data){
	$('추가할 Root View').append($(data).fadeIn());
});

이 댓글을 비밀 댓글로

[Javascript] 자바스크립트 암호화 관련 Github

Posted by Find my true self Fimtrus
2013.05.20 11:00 Programming/Hybrid App

아래의 주소에 접속하면 체크아웃 받을 수 있다.

https://github.com/tomyun/crypto-js

이 댓글을 비밀 댓글로

[Javascript] 숫자 금액 표시 세자리 콤마

Posted by Find my true self Fimtrus
2013.05.10 10:59 Programming/Hybrid App

정말 간단하다.

javascript의 Number 클래스가 지원하는 함수를 사용하면 된다.

var money = 2312000; //2,312,000원
money.toLocaleString();

결과 :

money.toLocaleString()
"2,312,000"

이 댓글을 비밀 댓글로