ajax가 웹에 많은 발전을 기여 한게 사실이지만 파일처리에 있어서는 항상 걸림돌이였다.
우선 먼저 짚고 넘어가야할게 ajax에서는 XMLHttpRequest프로토콜을 사용하는데 알다시피 파일업로드는 되지 않는다.
그렇다면 제목에서 말하는 ajax 파일 업로드가 과연 맞는것인가에 대한 의문이 드는게 사실인데..
혹자는  XMLHttpRequest을 사용하지 않는다면 결국 자바스크립트일뿐이라고도 한다.
(기존에 비슷한 기능을 iframe으로 구현을 많이 했으니 틀린말은 아니군요..)
하지만 결국 비동기식으로 보이게끔(-_-;) 구현을 해주니 ajax파일업로드라 하겟다..;;;..

파일업로드를 ajax방식으로 처리해주는 스크립트 라이브러리는 여러개가 있다.
jQuery가 유행하다보니 유난히 jQuery플러그인식으로 많이들 나오는거 또한 사실이다..
그중에서도 이번에 사용한 파일업로드 스크립트 라이브러리는  "uploadify" 로서
내부적으로 플래쉬 파일 업로드라이브러리인
"SWFUpload"를 내부적으로 포함해서 결과적으로 플래쉬파일을 사용해서 업로드를 처리하고있다.

우선 다운로드는 여기 == >   ["uploadify" 다운]
필자는 현재 최신버젼이지만 베타판인 -_-. .3.0.0 버젼으로 작업을 해보았다.
uploadify-v3.0.0.zip 파일을 풀어보면 샘플을 php기준으로 작성되어있는데 필자는 jsp 기반으로 작성해보았다.
우선 필요한 js 와 css등은 별도로 놔두고 jsp을 작성해야한다.

우선 알아둬야할게 uploadify의 경우 서버에 파일을 올릴때 올리고나면 파일명이 중복될것에 대해서 미리 체크해볼수 있게
옵션을 설정을 해주는데 필자의 경우 애초에 오리지널파일명과 변경될 파일명을 같이 등록하는 식으로 처리했다.
(파일을 저장할때 변경될 파일명을 지정해주고 그 파일명으로 rename후 업로드 된다.)

1. uploadify의 관련 js와 css, swf파일들을 작업 경로에 복사하자.
uploadify의 경우 swfobject와 jQuery 라이브러리를 참조하므로 없다면  아래에서 다운받도록하자
   [swfobject], [jQuery]

2. 파일폼 페이지 작성
<!DOCTYPE HTML>
<html>
<head> 
<link href="uploadify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="jquery.1.6.1.min.js"></script>
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript" src="jquery.uploadify.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('#file_upload').uploadify({
			'swf'		  	: 'uploadify.swf',	//파일업로드 이벤트를 가로챌 플래쉬.
			'uploader'    	: 'fileUpload.jsp',	//비동기 파일 업로드 처리 페이지 url.
			'cancelImage' 	: 'uploadify-cancel.png',	// 파일업로드시 취소 버튼 이미지.
			'checkExisting' : '',			//기존 파일이 존재하는지 체크할 페이지 url. 
			'postData' 		: {'fileName' : 'attach_'+new Date().getTime() },		//uploader 페이지 호출시 파라미터 추가. 
			'folder'    	: '/upload',
			'buttonText' 	: "파 일 첨 부",
			'auto'      	: true,							//자동 파일 업로드 여부
			'onUploadComplete'  : function(file, queue) {	//업로드 완료후 처리 callback 함수
				for(var name in file) {
					//업로드후 파일정보
					alert(name + "=" + file[name]);
				}
			}
		  });
	});
</script>
<body>
	<input id="file_upload" name="file_upload" type="file" /><br>
</body> 
</html>
uploadify 설정시 추가 옵션에 대한 내용은 해당 [API]문서에서 확인해볼수 있다.
위의 내용을 추가적으로 설명을 하자면 실제 uploader옵션에 "fileUpload.jsp"가 실제 파일 업로드 처리 페이지이다
해당 페이지에서는 어떤 리턴값도 필요가 없으니 순수하게 파일업로드 기능만을 구현하면되겟다.
중복 파일명 문제를 피하기 위해 파일 업로드시 미리 중복 파일명 검색을 하고자 한다면 "checkExisting" 옵션에 해당 체크할수 있는 페이지 url을 추가하면된다.(물론 파일명 중복체크 로직이 필요하며 return 값은 true || false 이다)

