使用Ajax、Jquery和Struts2上传文件

Upload files Using Ajax, Jquery and Struts2

本文关键字:文件 Struts2 Ajax Jquery 使用      更新时间:2023-09-26

嗨,有人能告诉我如何使用ajax、jquery和Struts2上传文件吗。我在网上浏览了很多教程,但没有找到任何可能的解决方案。要求是当我们点击按钮时,需要调用javascript函数。javascript(jquery)启动Ajax引擎,Ajax需要调用struts操作来获得响应。这里的请求和响应不刷新页面,也不使用IFrame。

我使用iframe提交数据而不刷新。

i) 我的html如下:

1) 添加表单标记。//你可以复制粘贴我的表单标签,只需更改操作

2) 添加target="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)我的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'); 
         }

嗨,下面的代码对我有用。我希望它能帮助你。

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