▨▨ 왜 필요할까?

PHP 또는 ASP 등 enctype="multipart/form-data" 로 FORM을 전송하는 경우,
업로드 파일이 서버의 특정 공간에 임시파일로 저장되어지기 전까지는 PHP가 파일에 대한 정보를 알 수 없다고 합니다. 그래서 파일이 몇%나 업로드 되고 있는지 알지 못한 채, 사용자는 지루한 화면만 보게 되는데요.. 이런 단점을 극복하고자 몇가지 방법들이 있습니다만, ActivX를이용하는 경우, 사용자에게 ActivX를 허용하겠다라는 Agreement를 받아야만 하므로 불편함이 있습니다. 때문에 ActivX의 기능을 빌리지 않고 자체적인 기능으로만 서버의 임시저장소에 올라오고 있는 임시파일을 찾아서 그 크기를 지속적으로 리포트하는 방법이 꾸준히 시도되는것 같습니다.

▨▨ 업로드 프로그레스을 위한 요건.

업로드진행바를 구현려면
첫째 업로드할 파일의 크기를 알아야 합니다.
둘째 임시저장소에 있는 다수의 임시파일중에서 업로드중인 사용자의 임시파일을 알아야 합니다.
셋째 알아낸 파일크기를 지속적으로 사용자의 화면에 보내줘야 합니다.

첫째, 업로드 하기전 파일 크기를 알아내는데에 브라우저별로 차이가 있습니다.
MS IE 에서는 파일크기를 알아올 수 있지만,
파이어폭스에서는 보안상의 이유로 브라우저가 사용자의 로컬정보를 알 수 없게 하였습니다.
기타 브라우저의 호환에 관해서는 잘 모르겠습니다만,
파일크기를 알아올 수 있는 브라우저와 그렇지 못한 브라우저로 분리하여 후자의 경우에는
전송된 크기와 남은 파일 갯수만 보여주고 진행%는 표시하지 않는것으로 하였습니다.

둘째, 임시파일과 시용자별 매치시키는 문제는 예전에 WndProc님께서 PHPSCHOOL Tip&Tech 게시판에,
임시파일의 이름을 지정한 이름으로 생성하게 하도록 PHP소스를 컴파일하는 방법을 소개한 적이 있습니다.
임시파일과 시용자별 매치시키는 문제는 PHP소스를 컴파일하는 방법이 가장 정확하겠습니다만,
버전이 바뀌면 그때마다 다시 PERL소스를 해석하고 수정해야 하는 번거로움이 있을 뿐 아니라,
웹호스팅을 이용하는 프로그래머들에겐 적당하지 않은 방법입니다.
이 문제에 관해서 외국사이트에서 임시폴더의 최근 파일을 검사하는 방법을 보고 힌트를 얻어 진행하던 중,
후에 행복한고니님께서 업그레이드 된 http://blog.joshuaeichorn.com/archives/2005/05/01/ajax-file-upload-progress/ 를 알려주었습니다. 위 사이트에서 Class로 되어있는 다운로드가 있습니다만, 이전 버전의 소스를 보고 어렵고 복잡하게 느꼈던 터라 최근버전의 소스를 참고하지는 않았습니다.
사실 내공이 부족하여 클래스는 소스분석도 잘 안됩니다. (-_-;)
임시폴더의 최근 파일을 검사하는 방법은 비교적 잘 맞지만, 업로드가 빈번한 서버의 경우 다른 사용자의 임시파일 정보를 잘못 캐치할 수도 있습니다. 설사 그렇다고 한들, 파일이 업로드 되는것과는 무관하므로 무시.(-,.-)

셋째, 임시파일의 크기를 거꾸로 사용자의 브라우저에 지속적으로 보내주는 것은, 약간의 꽁수가 필요합니다.
IFRAME으로 계속 리로드 하는방법이 있으나 이 경우 틱~틱~ 거리는 화면갱신 소리가 거슬려서 선호되지 않는 방법입니다.

<script id="Dynamic" language="JavaScript"></script>
<script>
function Repeat(){
    getElementById('Dynamic').src = "tmp_reader.php";
}
setTimeout("Repeat()",1000);
</script>

