上传文件使用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); 
     } 
    }); 
});