上傳文件使用Ajax，Jquery和Struts2

Question

嗨，任何人都可以告訴我如何使用ajax，jquery和Struts2上傳文件。我已經瀏覽了網上的很多教程，但是我沒有得到任何可能的解決方案。要求是當我們點擊按鈕時，需要調用javascript函數.javascript（jquery）啓動Ajax引擎，並且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> 

二）我的JavaScript代碼一個如下：

$('#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); 
     } 
    }); 
});