따라서 Ajax에서 사용하는 위 방법으로 해보았으나, MS IE에서는 잘 되었지만,
파이어폭스에서 되지가 않았습니다.
파이어폭스는 한번 읽은 내용을 캐쉬에 담아두고 갱신하지 않는것 같았으며,
"tmp_reader.php?랜덤쓰레기변수" 로 처리하여 다른 파일인것 처럼 해도 통하지 않았습니다.

<img id="Dynamic" width="1" height="1" src="nofile">
<script>
function Repeat(){
    getElementById('Dynamic').src = "tmp_reader.php";
}
setTimeout("Repeat()",1000);
</script>

위 방법은 언젠가 PHPSCHOOL에 메일 수신확인을 위한 꽁수로 소개된 방법입니다.
자바스크립트를 갱신하는 대신 이미지 파일을 갱신하는것으로 바꾸고,
tmp_reader.php 파일의 내용에 파일을 캐쉬하지 말라는 해더인

header("Expires:Mon,26 Jul 1997 05:00:00 GMT");
header("Last-Modified:".gmdate("D,d M Y H:i:s")."GMT");
header("Cache-Control:no-cache,must-revalidate");
header("Content-Type: image/gif");

위 코드를 추가함으로서 파이어폭스에서도 지속적인 갱신이 가능했습니다.

▨▨ 임시파일을 알아내고 그 파일을 브라우저에 알려주는 tmp_reader.php 파일

<?
session_start();
if(!$_SESSION["upfile"]["tmp_name"] || !file_exists($_SESSION["upfile"]["tmp_name"]) || time()-filemtime($_SESSION["upfile"]["tmp_name"])>10 || $_SESSION["upfile"]["size"] == @filesize($_SESSION["upfile"]["tmp_name"])){
    $tmp_files = @glob("/tmp"."/[p][h][p]*",GLOB_NOSORT);
    $_SESSION["upfile"]["tmp_name"] = $tmp_files[0];
    $_SESSION["upfile"]["size"] = @filesize($tmp_files[0]);
}else{
    $_SESSION["upfile"]["size"] = @filesize($_SESSION["upfile"]["tmp_name"]);
}
setCookie("ZUfileSize",$_SESSION['upfile']["size"],time()+10,"/");
header("Expires:Mon,26 Jul 1997 05:00:00 GMT");
header("Last-Modified:".gmdate("D,d M Y H:i:s")."GMT");
header("Cache-Control:no-cache,must-revalidate");
header("Content-Type: image/gif");
?>

소스는 위가 전부입니다. 최근의 임시이름과 크기를 세션으로 저장하여 계속 모니터하는 방법입니다.
소스를 보면 대충 알겠지만,
첫째 세션정보가 없는경우 최초의 업로드입니다.
둘때 세션정보에 있는 파일이 실제로 존재하지 않은 경우는 이전에 업로드 경험이 있는 사용자의 새 업로드입니다.
셋째 실제 임시파일이 10초 동안 변경되지 않았다면, 그 파일의 업로드가 완료된 것으로 간주합니다.
넷째 바로 이전에 체크했던 파일크기(세션)와 실제 파일크기가 같다면 그 파일의 업로드가 완료된 것으로 간주합니다.
위 네가지 경우에는 "php~" 이름을 가진 다른 최근파일을 찾아서 임시이름과 크기를 세션으로 저장합니다.
그렇지 않은 경우에는 업로드중이므로 파일크기만 검사해서 세션과 쿠키정보로 구워 놓습니다.
세션[파일크기는] 서버 정보이므로 클라이언트는 갱신할 수 없기 때문에 쿠키를 이용합니다.

▨▨ 일정한 간격으로 tmp_reader.php 실행, 쿠키정보 캐치, 업로드진행화면 갱신, 을 담당하는 progress.js 파일

