Dropzonejs를 이용한 Drag & Drop 파일 업로드 구현

Dropzonejs를 이용해 Drag & Drop 파일 업로드 기능을 구현했다. form 페이지에서 업로드 이미지를 추가하고 submit 버튼을 클릭했을 때 서버로 이미지 파일이 업로드되도록 했고 추가된 이미지 파일을 삭제했을 때 서버에 저장된 이미지도 삭제되도록 기능을 구현했다. 스크립트 코드 중 일부는 jQuery를 이용하기 때문에 함께 로드되어야 한다. <form name=”fname”> <label for=”fld”>필드</label> <input type=”text” name=”fld” id=”fld” value=””> <div class=”dropzone” […]

Read More

[JS] Clipboard.js 를 이용하여 클립보드 복사 후 툴팁 표시하기

input 이나 textarea 의 내용을 클립보드로 복사하기 위해 clipboard.js 를 사용한다. 기본 clipboard.js 의 기능에 복사 후 Copied 라는 툴팁이 표시되도록 수정했다. 코드는 아래와 같다. Clipboard 데모 : http://demo.codepub.net/clipboard.html <!DOCTYPE html> <html> <head> <meta charset=”utf-8″> <title>Clipboard Demo</title> <link rel=”stylesheet” href=”./css/clipboard.css”> <script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js”></script> <script src=”https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.6.0/clipboard.min.js”></script> <script src=”./js/clipboard.tooltip.js”></script> </head> <body> <div> <input type=”text” value=”http://www.google.com” id=”copy_text”> <button class=”copy”>COPY</button> </div> […]

Read More

[jQuery] input 필드에 금액 입력 때 콤마 표시하기

매번 자전거 탄 것만 올리다 이건 아니다 싶어 별로 어렵지 않은 jQuery를 이용한 코드를 하나 올린다. input 필드에 금액을 입력할 때 입력한 금액을 알아보기 위해 콤마를 표시하게 되는데 이걸 가능하게 하는 코드이다. 물론 jQuery는 페이지에 이미 로드되어 있다고 가정한다. <script> function number_format(data) { var tmp = ”; var number = ”; var cutlen = 3; […]

Read More

[JS] 서버시간을 화면에 실시간으로 표시하기

간혹 서버시간을 실시간으로 사용자에게 보여줄 필요가 있다. 이 때 사용하기 위해 만든 것으로 자바스크립트의 setInterval 을 사용해서 비교적 간단하게 구현할 수 있다. 아래는 기능을 수행하는 코드이다. <!doctype html> <html lang=”ko”> <head> <meta charset=”utf-8″> <title> 서버시각 표시 </title> </head> <body> <div id=”server_time”><?php echo date(“Y-m-d H:i:s”, time()); ?></div> <script> var srv_time = “<?php print date(“F d, Y […]

Read More

jQuery 모바일 브라우저 하단 플로팅 메뉴

이전 포스팅 jQuery 모바일 브라우저 상단 플로팅 메뉴에 이어서 이번엔 모바일 브라우저 하단 플로팅 메뉴이다. 상단 플로팅 메뉴와 같이 모바일 브라우저에서 화면 하단에 항상 메뉴가 표시되도록 하는 것이다. css와 html 문서 코드는 이전 상단 플로팅 메뉴 포스트를 참고하면 된다. 다른 것은 생략하고 js 코드만 첨부한다. (function($) { $.fn.bottomFloatMenu = function(timeout, duration, interval, count) { var cfg […]

Read More