現在表示されている画像の枚数を、クラス名に反映させたいです

Question

前提・実現したいこと

DropzoneJSを使い、ドラッグ＆ドロップで画像を非同期アップロードできる様にしています。
画像が追加されるたびに、ある要素のクラス名を.hoge1や.hoge2・・・と、現在の画像の枚数をクラス名に反映させたいです。

ちなみに、画像をアップロードすると、.previewの要素が画像と共に追加されていきます。

色々を調べて試しているのですが、画像を追加しても、反映されず・・・どう書いたらいいか分かりません。
どなたか教えていただけませんでしょうか。
よろしくお願いいたします。

該当のソースコード

<form action="#">
	<div id="preview_area" class="dropzone"></div>
	<div id="image_drop_area"></div>
</form>

<form action="#">
	<div id="preview_area" class="dropzone">
		<div class="preview"><img src="" alt=""></div>
	</div>
	<div id="image_drop_area"></div>
</form>

$(function(){
	var classLength = $("#preview_area").children('div').length;
	var newClass = "have-item-" + classLength;
	$('#image_drop_area').addClass(newClass);
});

Comments

[kei344]

プラグイン／ライブラリは公式配布サイトのURLを質問文に追記ください。（URLにはリンクを張ることができます）

Answer 1

file処理なら普通にinput type=fileを利用するほうが楽だと思います

<style>
.dropzone{
border: gray solid 1em;
display: block;
padding: 2px 1em;
position: relative;
height:100px;
}
.dropzone input[type="file"] {
height: 100%;
width: 100%;
left: 0px;
top: 0px;
position: absolute;
opacity: 0;
}
</style>
<script>
$(function(){
  $('input:file').on('drop',function(e){
    var files=e.originalEvent.dataTransfer.files;
    console.log(files);
  });
});
</script>
<form>
<div id="preview_area" class="dropzone">
<input type="file" name="userfile" multiple>
</div>
<div id="image_drop_area"></div>
</form>

プレビュー画像はsubmitせずにブラウザ側でつくるのでしょうか？

Comments

[y_emo]

ありがとうございました！
プレビュー画像はsubmitするつもりです！

[yambejp]

submitしてプレビュー画像を作るのではあまりプレビューする意味がないと
思います

Answer 2

追加された時のイベント側で値を更新すればよいのではないでしょうか。

【Dropzone.js】
https://www.dropzonejs.com/#events

Comments

[y_emo]

ありがとうございます！イベント側で値を更新しようと思ったのですが、

https://www.pospome.work/entry/20130713/1373699451
↑こちらの記事を参考に

success:function(_file, _return, _xml){
var classLength = file.previewElement.children('div').classList.length;
this.element.classList.addClass('have-item-' + classLength);
},

この様にしてみたのですが、全く反応せず、抜け出せなくなってしまいました。。。
もし宜しければ、ご教示いただけますでしょうか。

[kei344]

リンク先は確認しましたか？現在のバージョンではその書き方ではないから反応しないだけですよ。

[y_emo]

ありがとうございました！おかげさまでできる様になりました！
参考にしてたサイトとバージョンが違うということを認識させずにしてしまい、失敗していたのですね。。。