이 역시 티몬 구매후기에서 이미지 업로드와 관련된 기능을 적용하면서 나온 내용을 정리 차원에서 적어 둡니다.


구매후기 작성 시 이미지를 선택해서 업로드를 하게 되는데, 기존에는 이미지의 사이즈를 제한하는 기능이 있었고 이로 인해 이미지 제한에 걸려 이미지를 업로드 하지 못하거나, 업로드 된 원본 이미지도 용량이 너무 큰 문제가 있었습니다. (장당 3MB)


아무런 제약 없이 이용자는 이미지를 마음껏 올릴 수 있으려면 이미지 리사이즈가 필요한데, 서버단에서 용량 리사이징을 하게 되면 아까운 네트웍 비용이 들어가게 되므로 클라이언트 단에서 용량을 줄일 필요가 있었습니다.

그래서 사용하게 된 것이 HTML5의 Canvas 기능이죠.

물론 이전에 HTML5를 제대로 사용해 본 적이 없어서...

모든 기능은 최고의 방법이 구글링을 통해 적용했습니다.

그리고 HTML5의 Canvas가 적용되지 않는 브라우저를 위해서라도 (망할 IE -.-;;) 기존 소스 코드는 남겨두고 분기 처리를 해야 했습니다.


기본적으로 jQuery를 사용 했습니다.

아... 그리고 기본적으로 저는 자바스크립트를 잘 못하는 개발자이므로 발코딩이 나와도 이해해 주세요 ^^

간단한 설명은 주석으로 달았습니다.



<html5의 Canvas를 사용해서 이미지 리사이징이 가능한지 판별하는 메소드>


<html form>


<file input을 통해 file을 선택했을 경우 동작하는 메소드>


<String을 Binary로 변환해 주는 메소드. 구글링 결과물로 정확한 내용은 검토해 보지 못함>


<리사이징 된 파일을 업로드 하는 메소드>






저작자 표시 비영리 변경 금지
신고

WRITTEN BY
체리필터
프로그램 그리고 인생...

받은 트랙백이 없고 , 댓글이 없습니다.
secret
처음으로 팁텍을 올리는 군요... ^^;;
이미지 파일일 경우... 파일을 업로드 하기 전에 미리 크기를 체크하는 스크립트입니다.
다른 파일일 경우에는 안 해 봤는데... 아마도 안될꺼 같구요...^^;;
이미지 파일은 잘 되는 거 같습니다.^^;;

다음은 소스입니다...

***************************************************************************

신고

WRITTEN BY
체리필터
프로그램 그리고 인생...

받은 트랙백이 없고 , 댓글이 없습니다.
secret
우선 부모 프레임이 있는 주소는 http://aaa.com입니다.
그리고 프레임 내에 들어갈 주소는 http://sub.aaa.com입니다.

부모에서 자식을 제어하던, 자식에서 부모를 제어하던... 서로 호스트가 틀리면... 억세스 권한이 없다고 나오죠.. ^^
그럴 경우... 다음과 같이 해주면 됩니다.

1. aaa.com의 문서 내에 다음과 같은 자바스크립트를 넣습니다.

<script language="javascript">
document.domain = "aaa.com";
</script>

2. 그리고 sub.aaa.com에도 다음과 같이 합니다.

function eventLoad() {
document.domain = "aaa.com";

아이프레임 늘리는 소스...
}

물론... 아이프레임 늘리는 소스는 이전 팁들에서 검색하시면 많이 나옵니다. ^^

주의할 점은 아예 다른 도메인간에는 안되며, 같은 도메인, 틀린 호스트에서만 됩니다.
또한 ip로 접속해도 에러가 납니다. ^^
자바스크립트 보안도 그런대로 괜찮네요. ^^ ㅋ

그럼 오늘도 즐프... ^^
신고

WRITTEN BY
체리필터
프로그램 그리고 인생...

받은 트랙백이 없고 , 댓글이 없습니다.
secret
자바스크립트에서 폼의 객체 이름을 "objName[]" 식으로 지을 경우가 있다.
보통 php쪽에서 배열로 받기 위해서 위와 같이 짓는데...
이를 자바스크립트에서는 배열로 인식하지 못해 조금 난처한 경우가 많다.

가령 다음과 같은 경우 오류가 난다

<HTML>
<HEAD>
</head>

<script language="JavaScript">
<!--
function objLength() {
   alert(document.testForm.checkObj[].length);
}
//-->
</script>

<form name="testForm">
<input type="checkbox" name="checkObj[]"> aaa
<input type="checkbox" name="checkObj[]"> bbb
<input type="checkbox" name="checkObj[]"> ccc

<a href="javascript:objLength();">체크박스의 개수는?</a>
</form>

이럴 경우에는 다음과 같이 처리해 주면 된다.



<script language="JavaScript">
<!--
function objLength2() {
   alert(document.forms['testForm2']['checkObj[]'].length);
}
//-->
</script>

