2013년 2월 27일 수요일

jQuery FileUpload DELETE method 변경

파일업로드페이지에서 삭제를 클릭해도 목록에서만 사라질 뿐 실제 이미지가 삭제되지 않는  문제가 있다.

jQuery FileUpload plugin은 Action 페이지를 호출할때 PUT, DELETE 등의 Method를 사용하여 처리하도록 되어있는데 IIS6 버전에서는 WebDAV라는 옵션이 기본적으로 금지되어 있어서 HTTP 501 오류가 난다.
WebDAV를 허용하고 테스트를 해 봐도 HTTP 403 쓰기권한이 없다고 나온다.
쓰기권한을 줄경우 서버폴더가 삭제되어버리는 사태가 생겼다.
보안위험을 무릅쓰고 이런 처리를 하는것 보다 안전한 Method로 변경하여 처리하도록 바꿔보았다.

js/jquery.fileupload-ui.js 파일의 destroy 트리거 부분을 수정했다.

// Callback for file deletion:
destroy: function (e, data) {
    var that = $(this).data('blueimp-fileupload') ||
        $(this).data('fileupload');
    if (data.url) {
        if(data.type=="DELETE")
        {
            // IIS에서 DELETE METHOD가 보안강화로 인하여 막혀있음
            data.type = "GET";
            data.url += "&do=del";
        }
        $.ajax(data);
        that._adjustMaxNumberOfFiles(1);
    }
    that._transition(data.context).done(
        function () {
            $(this).remove();
            that._trigger('destroyed', e, data);
        }
    );
}

서버 Action Class인 server/php/UploadHandler.php도 수정했다.

protected function initialize() {
    switch ($_SERVER['REQUEST_METHOD']) {
        case 'OPTIONS':
        case 'HEAD':
            $this->head();
            break;
        case 'GET':
            if(isset($_GET['do']) && $_GET['do']=="del")
                $this->delete();
            else
                $this->get();
            break;
        case 'PATCH':
        case 'PUT':
        case 'POST':
            $this->post();
            break;
        case 'DELETE':
            $this->delete();
            break;
        default:
            $this->header('HTTP/1.1 405 Method Not Allowed');
    }
}

이제 Method를 GET으로 보내고 문제없이 처리가 된다.

2013년 2월 15일 금요일

jQuery File Upload image upload error 해결

작은 이미지들은 업로드가 잘 되는데
큰 이미지는 업로드 하면 오류가 납니다.
스마트폰으로 촬영한 사진을 원본 그대로 업로드 하려니 오류가 납니다.
업로드는 되어 있는데 섬네일이 나타나지 않습니다.

문제는 섬네일이 제대로 안만들어져서 그런것 같습니다.

php.ini 의 memory_limit = 16M 부분을

memory_limit = 64M 이렇게 바꿔주고 나니 잘 됩니다.

2013년 2월 14일 목요일

jQuery File Upload IE에서 오류 문제 (SyntaxError : Invalid Character)

jQuery File Upload를 테스트 하는 도중 문제가 생겼습니다.

Crome이나 Safari 계열의 브라우저에서는 문제없이 업로드가 잘 되는데 반해
IE나 Opera에서는 업로드 후 오류가 납니다.

새로고침 해보면 업로드는 되어 있습니다.

서버 폴더에 /test/jsupload 라는 폴더 아래에 Upload관련 file들을 넣었습니다.
/test/ 폴더에 테스트 페이지와 jsupload내에 있는 server 폴더를 복사해 넣어주었습니다.

/test/jsupload 폴더의 내용입니다.


IE에서 업로드를 하면 다음과 같은 오류가 납니다. (IE9)




어제 하루종일 고민을 하다 어제밤에 뭔가 생각나는게 있어서
오늘 해결하였습니다.




/test/jsupload/js/jquery.iframe-transport.js 파일의 87 라인 아래를 검사해 봤습니다.

alert(response[0].lastChild.document.body.innerHTML);






이런 결과가 나왔네요.



다시 문구를 바꿔 봤습니다.






페이지 주소는 http://aaa.yyy.com/test/cors/result.html?............................
이렇게 나옵니다.

그래서 /test/jsupload/cors 폴더를 복사해서 상위 dir에 넣어줬습니다.







이제 잘 작동하네요.

Opera에서는 JSON 파서 에러가 납니다.
흠... 이건 좀 더 연구해 봐야 할것 같아요.

브라우저에 따라 jQuery 가 작동하는것이 조금 다를수 있답니다.
여튼 가장 많이 쓰는 IE에서는 해결이 됐으니 일단, 실사용모드로 진행해 봐야 겠네요.

위의 페이지는 Naver SmartEditor와 같이 붙여놓은 것입니다.
jQuery Upload Plugin을 사용할때 크기지정은 CSS를 한번 더 설정해 주는 것으로 해결했습니다.



jQuery File Upload Plugin 소개

작년에는 swfUpload를 사용하여 업로드를 구현하였습니다.
ActiveX의 제한에서 벗어남과 동시에 Multi-Upload, 크로스브라우저등의 편의를 위해서였지요.

그런데,

모바일 브라우저에서는 Flash를 지원하지 않기 때문에 불편했었습니다.
그래서.. javascript를 사용하여 하나 만들려고 생각을 하고
딱.. 기본 틀을 잡고 보니 jQuery File Upload 라는것을 발견하게 되었습니다.

안드로이드, 아이패드 모두 잘 되는군요.


데모를 다운받아보면 server/php/ 폴더에 업로드를 실제 처리하는 부분이 있습니다.

업로드 된 파일들은 server/php/files 폴더에 들어가네요.

swfUpload 처럼 DB와 연결되어 처리 할 수 있도록 해야겠습니다.


jQuery File Upload plugin은 다음 주소에서 구하실수 있습니다.



http://blueimp.github.com/jQuery-File-Upload/