使用Ajax，Jquery和Struts2上传文件

Question

Hi can any one please tell me how to upload files using ajax, jquery and Struts2. I have gone through the lot of tutorials in the net but i didn't get any possible solution. The requirement is when ever we click on the button the javascript function need to be called.The javascript(jquery) initiate the Ajax engine and ajax need to call the struts action to get the response. Here the request and response is without refresh the page and without using the IFrames.

Answer 1

I use iframe to submit my data without refresh.

i) My html is as follows :

1) Add form tag. // You can just copy paste my form tag just change the action

2) Add target="my_iframe" // The iframe name.. it can be anything

              <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) My javascript code is a follows :

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

Hi the below code is working for me. I hope it will help you.

JSP Code:

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