web-dev-qa-db-ja.com

Ajax XmlHttpRequestでファイルをアップロードする

こんにちは私はこのコードでxmlhttprequestでファイルを送信しようとしています。

<script>
    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);
    });
</script>

しかし、私はこのエラーを受け取りました：マルチパート境界が見つからなかったため、要求は拒否されましたpls ..

javascriptajaxjqueryfile-uploadxmlhttprequest
54
Sedat Başar
  1. _xhr.file = file;_のようなものはありません。ファイルオブジェクトはこの方法で添付されることは想定されていません。

  2. xhr.send(file)はファイルを送信しません。 FormDataオブジェクトを使用して、ファイルを_multipart/form-data_ポストデータオブジェクトにラップする必要があります。

    _var formData = new FormData();
formData.append("thefile", file);
xhr.send(formData);
_

その後、ファイルは_$_FILES['thefile']_でアクセスできます（PHPを使用している場合）。

[〜＃〜] mdc [〜＃〜] と Mozilla Hack demos は親友です。

[〜＃〜] edit [〜＃〜]：上記の（2）は間違っていました。ファイルは送信しますが、未加工の投稿データとして送信します。つまり、サーバー上で自分で解析する必要があります（サーバーの構成によっては不可能な場合がよくあります）。生の投稿データを取得する方法については、PHP here をご覧ください。

92
timdream