function progress(Fname){ <= onSubmit="return progress('F')" 으로 호출되는 함수입니다.
    document.getElementById('ZU_div').style.display = "inline";
    document.getElementById('ZU_div').style.left = document.body.clientWidth/2 - 220;
    document.getElementById('ZU_div').style.top = 150;
   
    for (var i=0; i<document.forms[Fname].elements.length; i++) {
        if(document.forms[Fname].elements[i]["type"]=="file" && document.forms[Fname].elements[i]["value"]){
            array_FileName[i] = ZU_getFileName(document.forms[Fname].elements[i]["value"]);
            array_FileSize[i] = ZU_getFileSize(document.forms[Fname].elements[i]["value"]);
        }
    }
    var Extra_array_FileName = array_FileName;
    var Extra_array_FileSize = array_FileSize;
    array_FileName = new Array();
    array_FileSize = new Array();
    var c = 0;
    for (var i=0; i<Extra_array_FileName.length; i++) {
        if(Extra_array_FileName[i]){
            array_FileName[c] = Extra_array_FileName[i];
            array_FileSize[c] = Extra_array_FileSize[i];
            c++;
        }
    }
    window.status = "전송중";
    var StartTime = new Date();
    MicroStartTime = StartTime.getTime()/1000;
    var TakeStartTime = new Date();
    MicroTakeStartTime = TakeStartTime.getTime()/1000;
    ZU_repeat();
}

progress.js 파일은 위에서도 약간 언급했지만 핵심부분만 설명합니다. 자세한 내용은 소스파일을 열어서 살펴보세요.
위 함수는 <form name="F" ~~~~ onSubmit=progress('F')> 에서 Submit이 되면 일차적으로 호출되어지는 함수입니다.
<div id="ZU_div">업로드화면<div>을 보이게 하고 위치를 잡아줍니다.
submit 된 폼에서 타입이 file인 Element들의 "파일명"과 "파일크기"를 찾아내 배열에 담습니다.

function ZU_getFileSize(path){
    var obj = new Image();
    obj.dynsrc = path;
    return obj.fileSize;
}

파일크기를 찾는 ZU_getFileSize()함수의 소스는 당 파일의 상단에 위와 같이 정의되어 있습니다.
new Image(); 로 찾지만 이미지 파일이 아닌것도 잘 찾아집니다.
하단부에서 파일크기 배열의 내용이 없으면 비호환 브라우저로 보고 차전책인 화면을 내보냅니다.
사용자가 파일선택을 순차적으로 하지 않고 듬성듬성 한 경우를 고려해 배열을 앞쪽으로 정리합니다.
최초 업로드 시작시간, 선택파일 업로드 시작시간을 변수에 담아두고 본격적인 반복작업을 할 ZU_repeat()함수에 시동을 걸어줍니다.

function ZU_repeat(){
    document.getElementById('zudynamic').src="tmp_reader.php"; // 이미지 SRC 갱신(파일크기 검사 요청)
    ZUrepeat = setTimeout("ZU_repeat()", RepeatInterval*1000); // 반복지정
    ZU_makeProgress(getCookie('ZUfileSize')); //업로드화면을 갱신하는 함수에게 쿠키값 전달
   
    // 새로고침 비정상적인 submit의 경우에도 화면 활성
    if(last_TmpFileSize<getCookie('ZUfileSize')){
        document.getElementById('ZU_div').style.display = "inline";
    }
}

◎ 업로드 진행상황을 갱신하는 함수

function ZU_makeProgress(CookieSize){
    if(array_sum(array_FileSize)){ //파일크기를 알 수 있는 브라우저

    ~~ 전송된 파일크기, 남은 갯수, 진행율(%), 남은시간 등 표시 ~~

    }else{ //파일크기를 알 수 없는 브라우저

    ~~ 전송된 파일크기, 남은 갯수 만 표시 ~~

    }
}

ZU_makeProgress() 함수의 내용은 특징이 없는 부분이므로 설명하지 않습니다.

