Ajax XMLHttpRequest ファイルのアップロードでの「マルチパート境界がありません」エラーを解決するにはどうすればよいですか?

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>

前述のエラーを解決するには、次の 2 つの重要な点に対処する必要があります。

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 ファイルのアップロードでの「マルチパート境界がありません」エラーを解決するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。