6

私は単純なファイルフィールドを作りました:

<input type="file" name="pictures_array[]" multiple accept="image/*" id="page_pictures_array" />

ファイルを一覧表示する HTML5 ファイル API コード:

$('.page-form #page_pictures_array').change(function(evt) {
      var file, files, reader, _i, _len;
      files = evt.target.files;
      console.log(files);
      $('#file-list').empty();
      for (_i = 0, _len = files.length; _i < _len; _i++) {
        file = files[_i];
        reader = new window.FileReader;
        reader.onload = (function(file) {
          return function(e) {
            var src;
            src = e.target.result;
            return $("<li>" + file.name + " - " + file.size + " bytes</li>").prepend($('<img/>', {
              src: src,
              "class": 'thumb'
            })).appendTo($('#file-list'));
          };
        })(file);
        reader.readAsDataURL(file);
      }
    });

（こちら参照）

しかし、私はユーザーが非常に愚かであることを期待しているので、1 つのファイルを選択してから、もう一度アップロード フィールドをクリックして次のファイルを選択すると確信しています。ただし、 のリストは<input type="file">、新しく選択されたイメージで毎回リセットされます。

新しいファイルが の配列に追加されていることを確認して<input>、怒っているユーザーのコメントが殺到しないようにするにはどうすればよいですか?

4

1 に答える 1

8

私はこれに対する答えも探しています。他の人はすでにそうしていると思います。しかし、ファイルリスト W3 リファレンスhttp://www.w3.org/TR/FileAPI/#dfn-filelistを見ると、読み取り専用と表示されています....

編集：コピー/貼り付けを困難にするのは、いくつかの改善を加えた大きなコードです。しかし、すべての tmp ファイルを保存する変数を 1 つ作成し始めました。

var tmp_files = new Array();

次に、新しいファイルを追加すると、次のようにファイルをその配列にプッシュします

tmp_files.push(file);

ユーザーがクリックしてファイルを送信すると、すべての挿入/削除（削除を保存するための別の変数があります）の後、必要なファイルでフォームデータを作成するこのコードがあります

var data = new FormData(); var count = 0;
$.each(tmp_files, function(i, file){
    if(del_files.indexOf(file.name)== -1){
        data.append(count, file);
        count++;
    }
});

次に、var データを ajax 経由で送信して保存します。$data = $_FILES; を使用して取得できます。

これがお役に立てば幸いです。

于 2014-01-28T12:42:54.127 に答える