<form name="testForm2">
<input type="checkbox" name="checkObj[]"> aaa
<input type="checkbox" name="checkObj[]"> bbb
<input type="checkbox" name="checkObj[]"> ccc

<a href="javascript:objLength2();">체크박스의 개수는?</a>
</form>

또한 각 개체로의 접근은 다음과 같이 사용하면 된다...

ex) document.forms['testForm2']['checkObj[]'][0].value


이 문제로 조금 머리 아파 하던 차에... 해결방법을 알게 되어서 올립니다. ^^
신고

WRITTEN BY
체리필터
프로그램 그리고 인생...

받은 트랙백이 없고 , 댓글이 없습니다.
secret
$_FILES의 error가 2번이 나오는데 왜 그러냐는 질문을 오늘 받았습니다.
그래서 메뉴얼을 살펴 본 결과...
html에서도 max file size를 제어할 수 있다는 것을 알았습니다. ^^

html 폼 안에 hidden으로 다음과 같이 넣어주면 됩니다.


<form enctype="multipart/form-data" action="_URL_" method="post">
<input type="hidden" name="MAX_FILE_SIZE" value="30000" />
이 파일을 전송합니다: <input name="userfile" type="file" />
<input type="submit" value="파일 전송" />
</form>


여기서

<input type="hidden" name="MAX_FILE_SIZE" value="30000" />

이 부분이 중요합니다.
요기에다 업로드 max value(M*1024)를 적어 주시면 됩니다.
그러면 서버측에서 에러 메세지($_FILES['userfile']['error'])가 2로 나오거나... php 4.3.0 이상에서는 UPLOAD_ERR_FORM_SIZE 라고 나옵니다.

메뉴얼에는 다음과 같이 나오네요

"MAX_FILE_SIZE는 PHP가 확인하기도 하지만, 브라우저에 대한 권고입니다. 이 값을 변경하는건 매우간단하기에, 크기가 큰 파일을 막기 위해서는 이 기능에 의존해서는 안됩니다. 대신, 최대 크기에 관한 PHP 설정은 속일 수없습니다. 그러나 MAX_FILE_SIZE 폼 변수는 사용자가 파일이 너무 크다는 것을 파악하기 위해서 실제 전송을 하는 동안기다릴 필요를 없애줍니다.

"사용자가 파일이 너무 크다는 것을 파악하기 위해서 실제 전송을 하는 동안 기다릴 필요를 없애줍니다" 라는 말뜻을 정확히 못알아 들어서 직접 테스트 해 보니...
MAX_FILE_SIZE까지만 올리고.. 그 이상 더 업로드가 되면 중지하는 거 같습니다. ^^
업로드 하기 전에 체크 해 주면 더 좋을 텐데요 ^^;;
어째든... 오늘 새로운 것을 알게 되었습니다. ^^
신고

WRITTEN BY
체리필터
프로그램 그리고 인생...

받은 트랙백이 없고 , 댓글이 없습니다.
secret
window open을 할 때 똑같은 사이즈를 줘도,
sp2에서 팝업창 아래 상태바가 있는 경우와 그외의 os에서 상태바가 없는 경우 창 안의 내용들이 달라 보이는 경우가 있다.

또한 앞으로 나올 IE7의 경우에는 창 상단에 주소까지 나와서 많이 틀려보이는 경우가 발생한다.

이때 다음과 같은 스크립트를 사용하여 onload에 넣어주면, 상당히 깔끔한 window resize가 된다.




cf) Dwidth, Dheight를 제대로 못 알아오는 경우가 발생할 때에는...
적당히 조절 해서 해당 수치를 그대로 넣어주는 수 밖에 없는 듯 하다.

special thanks - 행복한고니님... 귀찮게 질문 드려 알아냈습니다 ㅋ
신고

WRITTEN BY
체리필터
프로그램 그리고 인생...

받은 트랙백이 없고 , 댓글  2개가 달렸습니다.
  1. 좋은 정보 감사드립니다.
    두고두고 참고해서 보려고 제 블로그에 출처 표기한 이후에 스크립트 부분만 데리고 갔습니다(__)

    혹시라도 삭제를 원하시면 이 글의 댓글이나 http://databook.tistory.com/11 여기에 댓글을 달아주시면 바로 조치를 취하도록 하겠습니다.

    좋은 정보 감사드립니다. 덕분에 살았습니다 ^^;
secret
객체를 만들어 사용하다가 객체의 개수를 object.length로 못 알아 온다는 것을 알고... -.-;;
이 역시 고니님께 물어봤다...
팁 겸... 자료 백업 겸... 올려본다 ㅋ

신고

WRITTEN BY
체리필터
프로그램 그리고 인생...

받은 트랙백이 없고 , 댓글이 없습니다.
secret
회사에서 특정 내용을 클립보드에 복사하는 기능을 만들 필요가 있었는데...
그동안 파폭은 지원이 안된다는 단정하에, 익스에서만 돌아가도록 만들었었다.
그런데 혹시나 하는 맘에 구글링 해 보았더니...
다음과 같은 팁이 나오더라... ㅋ
무단 펌질이라서 -.-;;

