Ajax, Jquery 및 Struts2를 사용하여 파일 업로드

Question

안녕하세요, 누구든지 ajax, jquery 및 Struts2를 사용하여 파일을 업로드하는 방법을 알려주십시오. 나는 그물에 많은 튜토리얼을 통과했지만 가능한 해결책을 얻지 못했습니다. 요구 사항은 자바 스크립트 함수가 호출되어야하는 버튼을 클릭 할 때입니다. 자바 스크립트 (jquery)는 Ajax 엔진을 시작하고 아약스는 응답을 얻기 위해 struts 액션을 호출해야합니다. 여기서 요청 및 응답은 페이지를 새로 고치지 않고 IFrame을 사용하지 않고 수행됩니다.

Answer 1

iframe을 사용하여 새로 고침없이 데이터를 제출합니다.

i) 내 html은 다음과 같습니다.

1) 양식 태그를 추가하십시오. // 당신은 내 양식 태그는 단지 작업

2) 대상 = "my_iframe"을 추가 변경 붙여 복사 만 할 수 // iframe이 이름은 .. 그것은

이

   <div class="bp_up_input"> 
       <form name="banner_image_uploads" id="banner_image_uploads" method="post" action="" target="my_iframe" enctype="multipart/form-data"> 
        <span> 
         <input type="file" name="banner_image" class="my_vld" lang="Image_path" /> 
         <input type="button" id="banner_image_upload" value="Upload" class="bp_button_style" /> 
        </span> 
        <input type="hidden" name="slt_store_id" value="" /> 
        <input type="hidden" name="sld_location" value="" /> 
       </form> 
      </div> 

II) 내 자바 스크립트 코드가 아무것도 할 수있다 다음과 같습니다 :

$('#banner_image_upload').live('click',function(){ 

     if($.trim($('input[name="banner_image"]').val()) != '' && $.trim($('select[name="bp_location"]').val()) != '' && $.trim($('#store_names').val()) != ''){ 
      $("iframe").remove(); //Remove previous iframe if present 

      $("body").append('<iframe id="my_iframe" name="my_iframe" src="" style="display:none;"></iframe>'); //Append iframe to body with id my_iframe 

      $('#banner_image_uploads').submit();//submit the form with id banner_image_uploads 

      $("#my_iframe").load(function(){ 

        var val = $("iframe")[0].contentDocument.body.innerHTML; // I use php so I just echo the response which I want to send e.g 250:new and save it in var val. 

        var data = val.split(':'); // I split the variable by : 

        var html = '<tr><td><img width="800" height="60" border="0" src="/assets/store_banners/live/'+$.trim($('input[name="sld_location"]').val())+'/'+data[1]+'" id="'+data[0]+'"><a href="#nodo"><img src="/images/delete_trash.png" width="9" height="12" class="image_delete" style="padding-left:37%;"/></a></td></tr>'; // In my case I wanted to upload an image so on success I had to show the image which was uploaded. You can skip this and the below code if you want. 

        $('.bp_table tbody').append(html); //Append the uploaded image to the container I wanted. 


        $('input[name="banner_image"]').val(''); //On success I clear the file name 
      }); 
     }else{ 

      alert('Please Select filters'); 

     } 

Answer 2

안녕하세요 아래 코드가 작동합니다. 나는 그것이 당신을 도울 것이기를 바랍니다.

JSP 코드 :

<div id="uploadImg"> 
    <s:form id="uploadImgForm" action="strutsaction" method="post" enctype="multipart/form-data"> 
      <s:file name="imgFileUpload" label="Choose file to upload" accept="image/*"></s:file> 
      <s:submit value="Upload" align="center" id="uploadImgSubmitBtn"></s:submit> 
    </s:form> 
<div> 

JQuery와 :

$("#uploadImgSubmitBtn").click(function(e){ 

    // Get form 
    var form = $('#uploadImgForm')[0]; 

    // Create an FormData object 
    var data = new FormData(form); 

    $.ajax({ 
     type: "POST", 
     enctype: 'multipart/form-data', 
     url: "strutsaction.action", 
     data : data, 
     cache: false, 
     processData: false, 
     contentType: false, 
     success: function(data){ 
      $('#uploadImg').html(data); 
     } 
    }); 
});