아이도리
99
2022-04-07 18:47:19
5
176

Ajax사용해서 이미지를 db에 저장하려고 하는데 어떻게 코드를 짜야할까요?




모달창으로 이미지 3개중에 하나를 선택하게 할거고 저장을 누르면 db에 저장이 되도록 하게 

만들고 싶습니다. 일단 페이지 이동을 하진 않아서 저장누르면 db에 저장된 저 이미지가 뜨도록 

하게 하고싶은데..어떻게 짜야할까요..? 

html 코드는 

<div>

<img id="img1">

<img id="img2">

<img id="img3">

</div>

<button class="btn_submit">등록</button>


이런느낌으로 만들었습니다. 

ajax를 사용하여 이동하게 하고 싶은데.. 

$('.btn_submit').on("click",function(e){

$.ajax({

type : "POST",

url : "/iqr/iqr_write",

data : "ansMood": $('#img1').val(), 

success : function(){

alert(' 등록 완료!');

location.reload();

}, error : function(){

alert('등록 실패');

}

});

})


이런식으로 짜려고 하는데.. 지금 걸리는건 두가지 인데요

1.

data : "ansMood": $('#img1').val() 부분에.. 이게 이미지라서 value를 이렇게 사용해도 저장이 되나요..?

나중에 저장된 이미지를 가져와서 보여주어야 하는데 어떤식으로 구현을 해야할까요?


2.

제가 처음에 이 페이지를 로드하면 바로 저 모달창이 나오도록 구현을 해놓았는데요

등록이 완료된 후에 location.reload()하면 모달창이 다시 뜨겠죠..? 전 저장하면 저 모달창이 안떴으면 

좋겠는데 어떤걸 사용해야할까요..?



0
  • 답변 5

  • 레인3
    2k
    2022-04-07 19:40:34 작성 2022-04-07 19:40:48 수정됨
  • 아이도리
    99
    2022-04-07 19:48:01

     


      감사합니다.알려주신 블로그에서는 input 으로 가져왔는데 제 경우에는 선택된 

    img 태그를 가져와서 저장하고 싶은데.. 방법이 같을까요..?

  • Llux lux
    516
    2022-04-08 09:31:26 작성 2022-04-08 09:32:08 수정됨

    이미지가 업로드가 아니고 여러개중에 선택한다는 거죠?

    img 의 src를 읽어 가서 저장하시면 될것 같네요.

    .attr로요

    태그를 다 저장할 필요는 없죠.

    경로만 저장하시고요.

    그리고 ajax 에 데이터는 { image : $(selectedImg).attr("src") }

    이렇게  json 형태로 넘기세요

  • Etcetera
    34
    2022-04-08 11:23:32
    2.
    등록이 되었는지의 상태값을 LocalStorage에 저장하고, DOMContentLoaded 이벤트를 추가해서 내용물이 로드되었을 때, 상태값을 가져와서 그 값에 따라 보여줄지를 결정하면 되지 않을까요?
  • 아이도리
    99
    2022-04-16 15:26:49

     



       답장이 늦었습니다. 감사합니다!! 큰 도움이 되었습니다.
  • 로그인을 하시면 답변을 등록할 수 있습니다.