최근의 작업 중에 대용량 파일을 업로드할 필요성이 있어 관련 플러그인을 서치 후 사용하게 된 jQuery File Upload 이다. 큰 파일의 경우 여러 개의 파일로 쪼개서 업로드 하기 때문에 서버 용량이 허용하는 한 파일을 업로드할 수 있다. 중간에 오류가 나지 않는다는 전제하에서 말이다. 그리고 파일 업로드가 ajax 로 처리 되기 때문에 시각적으로도 좋은 점이 있다. 파일 …
Dropzonejs를 이용해 Drag & Drop 파일 업로드 기능을 구현했다. form 페이지에서 업로드 이미지를 추가하고 submit 버튼을 클릭했을 때 서버로 이미지 파일이 업로드되도록 했고 추가된 이미지 파일을 삭제했을 때 서버에 저장된 이미지도 삭제되도록 기능을 구현했다. 스크립트 코드 중 일부는 jQuery를 이용하기 때문에 함께 로드되어야 한다. <form name=”fname”> <label for=”fld”>필드</label> <input type=”text” name=”fld” id=”fld” value=””> <div class=”dropzone” …
ajax 요청 처리를 순차적으로 처리할 필요성이 있어 jQuery ajaxQueue 플러그인을 사용했다. 데모 : http://demo.codepub.net/ajaxqueue.html <!DOCTYPE html> <html> <head> <meta charset=”utf-8″> <title>ajaxQueue Demo</title> <link rel=”stylesheet” href=”./css/common.css”> <script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js”></script> <script src=”./js/jquery.ajaxQueue.min.js”></script> </head> <body> <div class=”ajaxQueue”> <ul id=”ajaxQueue-items”> <li>Item 0</li> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> <ul id=”ajaxQueue-output”> </ul> <div><button type=”button” id=”run”>Run</button></div> </div> <script> $(function() { $(“#run”).on(“click”, function(e) …
PhantomJS를 이용해 서비스 개발 중 evaluate 안에서 AJAX 처리가 필요한 경우가 있어 아래 코드를 작성했다. 대상 웹페이지에 jQuery는 이미 로드된 상태라고 가정한다. “use strict”; var sys = require(“system”); var page = require(“webpage”).create(); var args = sys.args; page.open(‘http://example.com’, function(status) { var text = page.evaluate(function(arg) { var result; var category = arg[1]; jQuery.ajax({ async: false, cache: false, …
DB 등에 저장된 설정 데이터를 ajax json 데이터로 가져와서 입력폼의 input 등에 적용하는 개념적인 코드이다. $(“.config_load”).on(“click”, function() { var $el; var type = “config”; $.ajax({ type: “POST”, url: “./config_load.php”, cache: false, async: false, data: { type: type }, dataType: “json”, success: function(data) { if(data.error) { alert(data.error); return false; } $.each(data, function(key, val) { if(key == …