[HTML] IE8 에서 ajax 업로드 처리 방법

요즘은 html5의 기능인 FormData를 활용하여 ajax 업로드를 구현할 수 있다.

하지만 IE8 같은 브라우저를 사용한다면 FormData는 undefined -_-; (IE10 이상부터 사용가능) 난감하다

그래서 아래 소스를 참조하여 구현하니 잘 된다. 만들어 주신분께 감사.

로직은 동적으로 iframe을 만들고 해당 페이지에서 submit을 하는 것

출처 : http://onicodeline.blogspot.kr/2013/06/replace-jquery-formdata-for-file-upload.html

function fileUpload(form, action_url, div_id) {

    // Create the iframe...

    var iframe = document.createElement("iframe");

    iframe.setAttribute("id", "upload_iframe");

    iframe.setAttribute("name", "upload_iframe");

    iframe.setAttribute("style", "border: none;display: none;");

 

 

    // Add to document...

    form.append(iframe);

    window.frames['upload_iframe'].name = "upload_iframe";

 

    iframeId = document.getElementById("upload_iframe");

 

    // Add event...

    var eventHandler = function () {

 

            if (iframeId.detachEvent) iframeId.detachEvent("onload", eventHandler);

            else iframeId.removeEventListener("load", eventHandler, false);

            // Message from server...

            if (iframeId.contentDocument) {

                content = iframeId.contentDocument.body.innerHTML;

            } else if (iframeId.contentWindow) {

                content = iframeId.contentWindow.document.body.innerHTML;

            } else if (iframeId.document) {

                content = iframeId.document.body.innerHTML;

            }

 

            //getting the response from server 

           content = content.replace("","").replace("","");

          alert(content);

        }

 

    if (iframeId.addEventListener) iframeId.addEventListener("load",eventHandler,true);

    if (iframeId.attachEvent) iframeId.attachEvent("onload", eventHandler);

 

    // Set properties of form...

    form.attr("target", "upload_iframe");

    form.attr("action", action_url);

    form.attr("method", "post");

    form.attr("enctype", "multipart/form-data");

    form.attr("encoding", "multipart/form-data");

 

    

    form.submit();// Submit the form...

 

}