window.onload = function(){
    // 업로드 이미지들이 화면에 즉시 뜨도록 프리로드
    var ZUimg1 = new Image();
    ZUimg1.src = "images/progress_01.gif";
    ~~~~
    var ZUimg12 = new Image();
    ZUimg1.src = "images/progress_12.gif";

   
    //<img id="Dynamic" width="1" height="1" src="nofile"> <= 이 코드를 HTML에 넣지 않아도 되도록하는 부분
   
    spyImg = document.createElement("img");
    spyImg.setAttribute("src","tmp_read.php");
    spyImg.setAttribute("id","zudynamic");
    spyImg.setAttribute("width","1");
    spyImg.setAttribute("height","1");
    document.body.appendChild(spyImg);

   
    //<div id="ZU_div">업로드화면디자인 부분</div> <= 이 코드를 HTML에 넣지 않아도 되도록하는 부분

    progressDiv = document.createElement("div");
    progressDiv.setAttribute("id","ZU_div");
    document.body.appendChild(progressDiv);

    document.getElementById('ZU_div').style.position = "absolute";
    document.getElementById('ZU_div').style.width = "437px";
    document.getElementById('ZU_div').style.height = "200px";
    document.getElementById('ZU_div').style.zIndex = "10";
    document.getElementById('ZU_div').style.display = "none";

    document.getElementById('ZU_div').innerHTML="\
    <table width='437' height='57' cellspacing='0' cellpadding='0' border='0' background='images/progress_01.gif'>\
    ~~~~
    </table>";
}

▨▨ html에서 적용하기
상단에 <js링크>딱 한줄만 넣도록 하기위해 부족한 실력으로 많이 고생했습니다.
아마도 DOM 형식인것 같은데..
부족한 실력으로 구현하느라고 해당 코드가 필요이상으로 길고 지저분할 수 있으며,
위에 소개된 소스와 최종소스가 약간 다른부분도 있습니다. 

<html>
<head>
<meta name="generator" content="editplus">
<meta http-equiv="content-type" content="text/html; charset=euc-kr">
<script language="JavaScript" src="/zuprogress/progress.js"></script> <= 라인 추가
</head>

<body>
<form name="F" enctype="multipart/form-data" method="post" action=" ">
<input type="file" name="up1" style="width:400"><br>
<input type="file" name="up2" style="width:400"><br>
<input type="file" name="up3" style="width:400"><br>
<input type="file" name="up4" style="width:400"><br>
<input type="file" name="up5" style="width:400"><br>
<input type="submit" value="업로드"><br>
</form>
</body>
</html>

▨▨ 개선할 부분

가장 최근의 임시파일크기 정보가 사용자 임시파일 크기 정보인지 100% 신뢰할 수 없습니다.
업로드 전 로컬의 파일크기를 알아내는 getFileSize()함수가 잘못된 파일의 크기를 보고할 수 있습니다.
셀러론인 집의 피씨에선 잘보이던 업로드 배경화면이 사무실의 팬4 피씨에서는 잘 안보인 경우가 있었습니다.

다 해놓고 보니, 실무용이라기 보다는 어디로 튈지 모르는 연구용인것 처럼 느껴집니다.
실력있는 PHPER들이 부족한 부분을 보충해서 실무에도 사용할 수 있도록 공유했으면 좋겠습니다.

박명우(ziwoo) [2006-05-01 23:56:31]
설치방법 따로 없습니다. "홈디렉토리/zuprogress/" 처럼 되도록 업로드하시고.. index.html 참고하셔서 사용하면 됩니다.

박명우(ziwoo) [2006-05-02 18:04:26]
/tmp에 어떤이유로.. 오래된 php~ 파일이 지워지지 않고 있을경우. 계속 그 파일을 읽어오기 때문에 그래프가 안올라가던 버그가 있군요.. temp_reader.php를 일부 수정했습니다.

서비(211.104.253.231) [2006-05-02 19:22:47]
안녕하세요 박명우님.. 소스 잘 보았습니다. 유용하군요 ^^ 그런데.. 폼이 있는 html 파일에서 progress.js 파일의 내용을 그냥 카피해서 하면 잘 되는데 <script language="JavaScript" src="progress.js"></script> 이런식으로 불러오면 실행이 안됩니다.  물론 js 소스와 경로는 모두 같습니다. 이유를 모르겠네요. 테스트 하는 곳인데요. http://programming.thefirst.pe.kr/ajax/upload_progress/ 음.. 이상합니다. 똑같은데요. 그런데 이상한점은.. <script language="JavaScript" src="progress.js"></script> 이 부분을 <script language="JavaScript" src="http://www.ziwoo.net/zuprogress/progress.js"></script> 이렇게 박명우님의 js파일로 불러오면 되네요... 이유가 무엇을까요? 버전이 다른것인지.. 죄송한데요.. 최종버번을 압축해서 주시면 알될까요? js 파일이요. 그냥 다운받아서 해 봤는데.. 역시나 안되더라구요.. genitle@korea.com 으로 주셔도 감사하겠습니다. ^^;;;

