如何解決 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) 行。若要正確上傳文件，需要將其包裝在 FormData 物件中，該物件會將其格式化為 multipart/form-data POST 資料物件。更新後的程式碼應如下所示：

<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中文網其他相關文章！