필자의 경우 postData 옵션을 통해 저장될 파일명을 미리 지정해주어 DB 저장시 용이하게 하였다.
위와 같은 옵션의 경우 실제 파일업로드 호출 url은 "fileUpload.jsp?fileName=attach_2012232312" 식이 될것이다.

"onUploadComplete" 옵션의 경우 파일 업로드 완료후 실행되는 callback함수로 서버에 올라간 파일정보를 얻을수 있다.
주로 파일명, 파일사이즈, 확장자, 작성일등의 정보를 얻을수 있으니 최종 DB저장시 참고해서 저장하면되겟다.

사족이지만 uploadify의 경우 swf파일을 통해 이벤트를 처리하므로 당연하게도 flash 플로그인을 설치한 사용자만 사용이 가능하다
이는 사용자 UI를 불편하게 만들수도 있기에 위 방법이 절대 베스트는 아니다.(플래쉬 플러그인 미설치 유저가 의외로 많다.)
차후 시간이 된다면 꼭 한번 직접 구현해보고 싶은 기능이니 언제고(?) 만들어봐야겠다.ㅡㅡ;;;;..
기존에 웹서비스에서 흔히 사용했던 퍼가기 기능을 구현가능하도록 해줬던 window.clipboardData.setData() 메소드는 알다시피 IE전용의 비표준함수이다.
이에 대한 대응으로 flash를 사용한 클립보드기능을 사용하였으나 이마저 flash10버젼이 나오면서 보안상의 이유로 막혀버렸다.;;

방법이 없을까 찾던중 "zeroclipboard" 라는 걸 발견. 바로 샘플확인후 적용해보았고 잘 돌아가는걸 확인했다.
zeroclipboard도 결국 JavaScript와 Flash의 연계를 통해 동작을 하는데 JavaScript-to-Flash interface인 ("ExternalInterface") 을 사용하는데 이는 오직 ONLINE상태에서만 가능하기에 로컬베이스로는 작동하지 않는다..;;

간략한 샘플 소스는 아래와 같다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
 <TITLE> New Document </TITLE>
</HEAD>
<script type="text/javascript" src="ZeroClipboard.js"> </script>
<script type="text/javascript"> 

 window.onload = function (){
 initClipBoard();
 };

 function initClipBoard(){
  var clipBoard = new ZeroClipboard.Client();

  //cursor hand type
  clipBoard.setHandCursor( true );   
  //swf화일 경로 설정.
  ZeroClipboard.setMoviePath("ZeroClipboard.swf");
  //버튼 활성화
  clipBoard.glue('copyContentBtn');
  
  //마우스 클릭시에 이벤트 발생. - 저장한다.
  clipBoard.addEventListener('mouseOver', function (client) {
clipBoard.setText( document.getElementById("content").value );
  });
  //COPY완료시에 발생할 CALLBACK함수.
  clipBoard.addEventListener('complete', function (client) {
alert("클립보드에 복사되었습니다. \'Ctrl+V\'를 눌러 붙여넣기 해주세요.");
  });  
 }
</script>
<BODY>
 <IMG SRC="btn_scrap.gif" id="copyContentBtn">
 <textarea id="content">copy content!!! <p> tab copy!! </p></textarea>
</BODY>
</HTML>


- 티스토리 에디터에 붙여넣기하면 들여쓰기는 좀 맞춰줬으면.....안될려나..;;

img 태그에 이벤트를 걸어주면 해당 zeroclipboard가 투명한 "ZeroClipboard.swf"로 해당 영역을 덮어버리면서 사용자의 액션이벤트를 가로챈후 이를 플래쉬에서 저장한후 다시 "complete"를 통한 콜백함수를 호출하게 된다.

테스트는 IE8, 파이어폭스, 크롬, 사파리브라우져에서 테스트해보았다.

출처 : http://code.google.com/p/zeroclipboard/

  1. 지나가는이 2012.01.04 15:55

    좋은 정보 감사합니다 ^^

  2. 감사드립니다 2012.06.01 17:14

    정말 정말 좋은 정보 감사드립니다.ㅠ.ㅠ