박명우(218.155.158.82) [2006-05-02 21:42:28]
한번 더 다운 받아보세요... 혹시 제가 버그가 있는줄 모르고 업로드했을 때.. 받으셨을 수도 있으니.. 그도 아니면.. http://www.ziwoo.net/zuprogress/progress.js 을 주소창에 치셔서 다운로드..^^

손님(58.78.218.6) [2006-05-02 22:22:08]
참 멋지네요^^

박명우(ziwoo) [2006-05-03 05:18:54]
//서비 쿠키를 전혀 못 굽네요.. 제 홈피의 JS 와 비교해봤는데.. 이상이 없더군요.. 또, 제 홈피의 JS를 참조해도 결국은 그쪽서버의 temp_reader.php로 읽을건데.. 그 경우 잘되는건 이유를 모르겠습니다. 아무튼 temp_reader.php 파일을 새것으로 바꾸시거나 에서 쿠키를 못굽는 이유를 살펴보세요.. 아니면 처음부터 다시해보세요..

박명우(ziwoo) [2006-05-03 07:15:14]
IE에서 캐쉬설정을 "페이지를 열때마다"로 설정된 경우, 일부 회선이 느린 피씨에서 그래프 화면이 안보이는 경우가 있어 수정했습니다. 수정시간 : 2006-05-03 05:30:00 js 파일을 다시 받으세요.

Try(210.111.239.18) [2006-05-03 16:19:47]
제로 보드에서 테스트해 보았습니다. 그런데, 호스팅 서비스 받고 있는 계정에 올릴 경우, zuprogress디렉토리 아래에 /tmp 디렉토리를 만들어 주어야 하는 건가요? 파일 크기나 남은 시간등등이 엉뚱한 문자들이 찍혀 나와서 어떻게 사용해야 할지 잘 모르겠습니다. 그래프도 아래쪽 그래프는 표시되어 나오는데 위쪽 그래프는 안나타나고요.

박명우(61.75.128.58) [2006-05-03 18:53:49]
/tmp 는 리눅스 서버의 고유 폴더입니다. 제로보드가 독자적으로 다른 임시폴더를 사용하는지는 모르겠지만.. 아무튼 /tmp는 서버상의 절대경로이므로 따로 만들필요가 없습니다. 호스팅업체가 /tmp 대신 다른 업로드폴더를 설정한 경우, 그에 맞게 temp_reader.php 를 수정하면 됩니다.

서비(211.104.253.231) [2006-05-04 17:13:33]
// 방명우 ^^ 다른 서버에서 테스트 하니 잘되더라구요. 결국 제가 서비스받는 서버에서 js 파일을 src="" 로 하면 에러가 나더라구요. 설정에서 그렇게된것 같습니다. ㅡㅡ;; 암튼 감사합니다. ^^

윤재병(58.140.17.64) [2006-05-06 23:48:12]
정말 유용한 프로그램인거 같습니다. 액티브엑스 안쓰는게 좋아요.. 제가 사용해보니 파일 업로드중에 /tmp 폴더에 파일이 생기고 마지막파일의 업로드가 완료되면 바로 지워지더군요. 업로드된 /tmp 폴더내의 파일이 다른 경로에 옮기는 것은 따로 사용자가 만들어줘야 하나요? /zuprogress 폴더에 업로드되는줄로 생각했는데 아닌가 봅니다.

