複数画像アップロードと画像ファイル保持に関しての備忘録

某スクール最終課題にてこれが結構時間かかったので記事にしておきます。

本家とはやり方が違うと思いますが、機能的にはそれなりに近づいたと思ってます。

まず、普通に検索して出てくる複数画像投稿のやり方とか、

ドラッグ&ドロップのやり方ではファイルの保持の方法があまり書いてないと思います。

私はここでかなり苦労しました・・・

まぁ、それは置いといてとりあえず結論から書きますと、

これを解消するにはjavascriptの方でinputを作ってあげてクリックしたらその作成したinputを選択するようにしてあげる事で解消出来ます。（ここもjavascriptで制御する感じです）

ブラウザのhtml的にinputが増えていく感じになるのですが、本家の某フリマの方は数値のカウントのみの変動なので、これとは違ったやり方になっていると思います。

でも、とりあえずこれでファイルをinput内に保持した状態となるので、previewの表示がリセットされてしまう状態が解消されます。

実際のコード的には、

var nextInput = `<input accept="image/*,.png,.jpg,.jpeg" id="image_input`+ inputCount +`" class="upload-image" name="images[image][]" multiple= "true" type="file" style="display: none;">`

という変数を定義して、

$("#preview").append(nextInput);

と書いてあげてhtmlに追加していくという感じです。

更に、hamlのドロップゾーンの要素に{onclick:"$('#image_input1').click();"}と書いてあげて、クリックする度にこの要素の #image_input1の数字が変わるようにする事で次のinputにImageFileが入るように出来ます。

この時、input Type File を隠すためにlabel要素を使っていると私の場合うまくいきませんでした。inputの方のidが必要になるのでlabelのforと相性が悪かったので、

ドラッグ&ドロップにはdiv要素を使ってinput Type File をstyle display: none;で隠す感じ

にしてあげました。