[javascript] 画像選択時に定されたFileListオブジェクトから、特定のkeyを消す

フォームより画像を複数選択して、submit前に画像のプレビューを表示させるコードを書きに書きました。また各画像のプレビューには、削除ボタンをつけて、クリックすればjQueryで、消えるようにしています。また、消えた部分の画像は非表示になっているだけなので、FileListオブジオェクとの中には、まだ残っているので、こちらもクリック時に消したいと思うのですが、FileListオブジェクトのなかから、指定したkeyのデータを削除したいのですが、うまくいきません。どのように書くのがよいでしょうか?

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title></title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>

<style>
  .thumb {
    height: 75px;
    border: 1px solid #000;
    margin: 10px 5px 0 0;
  }
</style>

<form id='form' action="data.php" method="post" enctype="multipart/form-data">
<input type="file" id="files" name="files[]" multiple />
<button class="show">ボタン</button>
</form>


<output id="list"></output>

<script>

  $('output').on('click','.del',function(){
    var id = $(this).prev().attr('id');
    id = id.split("_");
         id[1];

    //alert(id);
/* この部分がどう書けばFileListから消えるのかがわかりません。
    if(id[1] in FileList) {
    delete FileList[id[1]];
         }
*/
    $(this).parent().replaceWith();
  });



  function handleFileSelect(evt) {
    var files = evt.target.files;

    for (var i = 0, f; f = files[i]; i++) {

      if (!f.type.match('image.*')) {
        continue;
      }

      var reader = new FileReader();

      reader.onload = (function(theFile, num) {
        return function(e) {
          var span = document.createElement('span');
          span.innerHTML = ['<div class="view"><img id ="img_' + num + ' " class="thumb" src="', e.target.result,
                            '" title="', escape(theFile.name), '"/><div class="del">×</div></div>'].join('');
          document.getElementById('list').insertBefore(span, null);
        };
      })(f, i);

      reader.readAsDataURL(f);
    }
      console.log(files);
  }

  document.getElementById('files').addEventListener('change', handleFileSelect, false);



</script>

</body>
</html>

kei344

2017/07/22 10:55

https://teratail.com/questions/85243 こちらの内容と同じでは？新たに質問するのではなくもとの質問を編集されてはいかがでしょう。

xjaPANDA

2017/07/22 11:58

ご指摘ありがとうございます。こちらの質問は、画像選択時に、選択するさいに、制限が可能かどうかについてなので、異なります。一方、こちらの質問内容はオブジェクトの中の特定のキーの削除です。https://teratail.com/questions/85243 のほうを違いがわかるように修正いたします。

行動規範の内容に同意します

回答1件

ベストアンサー

FileListはreadonlyですので、削除はできないはずです。
そこで逆転の発想です。
通常のフォーム機能では送りたくないファイルを削れないのですから、自前のフォーム機能で送りたいファイルだけを送りましょう。
html5のFormDataは、かなり自由にカスタマイズしたデータを送れます。

javascript
1var fd = new FormData();
2fd.append('hoge','hage');// hogeっていうキーのデータはhageだよ
3fd.append('file',files[i]);// アップロードしたいファイルだけをここで追加すればいいわけです
4fd.append('str',new Blob(["hoge,moge,mage"]));// なんらかのデータ列ならBlobにしちゃえば、それをファイルってことにして送れます
5$.ajax({
6	type : 'POST',
7	url: "data.php",
8	contentType:false,// FormData送信用の設定その1。BlobとFileがサーバのファイルアップロードとして(phpでなら$_FILESとして)処理されます
9	processData: false,// FormData送信用の設定その2。 データの暗黙変換が行われなくなります
10	data : fd,
11	success : function(res){
12		console.log(res);
13	}
14});

jQueryのajax向けの使い方だけをざっと紹介しました。
FormDataをググれば、既存のformタグを乗っ取るような形の使い方などが見つかったりしますので、うまく使いこなしてください。

投稿2017/07/22 13:51

zohnam

総合スコア1441

xjaPANDA

2017/07/22 17:10

readonlyとかあるんですね。知らずに、deleteで踏ん張っていましたので、まったく見当違いでした。とても勉強になります。また、非同期で画像をアップロードできることは知りませんでした。これができると、いろいろ広がりますね。とても便利です。今回アドバイスいただいたコードを関数の中に組み込み利用しました。かなり便利です。感動です。また削除については、こちらも非同期で削除するようにしました。制限については、とりあえず、データベースで、ファイル名、補足情報等を管理し、データの個数をかぞえて、制限をかけようと思っています。　

行動規範の内容に同意します