박명우(218.155.158.82) [2006-05-07 21:41:32]
//윤재병 zuprogress는 말 그대로 업로드의 진행상태를 보여줄 뿐입니다. /tmp 폴더는 서버에 업로드할때 기본적으로 저장될 공간을 서버에서 설정한것압니다. 서버설정이 /tmp가 아닌 다른 폴더로 설정되어 있다면 압축파일중 temp_reader.php의 내용중 /tmp라고 된 부분을 적절하게 고쳐주면 됩니다. 혹시 업로드 후 그 파일을 처리하는것에 관한 질문이라면.. 그것은 zuprogress하고는 무관하며, 다른 문서를 참조해보시거나, 본 홈피에서 공개한 ziwoo board 게시판의 파일처리부분을 참고하시기 바랍니다.

윤재병(58.140.22.116) [2006-05-07 23:00:45]
친절하고 빠른 답변 감사드립니다. 본 프로그램의 취지를 제가 잘 이해하지 못했습니다. 좋은 프로그램 공개해주셔서 감사드립니다. ^^ 건강하세요.

북사랑(211.209.158.10) [2006-05-08 17:46:20]
잘쓰고 있습니다... write페이지에 셀렉트바가 있는데 레이어를 뚫고 올라오네요... 어떻게 해결은 하겠지만 혹시나 해서 포스팅합니다... 버그는 아닙니다...

박명우(ziwoo) [2006-05-08 18:22:10]
//북사랑 포스팅 감사합니다. 셀렉트를 hidden으로 숨기는 방법외에 다른 꽁수가 있으면 저도 좀 가르쳐 주십시요. 가끔씩 그것 때문에 속터질 때가 있습니다.

북사랑(211.209.158.10) [2006-05-08 18:42:35]
저도 select를 hidden으로 숨기는 방법으로 구현을 했었는데... 범용 모듈에서 쓰기에는 그렇겠네요... 중간에 걸쳐지는 셀렉트라 완전히 숨기는 것도 어색하구요.... 프로그래스 바가 아닌 건 아이프레임으로 해결한 적도 있지만 이경우는 그것도 아닌 것 같고... 저도 만들어주신 프로그램 분석도 어려운터라^^ 어쨌든 고맙게 잘 쓰고 있습니다... 해결방법은 개선방향에 추가해두심 다른 고수분께서 도움을 주실 지도... 도움이 못되어서 죄송합니다ㅜㅜ

