nahos

pdf.js 홈페이지 : http://mozilla.github.io/pdf.js/

pdfobject 홈페이지 : https://pdfobject.com/

각각의 홈페이지에서 js 파일이 다운로드 가능하며, 예제도 확인 가능하다.

둘중 하나만 사용해도 pdf뷰어로 사용은 가능하다.

pdfobject는 pdf.js를 사용하지 않으면 익스플로러(ie)에서는 작동이 불가능하다.

https://pdfobject.com/examples/pdfjs-forced.html

위의 주소에 예제와 같이 사용하여 구현했다.

우선 첫번째로 pdf.js 홈페이지에 접속하여 다운 받는다.

압축을 해제하여 프로젝트에 폴더를 통째로 업로드 한다.

( pdfjs/web/view.html 파일이 실제 pdf 뷰어 페이지이며, pdfjs폴더를 그대로 업로드시 변경해야 하는 부분은 없다.

  pdf를 보여주는 pdf.js 파일은 pdfjs/build/pdf.js 위치에 있다. )

두번째로 pdfobject.js 홈페이지에 접속하여 다운 받는다.

압축을 해제하여 폴더 안에 있는 pdfobject.js 파일과 pdfobject.min.js 파일을 

프로젝트에 업로드 한다. 

마직으로 pdf를 보여줄 html 페이지를 수정한다. 

아래의 style은 pdf 뷰어와 결과 텍스트를 보여주는 것이며, 자신에  맞게 수정하면된다.

<input id="upfile" type="file" class="" name="upfile" accept="*/*" />

위와같이 파일을 첨부하는 경우에 파일용량을 확인하는 방법

아래와 같이 전송하기 전에 파일의 용량을 확인하는 함수를 만들어서 사용한다.

document.getElementById("upfile").files[0].size;//파일 용량

기본적인 timepicker 에 대한 설명과 옵션은 http://timepicker.co/ 에서 확인

timepicker 다운로드는 https://github.com/wvega/timepicker 에서 다운

(기본적인 timepicker를 사용하는 방법은 홈페이지에 잘 나와 있음)

두개의 시간을 정하여, 

첫번째 시간에서 선택한 시간을

두번째 시간에서는 첫번째 시간 이후 부터 선택을 하게 해주려면 아래와 같은 timepicker 사용 

즉 첫번째 시간에서 선택한 시간을 두번째 시간의 mintime으로 정해주는 방법

변형된 형태의 timepicker 는 http://jonthornton.github.io/jquery-timepicker/

다운로드는 https://github.com/jonthornton/jquery-timepicker

위의 자바스크립트는  https://github.com/jonthornton/jquery-timepicker 에서 받은 timepicker를 사용할때 적용가능

test.html

appendChild를 사용하여 div를 동적으로 추가해주는 자바스크립트입니다.

<script type="text/javascript">

function add_div(){

    var div = document.createElement('div');

    div.innerHTML = document.getElementById('room_type').innerHTML;

    document.getElementById('field').appendChild(div);

}

function remove_div(obj){

document.getElementById('field').removeChild(obj.parentNode);

}

</script>

아래와 같은 html이 있으면,  추가버튼을 클릭하면 room_type이란 id를 가진 div를 복사하여

field란 id를 가진 div에 생성해주는 소스입니다.

삭제를 눌렀을경우에는 삭제해주는 소스입니다.

<input type="button" value="추가" onclick="add_div()"><br/>

<div id="room_type">

<div class="form-group">

<label for="image">제목</label>

<input type="text" id="title" name="title" class="form-control" ></input>

</div>

<input type="button" value="삭제" onclick="remove_div(this)">

</div>

<div id="field"></div>

append / appendChild / appendTo 등....

위와같은 동적 태그를 사용하여 div를 추가하는 작업을 하였다.

근데 동적으로 추가된 부분에는 일반적인 제이쿼리 이벤트(click / change 등..)가 작동을 하지 않았다.

삽질을 한참 하다가 동적으로 추가된 부분에서는 자바스크립트, 제이쿼리가 작동하지 않는 것을 확인...

원래의 소스이며 일반적으로 사용하는 방식

$("input[type=file]").change(function(){

preview($(this)[0], $(this).attr("class"));

});

동적 태그를 사용한 경우는 아래와 같은 방식을 사용해야 한다.

$(document).on("change","#thum_img",function(){

preview($(this)[0], $(this).attr("class"));

});

on을 사용하는 것이 핵심이며, 

on의 매개변수는 on(이벤트, 이벤트타켓 , 함수)을 사용한다.

(*위의 소스는 이미지 미리보기를 위해 작업을 하는 소스로 방식만 확인)