Ajax XMLHttpRequest 파일 업로드 시 \'No Multipart Boundary\' 오류를 해결하는 방법은 무엇입니까?

Ajax XMLHttpRequest를 사용하여 파일 업로드: "멀티파트 경계 없음" 오류 해결

XMLHttpRequest를 사용하여 파일을 업로드하려고 하면 다음과 같은 문제가 발생할 수 있습니다. "다중 부분 경계를 찾을 수 없기 때문에 요청이 거부되었습니다" 오류. 이 문제를 해결하려면 제공된 코드를 자세히 살펴보고 잠재적인 원인을 식별해 보겠습니다.

다음 코드 조각은 XMLHttpRequest를 사용하여 파일을 업로드하기 위한 것입니다.

<code class="javascript">var url = "http://localhost:80/...";
$(document).ready(function(){
    document.getElementById('upload').addEventListener('change', function(e) {
        var file = this.files[0];
        var xhr = new XMLHttpRequest();
        // xhr.file = file; // not necessary if you create scopes like this
        xhr.addEventListener('progress', function(e) {
            var done = e.position || e.loaded, total = e.totalSize || e.total;
            console.log('xhr progress: ' + (Math.floor(done/total*1000)/10) + '%');
        }, false);
        if ( xhr.upload ) {
            xhr.upload.onprogress = function(e) {
                var done = e.position || e.loaded, total = e.totalSize || e.total;
                console.log('xhr.upload progress: ' + done + ' / ' + total + ' = ' + (Math.floor(done/total*1000)/10) + '%');
            };
        }
        xhr.onreadystatechange = function(e) {
            if ( 4 == this.readyState ) {
                console.log(['xhr upload complete', e]);
            }
        };
        xhr.open('post', url, true);
        xhr.setRequestHeader("Content-Type", "multipart/form-data");
        xhr.send(file);
    }, false);
});</code>

앞서 언급한 오류를 해결하려면 , 두 가지 핵심 사항을 해결해야 합니다:

1. xhr.file = file; 중복되고 불필요합니다. 이런 방식으로 파일 개체를 첨부할 필요는 없습니다.
2. 실제 문제는 xhr.send(file) 줄에 있습니다. 파일을 올바르게 업로드하려면 파일을 Multipart/form-data POST 데이터 개체로 형식화하는 FormData 개체로 래핑해야 합니다. 업데이트된 코드는 다음과 같습니다.

<code class="javascript">...
var formData = new FormData();
formData.append("thefile", file);
xhr.send(formData);
...</code>

FormData 객체를 생성하고 파일을 추가하면 데이터가 올바르게 구조화되어 서버에서 처리될 준비가 되었는지 확인할 수 있습니다. 이제 $_FILES['thefile'](서버 측에서 PHP를 사용하는 경우)에서 파일에 액세스할 수 있으므로 적절하게 처리할 수 있습니다.

MDC 및 Mozilla 데모와 같은 문서 리소스 참조 이러한 문제에 직면했을 때 귀중한 지침을 제공할 수 있습니다.

위 내용은 Ajax XMLHttpRequest 파일 업로드 시 \'No Multipart Boundary\' 오류를 해결하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!