画像ファイルの削除とコミットの処理

$(".uploadResult ").on("click", "li button", function(e){

            console.log("delete file");

            var targetFile = $(this).data("file");

            var targetLi = $(this).closest("li");

            $.ajax({
                url: '/removeFile',
                data: {fileName: targetFile},
                dataType:'text',
                type: 'POST',
                success: function(result){
                    alert(result);

                    targetLi.remove();
                }
            }); //$.ajax
        });

削除操作は正常に完了しました.

-画面の「Submit」ボタンをクリックして、次の操作を行います.
-各画像<li>タグの「data-'」属性を取得します.
-取得した属性値を使用して、<form>xorm sodp<input type='hidden>ラベルを生成します.
-「imageDTOList[0]」などのインデックス番号を<input type='hidden>の名前に追加して処理します.

 $(".btn-primary").on("click",function(e){
                    e.preventDefault();//href 속성이 중단된다.

                    var str = "";

                    $(".uploadResult li").each(function(i,obj){
                        var target = $(obj);

                str += "<input type='hidden' name='imageDTOList["+i+"].imgName' value='"+target.data('name') +"'>";

                str += "<input type='hidden' name='imageDTOList["+i+"].path' value='"+target.data('path')+"'>";

                str += "<input type='hidden' name='imageDTOList["+i+"].uuid' value='"+target.data('uuid')+"'>";

                    })
                    //태그들이 추가된 것을 확인한 후에 comment를 제거
                    $(".box").html(str);
                    //$(".form").submit();

                });

最後に、Submit()はコメント性であるため、実際のサーバは呼び出されませんが、下図に示すように、「Submit」をクリックすると、フォームラベル内の<div class='box'>に非表示タイプのラベルが作成されます.

submit()を実行すると、リストページがないためエラーが発生する可能性がありますが、データベースが正常に追加されていることがわかります.