흔히 자바스크립트에서 문자열을 정수로 캐스팅할때 사용하는 parseInt함수.
얼마전에 년월일 정보를 가져와서 잘라서 월과 일을 나눠서 계산할 부분이 필요해서 사용했는데
parseInt("08"), parseInt("09") 의 리턴값이 동일한게 0 이 반환이 된다.;;

원인은 parseInt는 변환할 값이 처음에 "0"으로 시작하면 8진수로 변환하기때문에 08과 09의 리턴값이 0이다.
다행히 parseInt에 진수값을 지정이 가능하다. 흔히 사용하는 10진수로 변환을 할경우는 아래와같이 사용한다

var month = parseInt("08", 10);

당연하겟지만 항상 parseInt를 사용할경우엔 "0"으로 시작할경우 두번째 매개인자에 진법을 넣는코딩을 하자.

간혹  웹서핑중에
이 페이지의 스크립트로 인해 Internet Explorer 실행의 속도가 느려질 수 있습니다. 스크립트를 계속 실행할 경우 컴퓨터가 응답하지 않을 수 있습니다. 스크립트 실행을 중단하시겠습니까?
위와 같은  알렛창을 본적이 잇을것이다. 아쉽게도 이런메시지가 나온다면 십중팔구는 스크립트가 무한루프에 빠졋다고
봐도 되지 싶다.;;

브라우져별로 위와같이 무한루프 또는 너무 오랫동안 실행중임을 알려주는 알렛을 보여주는거는 브라우져마다 차이가 있다.

1. IE 
    - ie의 경우는 스크립트에 의해 실행된 문장의 수를 모니터링한다. 이후 실행된 문장의 수가 최대수(기본값 5백만) 보다
      많이 실행된다면 위와같은 알렛이 뜨는것이다.
      혹시나 무한루프는 아니지만 스크립트가 완료되는데 더 문장의 수를 늘려야 한다면
      http://support.microsoft.com/kb/175500 에서 해결책을 제시해준다.

2. 파이어폭스
   - 파이어폭스는 스크립트가 실행되는 시간을 모니터링한다. 그래서 기본적으로 지정된 10초보다 더 지속될경우 위와같은
      메시지를 만나게 된다.

3. 사파리
   - 사파리도 파이어폭스와 동일하게 실행되는 시간을 모니터링한다 파폭과 차이점은 기본 지정시간이 5초로 짧다.;;;

4. 크롬1.0버젼
   -  자바스크립트의 실행시간에 제한을 두지 않는다 메모리를 다 써버리면 프로세스가 죽는다.;;
      음.. 크롬의 자바스크립트 엔진이 타 브라우져보다 빠르니깐 메모리 다 쓸때까지 그냥 무시해버리는건가? ;;

5. 오페라
   - 오페라는 크롬보다 더 막장이다. 아에 아무런 조치를 취하지 않는다.ㅡㅡ;;.. 스크립트 동작이 완료될때까지 기다린다..;

스크립트는 단일 쓰레드 기반이기때문에 어느 하나 스크립트가 너무 많은 시간을 사용한다면 다른 스크립트는 마냥 기다릴수밖에 없는 상황이다.
일반적으로 스크립트 작성시 권고하는 실행시간은 100밀리초보다 길지 않아야 한다.

위와 같은 메시지를 만나게된다면 해당 스크립트 찾아 다음 사항을 확인해보자
 - 너무 많은 DOM 작업
 - 너무 많은 반복문
 - 너무 많은 재귀 함수 사용 (자바스크립트 엔진은 재귀 호출의 횟수를 제한하고 있지만 되도록이면 재귀호출은 사용하지 말도록하자;; 자칫 무한루프로 가는 지름길이 될수도 있다..-_-;;;)

참고 도서  : O'REILLY. Even Faster Web Sites(초고속 웹사이트 구축)

주로 배경 height값을 구하기 위해 브라우져의 전체 height값이 필요할 경우가 생긴다.
브라우져 종류가 많아지면서 각 웹브라우져 엔진별로 height 값을 가져오는 방식이 조금씩 다른데 샘플은 아래와 같다.

DTD는 HTML4.01 strict.dtd기준이다.


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


<script type="text/javascript">
var userAgent = navigator.userAgent.toLowerCase();

