0

私は自分の Web サイト用のカスタム アップロード コントロールを作成するという勇敢な使命を負っています。コントロールは、最新の HTML5 機能 (利用可能な場合) を利用して、クライアント側の画像プレビュー、リアルタイムのアップロード進行状況情報などをすべて Flash を使用せずに提供します。

これにより、開発 URL を一時的に開きます: 削除されました

開発の初期段階にあることに注意してください。Firefox と Chrome の最近のバージョンでのみ動作します。1 つまたは複数の JPEG ファイルを選択すると、画像のプレビューとアップロードの進行状況インジケーターが表示されます。

バックエンドでは、Code Igniter を使用しています。今のところ、アップロード フォームのポスト リクエストをこの非常に単純なコントローラーに接続しました。

function uploadhtml5post() {
   var_dump($_FILES);
   echo "1!";
}

このサーバー側の応答は、クライアント側の console.log に書き込まれるため、応答を確認するには、ブラウザーでコンソールを開きます。正しい入力の例は次のようになります (単一ファイルの場合):

array(1) {
  ["userfile"]=>
  array(5) {
    ["name"]=>
    array(1) {
      [0]=>
      string(12) "DSC_1160.jpg"
    }
    ["type"]=>
    array(1) {
      [0]=>
      string(10) "image/jpeg"
    }
    ["tmp_name"]=>
    array(1) {
      [0]=>
      string(14) "/tmp/phpNtZTMk"
    }
    ["error"]=>
    array(1) {
      [0]=>
      int(0)
    }
    ["size"]=>
    array(1) {
      [0]=>
      int(8435493)
    }
  }
}
1!

この正しい出力は、ファイルがサーバー側で正しく受信され、さらに処理するためにファイルにアクセスできることを示しています。私の問題は次のとおりです。単一の画像をアップロードする場合、このサーバー側の出力は正しいものです。2 つの画像をアップロードする場合 (2 つを同時に選択する場合) も正しいです。ただし、アップロードする画像を 3 つ以上選択すると、バラバラになります。サーバー側の出力は正しくなくなり、3 つの個別のリクエストすべてで $_FILES 配列が空になります。

私のアップロード フォームは次のようにシンプルです。

<form action="<?= $this->basepath ?>uploadhtml5post" method="post" accept-charset="UTF-8" id="frmUpload" enctype="multipart/form-data">

<fieldset class="vertical">
<input type="file" name="userfile[]" id="userfile" size="20" multiple="multiple" accept="image/jpeg" onchange="processImages();" />
</fieldset>

</form>

ご覧のとおり、enctype とファイル入力コントロールの名前が正しく設定されています。「userfile」と「userfile[]」のどちらを使用しても問題はないようです。問題はどちらの場合も同じです。

私のJavascriptに関しては、今はやや面倒ですが、その本質は次のとおりです。

function uploadFile(f,id) {
    var fd = new FormData(document.getElementById('frmUpload'));
    fd.append("fileToUpload", f.name);
    var xhr = new XMLHttpRequest();
    xhr.upload.id = id;
    xhr.id = id;
    xhr.upload.addEventListener("progress", uploadProgress, false);
    xhr.addEventListener("load", uploadComplete, false);
    xhr.addEventListener("error", uploadFailed, false);
    xhr.addEventListener("abort", uploadCanceled, false);
    xhr.open("POST", "./uploadhtml5post");

    updateCaption(id, "<em class=\"icon-signal\"></em> Uploading...");

    xhr.send(fd);
}

ご覧のとおり、カスタム投稿リクエストが組み立てられてから起動されます。一度に 1 つまたは 2 つの画像に対しては、すべて正常に機能します。POST URL は正しく、サーバー上の $_FILES は正しいです。3 つの画像を選択した場合のみ、3 つの個別のリクエストすべてで失敗します。

他の質問から、書き換えルールが $_FILES 配列を空にする可能性があることを知りました。私はそれらを使用していますが、投稿がまったく機能しないため、それらが原因ではないと思います。$_FILES は、3 つの投稿リクエストを発行する場合にのみ空になります。

これは私にとってかなりの謎です、何か考えはありますか？

4

1 に答える 1

0

質問を説明すると答えがわかると言われていますが、これもその一つです。これは、FormData の正しいコードである必要があります。

var fd = new FormData();
fd.append("userfile", document.getElementById('userfile').files[id]);

選択したファイルを間違って投稿リクエストにリンクしていました。投稿リクエストを詳しく調べたところ、userfile パラメータが 2 回設定されていることがわかりました。そもそもそれがいくらか機能したのは、完全に偶然だったと思います。現在、デモ リンクを削除しています。

于 2013-10-11T11:18:48.880 に答える