Ajax 파일 업로드
FormData를 이용한 JQuery Ajax 파일 업로드 샘플 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | // form 값 전부 보내기 $('.btn_upfile').click(function(){ var idx = $(this).parent().parent().index(); var frm = document.getElementById('frm_store'); frm.method = 'POST'; frm.enctype = 'multipart/form-data'; var fileData = new FormData(frm); // ajax $.ajax({ url:'/intra_tmp/backend/image_upload.php', type:'POST', data:fileData, async:false, cache:false, contentType:false, processData:false }).done(function(response){ alert(response); }); }); // 필요한 값만 보내기 $('.btn_upfile').click(function(){ var idx = $(this).parent().parent().index(); var frm = document.getElementById('frm_store'); frm.method = 'POST'; frm.enctype = 'multipart/form-data'; var shopNo = frm.shop_No.value; var files = $('#t_img_manager tr:eq('+idx+') .frm_file')[0].files[0]; var fileData = new FormData(); fileData.append('shopNo', shopNo); fileData.append(idx, files); // ajax $.ajax({ url:'/intra_tmp/backend/image_upload.php', type:'POST', data:fileData, async:false, cache:false, contentType:false, processData:false }).done(function(response){ alert(response); }); }); | cs |
출처 : http://webdevnovice.tistory.com/11
Ajax Form 방식
준비물 : jQuery 1.10.0 (↑)
jquery.form.js (http://malsup.com/jquery/form/#download)
먼저 jQuery 버전을 1.10.0 버전 이상을 받을 것을 권장 한다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | //여기서 유의점은 보통 ajax와 쓰는 방법은 같지만 ajaxForm은 별도로 submit을 해주어야한다. /* javascript */ function fileUpload() { $('#fileForm').ajaxForm({ url: "/testFile.do", enctype: "multipart/form-data", // 여기에 url과 enctype은 꼭 지정해주어야 하는 부분이며 //multipart로 지정해주지 않으면 controller로 파일을 보낼 수 없음 success: function(result){ alert(result); } }); // 여기까지는 ajax와 같다. 하지만 아래의 submit명령을 //추가하지 않으면 백날 실행해봤자 액션이 실행되지 않는다. $("#fileForm").submit(); } | cs |
출처: http://ppqqpqpq.tistory.com/47 [Seungil's blog]
Form 태그 방식
1 2 3 | frm.enctype = "multipart/form-data"; frm.method = "post"; frm.submit(); | cs |
개인적인 후기
오늘 ajax 파일 업로드때문에 삽질좀 했는데
아직 ajax로는 form 에서의 파일과 데이터를 동시에 보내는것에 성공을 못해봤다(submit만 해봄)
나중에 해보려고 저장을 해놓겠다
톰캣 가상경로 잡기
상황 : 서버에 올린 이미지업로드를 화면에 뿌릴대 경로가 맞지않아서 이미지가 나타나지 않았다 |
예를들어 프로젝트를 test라고 했을때
이미지 경로를 img 라고 했을때
D:/test/image/view/ =>프로젝트의 이미지 view 경로
D:/img/ => 실제 업로드되는 이미지 경로
경로를 잡으려면 어떻게 해야할까
우선 톰캣의 server.xml을 간다
그곳에 보면 프로젝트의 docBase와 path를 잡아주는 Host부분이 있을것이다
아직 개념이 정확이 잡히지는않았지만 일단 그곳에서
1 | <Context path="/image/view" docBase="D:/img" reloadable="false"/> | cs |
이런식으로 추가 해주면 가상경로가 잡힐것이다
이 가상경로를
(틀릴수도있지만)해석을 해보자면
path는 주소창에 입력하는 url을 타는 경로다 그리고 docBase는 들어오는 url의 진짜 경로를 나타낸다
이렇게 만해석하면 사용자는 프로젝트 내부의 image/view 아래의 이미지 파일을 요청했지만
실제로는 img 파일 내부에있는 파일을 매핑시킨것이다
일년전쯤 가상경로를 잡아본적이있어서 지금 또잡아줘야하는 상황이 발생했을때도
크게 어렵지않았던거같다 path와 docBase의 개념을 자신만의 방식으로 이해하고있으면될듯
이상 포스팅을 마친다