var browser = {
  msie  : /msie/.test( userAgent ) && !/opera/.test( userAgent ),
  safari  : /webkit/.test( userAgent ),
  firefox : /mozilla/.test( userAgent ) && !/(compatible|webkit)/.test( userAgent ),
  opera  : /opera/.test( userAgent )
};

window.onload = function (){
 var totalHeight = 0;



  if( browser.msie ){ //IE
   var scrollHeight = document.documentElement.scrollHeight;
    var browserHeight = document.documentElement.clientHeight;

   totalHeight = scrollHeight < browserHeight ? browserHeight : scrollHeight;

  } else if ( browser.safari ){ //Chrome || Safari
   totalHeight = document.body.scrollHeight;
 
} else if ( browser.firefox ){ // Firefox || NS
   var bodyHeight = document.body.clientHeight;

   totalHeight = window.innerHeight < bodyHeight ? bodyHeight : window.innerHeight;

  } else if ( browser.opera ){ // Opera
    var bodyHeight = document.body.clientHeight;

   totalHeight = window.innerHeight < bodyHeight ? bodyHeight : window.innerHeight;

  } else {
   alert("지원하지 않는 브라우져!!");
   }
  
  alert(totalHeight);
}

</script>
크롬과 사파리 같은 경우 웹브라우져 엔진이 동일하기때문에 사용방식이 동일하다.
스크롤바가 생성됏을경우엔 스크롤바 길이가 전체 height값이 된다.
사족이지만 달랑 브라우져의 HEIGHT값을 가져오는데 저정도 라인수가 필요하다니..어서 빨리 표준이 정착되길.ㅡㅜ..

자바스크립트의 함수인자를 처리함에 있어
문자열, 부울, 숫자등과 같은 원형 데이터를 값(call by value)을 함수에 인자로 넘겨줄수있다.
특이점은 함수내에서 값을 바꾸더라도 호출 프로그램에는 반영되지 않는다

하지만 객체는 다르다. 객체는 참조(call by reference)로 넘겨주므로 함수내에서 변경하면 호출 프로그램에도 반영된다.

아래 샘플 코드를 보자.

<script type="text/javascript">
     var str = "Original Value";
     var arr = new Array("one", "two");

     function changeValue(strValue , arrObject){
        strValue = "Change Value";
        arrObject[arrObject.length] = "three";
    }    
     changeValue(str, arr);
     document.writeln("str : " + str + "<br>");
     document.writeln("arr : " + arr);
</script>

결과는 아래와 같다.

str : Original Value
arr : one,two,three

퍼오기엔 내용이 다소 길어서 링크를 걸었다.
스크립트 사용하면서 한번쯤 반드시 읽어볼만한 내용.

[JavaScript 재입문]
보통 & 이녀석은 &amp; 로 캐스팅해서 처리하곤 했는데
이 마저도 안되는 상황이 생겨버렷다..-_-;;

일단 급하게 & 이 문자로 대체했더니 해결됐지만 특수문자 처리는 항상 문제지..

& 와 & 차이가 정확히 뭔지는 알수없으나 표시는 거의 동일하다..;;
ValueStateDescription
0UndefinedWindows Media Player is in an undefined state.
1StoppedPlayback of the current media item is stopped.
2PausedPlayback of the current media item is paused. When a media item is paused, resuming playback begins from the same location.
3PlayingThe current media item is playing.
4ScanForwardThe current media item is fast forwarding.
5ScanReverseThe current media item is fast rewinding.
6BufferingThe current media item is getting additional data from the server.
7WaitingConnection is established, but the server is not sending data. Waiting for session to begin.
8MediaEndedMedia item has completed playback.
9TransitioningPreparing new media item.
10ReadyReady to begin playing.
11ReconnectingReconnecting to stream.

예전 프로젝트에서 사용했었던 자바스크립으로 미디어플레이어 제어플밍을하는데 플레이어의 동작 코드들이다.
코드값 '3'이 플레이중일때 사용하는 함수다..ㅡ,.ㅡa;;.
사용법은 아래와 같다..참고로 미디어플레이어 버젼은 7.0이 이상이어야 한다..

// Test whether Windows Media Player is in the playing state.
if (3 == Player.playState)
    myText.value = "Windows Media Player is playing!";
