그누보드 QA - jquery ajax로 파일 업로드를 포함한 폼전송에 관련 문의 입니다.

jquery ajax로 파일 업로드를 포함한 폼전송에 관련 문의 입니다.

Rido 홈페이지 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

홈페이지 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2019.02.28 13:15:08 3932 (115.♡.♡.82)

답변 4

본문

해당건에 관련해서 검색을 해봐도 딱히 해결이 되지 않아서 이렇게 문의 드립니다.

일단 ajax로 파일을 전송하면

$_FILES 변수로 값을 전송받지 못합니다.

해서

var_dump를 이용해서 $_POST를 찍어보면

array(62) { ["------WebKitFormBoundaryJV7IKSBR1miFExr2 Content-Disposition:_form-data;_name"]=> string(1551) "\"thesisfile\"; filename=\"51148752_2171435046506240_9156457339736293376_n.jpg\" Content-Type: image/jpeg

이런 형태로 배열을 가지고 가긴 합니다.

해당 배열을 값만 다시 배열화 해서 받는 방법이나

ajax형태로 전송했을때 일반적인 $_POST['인자값'] 형태로 변환하는 방법을 알고 싶습니다.

고수님들의 도움이 필요합니다 ㅠㅠ

#ajax #jquery #파일전송

답변 4

볼피드 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

2019-02-28 13:26:34 221.♡.♡.87

file을 ajax로 전송하실때는 formdata 객체 생성하여 가는 방식으로 해야 합니다.

아래는 제가 만들다 만 그누보드 플러그인 소스 중 하나인데


function dfwrite_submit(name)
{
    form =  document.forms[name];
    formData = new FormData(document.getElementById(name));
    var uploadFileList = Object.keys(fileList);
    for(var i = 0; i < uploadFileList.length; i++){
        formData.append('bf_file['+i+']', fileList[uploadFileList[i]], fileList[uploadFileList[i]].name);
    }
    var myRequest = new XMLHttpRequest();
    myRequest.onreadystatechange = function(){
     if(myRequest.readyState == 4 && myRequest.status == 200){
      //location.href=myRequest.responseURL;
      console.log(myRequest.responseText);
     }
    };
    
    if(form.onsubmit())
    {
        var f = form;
        if (typeof(f.bo_table) == "undefined") {
            return;
        }
        var bo_table = f.bo_table.value;
        var token = get_write_token(bo_table);
        if(!token) {
            alert("토큰 정보가 올바르지 않습니다.");
            return false;
        }
        formData.append('token', token);
        myRequest.open('post', '<?php echo $action_url?>',true);
        myRequest.send(formData);
    }
}

파일의 경우 사용자가 업로드를 선택 하면 복사나 삭제는 가능해도 수정은 불가능한 객체라서

저런식으로 ajax로 전송하셔야 합니다