##### 펌 내용 시작...

<input type="button" onclick='return copy_clip("클립보드로 복사했습니다.")'> 혹은, MT에선
<input type="button" onclick='return copy_clip("<$MTEntryTrackbackLink$>")'>

무버블타입의 경우 아래의 스크립트를 바로 해당 아카이브 템플릿의 <head>태그 사이에 복사해 넣지 말고, Template Modules 섹션에서 clipboard라는 이름으로 템플릿 모듈을 만든 후에,
적용할 아카이브 템플릿의 <head> 태그 안에서 <MTInclude module="clipboard"> 식으로 사용하는게 낫다. 블록을 오래 운용하다보면 당연히 이런 저런 자바스크립트 모듈을 덧붙이게 되는데 그럴 때 마다 한 메인 아카이브 템플릿에다 복사해 넣는다면 차후 수정시에 곤란을 겪기 쉽다.


<script language="javascript" type="text/javascript">
<!--
function copy_clip(meintext){
if (window.clipboardData)
{

// the IE-manier
window.clipboardData.setData("Text", meintext);

// waarschijnlijk niet de beste manier om Moz/NS te detecteren;
// het is mij echter onbekend vanaf welke versie dit precies werkt:
}
else if (window.netscape)
{

// dit is belangrijk maar staat nergens duidelijk vermeld:
// you have to sign the code to enable this, or see notes below
netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect');

// maak een interface naar het clipboard
var clip = Components.classes['@mozilla.org/widget/clipboard;1'].createInstance(Components.interfaces.nsIClipboard);
if (!clip) return;

// maak een transferable
var trans = Components.classes['@mozilla.org/widget/transferable;1'].createInstance(Components.interfaces.nsITransferable);
if (!trans) return;

// specificeer wat voor soort data we op willen halen; text in dit geval
trans.addDataFlavor('text/unicode');

// om de data uit de transferable te halen hebben we 2 nieuwe objecten nodig om het in op te slaan
var str = new Object();
var len = new Object();

var str = Components.classes["@mozilla.org/supports-string;1"].createInstance(Components.interfaces.nsISupportsString);

var copytext=meintext;

str.data=copytext;

trans.setTransferData("text/unicode",str,copytext.length*2);

var clipid=Components.interfaces.nsIClipboard;

if (!clip) return false;

clip.setData(trans,null,clipid.kGlobalClipboard);

}
alert("반갑습니다.\n" + meintext);
return false;
}
//-->
</script>

가능하면 해석 불가한 주석이라도 지우지 말고 사용하는게 좋을 것 같다.



모 질라, 파이어폭스는 보안이 강화되어서 자바스크립트라 하더라도 그 내용에 따라 기존의 Active-X컨트롤처럼 일종의 권한 허가를 받아야 가능하다고 한다. 이 스크립트의 경우 시스템의 클립보드에 접근하는 것이라 그런지, 이를 실행시키려 하면 시스템 보안에 관한 창이 뜨면서 권한 허가 여부를 묻는다. 당연히 "예" 를 눌러야 복사가 될 것이다.

위 루틴은 복사한 후에 확인창(alert창)을 띄워 주는데 혹 이런 창이 안뜨고 복사만 된다 던지 혹은 정상적인 작동이 안된다 싶을 경우엔, 브라우져의 주소창에 about:config 를 치면 해당 설정 내용이 쭉 나타나는데 그 중에서 Signed.applets.codebase_principal_support 라는 부분을 찾아서 true로 바꿔주면 문제없이 작동할 것이다.


##### 펌 내용 끝...
신고

WRITTEN BY
체리필터
프로그램 그리고 인생...

받은 트랙백이 없고 , 댓글  2개가 달렸습니다.
  1. 위 코드를 사용해보았는데 마찬가지로 파이어폭스에서 동작을 하지 않네요.
    시간이 많이 지난 포스트인데.. 혹시 해결하셨나요?
    • 잘 되던데요 ^^;;
      지금은 잘 모르겠네요. 그당시에는 잘 됬었습니다.
      위 내용에 나와 있다 시피 about:config를 주소창에 넣고 해당 내용을 설정해 주어야 하는 단점은 있습니다.
secret
[CODE] function addNumbers(x, y){   if (arguments.length == addNumbers.length) {       return (x + y);   }   else       return 0; }[/CODE]

ex)
addNumbers(3,4,5)  // returns 0
addNumbers(3,4)    // returns 7
addNumbers(103,104) // returns 207

arguments.length는... 실제 넘어온 인자 개수를
함수명.length는 함수에서 정의 한 인자 개수를 반환합니다.
두개를 비교해서 같은 경우에만 실행 시키면 되겠네요 ㅋ

제가 만든 팁은 아니구 모질라 디벨롭 센터에서 퍼 왔습니다 ^^
신고

WRITTEN BY
체리필터
프로그램 그리고 인생...

받은 트랙백이 없고 , 댓글이 없습니다.
secret