else
    myText.value = "Windows Media Player is NOT playing!";


[출처 : MSDN]

'DOM, Script' 카테고리의 다른 글

JavaScript 재입문  (0) 2008.11.24
특수문자 & 의 다른 표현  (0) 2007.08.28
Windows Media Player 11 SDK Player.playState 함수  (0) 2006.11.26
IE7.0 에따른 이슈사항들  (1) 2006.11.16
[JavaScript] String을 XML로 변환  (0) 2006.10.26
[JavsScript] createElement 사용  (0) 2006.09.18

아 정말 쥐약 7.0이 출시가 됏네.ㅜ_ㅡ;..

과연 개발에 얼마나 짜증을 나게 만들어줄지 벌써부터 걱정이 된다.. 아흑..~

=====================================================================

원본글 : http://www.jakartaproject.com/article/javascripttip/116253612489064

1. window.status

window.status 코드가 인터넷 영역에서 실행되지 않습니다

function test() {

    window.status = 'Hi!';

}

단 로컬에서는 됩니다 즉 로컬에 저장된 html을 실행하면 window.status가 먹지만 인터넷에 있는 window.status는 실행되지 않네요 개인적으로 js 디버깅시 자주 사용하곤 했는데 아쉬운 부분입니다 ㅠ.ㅠ

 

2. <base>태그

HTML3.2 스펙에 따라 <base>태그는 반드시 <head></head>에 위치해야 합니다 그렇지 않으면 인식하지 않는다네요 예전엔 base태그를 간간히 썼지만 요즘은 frame 을 잘 사용하지 않아서인지 거의 사용하진 않죠

 

3. window.close()

window.close()시 나타나는 프롬프트를 회피하기 위해 window.opener 를 사용했었는데 더이상 아래 코드는 먹지 않고 창을 닫겠냐는 프롬프트가 뜨게 됩니다

window.opener=top;

window.close();

or

self.opener = self;
window.close();

 

4. _search

_search를 통해 검색창을 더이상 열지 못합니다

<a href="">Test Sidebar</a>


 

5. window.prompt()

디폴트로 block 됩니다


 

6. 제한되는 메쏘드들

execCommand

clipboardData.getData()

clipboardData.setData()

clipboardData.clearData()

클립보드 저장, 및 클립보드 데이터 가져오기등의 메쏘드들이 제한됩니다 해보니 보안경고창이 뜨더군요 MS에서는 clipboardData 객체 사용을 권고하지 않습니다

 

7. Modal 및 Modeless Dialog 크기가 변경!


한마디로 크기가 커집니다 -0- (짜증) 사이즈를 지정하면 content 크기를 의미합니다

 

8. 새창으로 뜰때 주소줄 보임

더이상 새창을 window.open 의 property 특성으로 조절할 수 없습니다 무조건 주소창이 나타납니다 아주~ 짜증 이빠십니다 ㅠ.ㅠ


 

9. window.resizeTo()

window.resiztTo 함수는 에러가 발생하거나 차단됩니다

function changeSize(){
    window.resizeTo(1024,768);
}

 

10. HTTP, HTTPS 혼합된 인터넷 영역에서 보안 경고가 발생합니다

 

11. SELECT가 windowed element로 개선

이전까지는 SELECT Element가 Windowsed Element였기 때문에 다른 element와 달리 별도의 MSHTML pane에서 rendering되었습니다 즉 SELECT가 그림과 같이 layer들을 다 먹어버렸었는데, 이젠 그렇지 않다는거죠 요거 하나는 좋아졌네요 -0-


 

12. 스크립트 차단

6.0 까지는 아래 코드가 실행되어 보안에 매우 취약했었습니다 (XSS)

 <img src="javascrip t:alert('a')">

7.0 부터는 아예 실행이 안되네요 FF 2.0 도 실행이 안되는군요 ^^

 

13. CSS

100%는 아니지만 CSS2.1 표준 구현 강화가 되었습니다 또한 <a> 태그에서만 가능했던 :hover나 background-attachment: 가 모든 태그에서 사용가능해 졌습니다

  1. Shovel 2006.11.21 00:00

    생각 나는건 하나 각 지점에 IE7.0이 깔리기 전에 얼렁 끝내고 튀어야 겠다는거~~~~

+ Recent posts