XMLHttpRequest가 파일을 보내지 않습니다.

Question

XMLHttpRequest를 통해 파일을 업로드하고 싶습니다. 나는 어디에서나 예제를 찾아 보았고 꽤 많은 것을 발견했다. 그러나 내가 잘못하고있는 것이 무엇인지 알 수 없습니다. 이것은 내 코드입니다. 이 기능은 버튼을 누르면 트리거됩니다. 태그에서 감싸지 않았습니다.

function upl_kost() { 
var url = "proces_data.php?ref=upload_kost"; 
var hr; 
var file = document.getElementById("file_kost"); 
var formData = new FormData(); 

formData.append("upload", file.files[0]); 

if (window.XMLHttpRequest) { 
    hr=new XMLHttpRequest(); 
    } else { 
    hr=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
hr.open("POST", url, true); 

hr.setRequestHeader("Content-type", "multipart/form-data"); 

hr.onreadystatechange = function() { 
    if(hr.readyState == 4 && hr.status == 200) { 
     var return_data = hr.responseText; 
     alert(return_data); 
    } 
} 
hr.send(formData); 
} 

이 기능은이 기능을 포착합니다.

if($_GET['ref'] == 'upload_kost') { 
var_dump($_FILES); 
} 

내 문제는 $ _FILES가 비어있는 것입니다. js에서 file.files 변수를 볼 때 업로드하려고하는 파일의 데이터가로드됩니다.

감사합니다.

Answer 1

이 필요한 최소 아래로 당신의 자바 스크립트을 줄이고, 당신은 여전히 ​​문제가 발생하는 경우, 그것은 서버 - 수 있습니다 당신이

function upl_kost() { 
    var xhr = new XMLHttpRequest(), 
     url = 'proces_data.php?ref=upload_kost', 
     fd = new FormData(), 
     elm = document.getElementById('file_kost'); 

    // debug <input> 
    if (!elm) 
     console.warn('Element not found'); 
    else if (!(elm instanceof HTMLInputElement)) 
     console.warn('Element not an <input>'); 
    else if (!elm.files || elm.files.length === 0) 
     console.warn('<input> has no files'); 
    else 
     console.info('<input> looks okay'); 
    // end debug <input> 

    fd.append('upload', elm.files[0]); 

    xhr.addEventListener('load', function() { 
     console.log('Response:', this.responseText); 
    }); 

    xhr.open('POST', url); 
    xhr.send(fd); 
} 

에 대한 귀하의 콘솔에서 볼 수있는 몇 가지 유용한 메시지에 추가 측면, 예. $_FILES에 액세스하기 전에 리디렉션을 수행하고 있습니까?

Answer 2

귀하의 문제는 당신이 요청의 내용 유형을 설정하는 것입니다 당신이 이제까지 여러 부분을 본 경우

hr.setRequestHeader("Content-type", "multipart/form-data"); 

/당신은 콘텐츠 형식 헤더의 경계를 가지고 알 수 있습니다 게시 formdata

Content-Type: multipart/form-data; boundary=----webko2354645675756 

코드에서 누락되었습니다.
콘텐츠 형식 헤더를 설정하지 않으면 브라우저가 해당 콘텐츠 형식 헤더를 올바르게 설정하고 필요한 경계를 설정합니다. 이렇게하면 서버가 요청 본문을 올바르게 구문 분석 할 수 있습니다.