Ajax 파일업로드 샘플코드/톰캣 가상경로 잡아주기

  Ajax 파일 업로드

FormData를 이용한 JQuery Ajax 파일 업로드 샘플

// 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);
    });
  
});
 

출처 : http://webdevnovice.tistory.com/11

  Ajax Form 방식

준비물 : jQuery 1.10.0 (↑)

jquery.form.js (http://malsup.com/jquery/form/#download)

먼저 jQuery 버전을 1.10.0 버전 이상을 받을 것을 권장 한다.

//여기서 유의점은 보통 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();
 
}

출처: http://ppqqpqpq.tistory.com/47 [Seungil's blog]

  Form 태그 방식

frm.enctype = "multipart/form-data";
frm.method = "post";
frm.submit();

  개인적인 후기

오늘 ajax 파일 업로드때문에 삽질좀 했는데

아직 ajax로는 form 에서의 파일과 데이터를 동시에 보내는것에 성공을 못해봤다(submit만 해봄)

나중에 해보려고 저장을 해놓겠다

  톰캣 가상경로 잡기

상황 : 서버에 올린 이미지업로드를 화면에 뿌릴대 경로가 맞지않아서 이미지가 나타나지 않았다

예를들어 프로젝트를 test라고 했을때

이미지 경로를 img 라고 했을때

D:/test/image/view/  =>프로젝트의 이미지 view 경로

D:/img/  => 실제 업로드되는 이미지 경로

경로를 잡으려면 어떻게 해야할까

우선 톰캣의 server.xml을 간다

그곳에 보면 프로젝트의 docBase와 path를 잡아주는 Host부분이 있을것이다

아직 개념이 정확이 잡히지는않았지만 일단 그곳에서

<Context path="/image/view" docBase="D:/img" reloadable="false"/>

d

이런식으로 추가 해주면 가상경로가 잡힐것이다

이 가상경로를

(틀릴수도있지만)해석을 해보자면

path는 주소창에 입력하는 url을 타는 경로다 그리고 docBase는 들어오는 url의 진짜 경로를 나타낸다

이렇게 만해석하면 사용자는 프로젝트 내부의 image/view 아래의 이미지 파일을 요청했지만

실제로는 img 파일 내부에있는 파일을 매핑시킨것이다

일년전쯤 가상경로를 잡아본적이있어서 지금 또잡아줘야하는 상황이 발생했을때도

크게 어렵지않았던거같다 path와 docBase의 개념을 자신만의 방식으로 이해하고있으면될듯

이상 포스팅을 마친다