박명우(220.78.115.132) [2006-05-09 14:19:44]
이전에 지워지지 않은 임시파일이 두개이상일경우 에러가 있어서. temp_reader.php의 6번라인을         if($_SESSION["upfile"]["tmp_name"] != $tmp_files[$i] && time()-filemtime($tmp_files[$i])<5){ 로 수정했습니다.

이상국(203.229.155.61) [2006-05-12 08:11:13]
w2k(IIS), php,mysql 에서 돌려보려고 하는데여.. /tmp 설정을 어케 해 주어야 되는지요?... windows에서는 안 되는 건가요? --;;;

박명우(ziwoo) [2006-05-12 12:23:34]
IIS에서라면.. DEXT업로드 같은 쓸만한 유료 업로드 컴퍼넌트가 많습니다.. 안정적인 유료 컴퍼넌트를 생각해보시고요.. 꼭 쓰시려면 /tmp 대신에 윈도우 서버가 할당한 임시저장소가 있을겁니다. php 설치시에 지정하셨을테고.. php.ini 에도 upload_tmp_dir = "머머머" 라고 정의 되어 있을겁니다. temp_reader.php 에서 그 부분만 바꿔주면 될것 같습니다.

P(61.73.51.175) [2006-05-26 13:50:17]
굿입니다. 생각의 차이가 역시 기술의 차이군요 멋집니다

차찾사(210.181.70.249) [2006-05-26 16:59:48]
-_-a 미치겠습니다 ㅜ.ㅡ 하는데 자꾸 않되는겁니다;; 왜 않되나 무진장 찾았는데...원인이... 제 폼에서 <form name="board_form" enctype="multipart/form-data" method="post" id="board_form" action="test.php" style="margin:0px;" onSubmit="return checkForm(this);"> 이부분에  onSubmit="return checkForm(this);" <- 이거 때문에 않됩니다. 왜않되는지 고민하고 여러가지 해보던중... 자바.js 를 불러오면... 폼체킹이 않되는것을 알게되어서 function checkForm(theForm) { } 이부분을 없애봤는데도 마찮가지더군요... 그래서  onSubmit="return checkForm(this);"  이걸 삭제했더니 당연히 폼 체킹은 않되지만 프로그레스는 되네요... 혹시 프로그레스.js 파일에 checkForm 함수가 있나봤더니 없고 잘몰라서 그러는데 -_-a 왜 않되는지 짐작가는부분있으면 알려주세요

차찾사(210.181.70.249) [2006-05-26 17:16:42]
위에 질문;; 추가로 둘다 있으면 둘다 않됩니다. 체킹이라던지 프로그레스 바 전송중화면이라던지..둘다 않되고요.. <script language="JavaScript" src="../zuprogress/progress.js"></script> 이게없으면 체킹이 됩니다. 폼부분에 onSubmit="return checkForm(this);" 이게 없으면 전송화면이 보입니다.. 체킹은 당연히 않되겠죠... 그리고 둘다 있을시에 체킹도 않되고 전송화면도 않나오지만 전송은 됩니다. 밑에 자바 에러시 나오는 !(느낌표) 가 나오는데.. 체킹도 않되면서.. 내용이 name.value== 널이거나 객체가 아니랍니다.. 그렇다면 theForm이 인식이 않된다는건데.... function checkForm(theForm) {     if (theForm.name.value=="") {         alert("이름을 입력하세요.");         theForm.name.focus();         return false;     } } &#50788;까요 -_-a 제가 잘몰라서;;

박명우(218.155.158.82) [2006-05-26 22:26:22]
본문의 간단테스트 URL http://www.ziwoo.net/zuprogress/index.html 을 참고해보세요. 차찾사님 같은 경우를 대비해서 일부러 old_checkform() 이라는 함수를 적용해 놓은것입니다.     //onSubmit="progress('폼네임')" <= 이 문장을 생략하기 위한 부분 A 시작     var FormObj = document.getElementsByTagName('form');     for (var len=0;len<FormObj.length;len++){         if(FormObj[len].getAttribute("onsubmit")){             var already_onsubmit = String(FormObj[len].getAttribute("onsubmit")).replace(/^function anonymous\(\)|{|}|return |\n/g,'');             FormObj[len].onsubmit=new Function("return progress('"+FormObj[len].getAttribute("name")+"','"+already_onsubmit+"');");         }else{             FormObj[len].onsubmit = new Function("return progress('"+FormObj[len].getAttribute("name")+"');");         }     } progress.js 41~50번 라인이 기존의 리턴함수를 인식하는 부분이고요..     var argv = progress.arguments;     if(argv[1]){         result = eval(argv[1]);         if(result==false) return false;     } 222~226 번 라인은 기존 함수를 호출해보고 에러가 나면 false 를 리턴하는 부분입니다.

박명우(218.155.158.82) [2006-05-26 22:35:58]
질문을 다시 읽어보니... (thisForm) 이 문제군요.. 위에 답변드린대로.. 기존의 서브밋 액션을 가로채오는겁니다. 그 과정에서 "this"라는 것은 뜻하지 않은 대상을 자신으로 인식하게 하는거네요.. 기존 함수에서 this를 빼고 함수내에 this의 대상을 명명해서 돌아가도록 수정해주세요.. 기존섭밋에 (디스) 를 넣은것은 미리 예상 못했었는데.. 감사합니다. 아~ 위에 설명한 라인들은 지우고.. onsubmit="펑션1(); Progress();" 형식으로 사용해도 될겁니다.

박명우(ziwoo) [2006-05-26 22:47:53]

기존의 섭밋액션과 그 섭밋액션이 포함하는 thisForm의 주체가 누구인지까지 정확히 알아낼 수 있는 더 세련된 방법이 있는지 모르겠습니다만.. 그것을 알게되면 업그레이드 해야겠네요... ^^ onsubmit="return 펑션1(); return progress('폼네임');" <= 이게 되는지는 잘 기억이 안납니다.. 혹시 안되면 펑션1(){~~} 안에서 기존의 폼체크를 다 하신 후에 progress()를 호출하도록 고쳐보세요.

출처 : Tong - ddakzzi님의 PHP통