使用Ajax、Jquery和Struts2上传文件
Upload files Using Ajax, Jquery and Struts2
嗨,有人能告诉我如何使用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);
}
});
});
相关文章:
- 如何播放部分音频文件
- 从桌面读取python文件时高亮显示代码
- 使用JS如何动态更改显示的html文件中的文本背景颜色
- 如何使用WCF服务和javascript表单post上传.doc文件
- 当包含另一个asp文件时,是否也包含所有引用的样式和脚本页面
- 如何在生成下载文件时显示加载动画
- 有没有任何方法可以将控制器从文件加载到ui路由器$stateProvider中
- Javascript-如何读取json文件中的列并将其保存在Javascript数组中
- 将jsp文件下拉列表中的选定项分配给一个java变量(比如String selection)
- 正在SharePoint 2013母版页中添加JQuery移动文件
- 如何在php文件中获取$.post-ajax传递的值
- 直接下载文件,而不是从window.open(url)
- 如何在android中使用phonegap将文件从一个文件夹移动/复制到另一个文件夹
- 使用压缩的JavaScript文件(不是运行时压缩)
- 在浏览器中打开“保存”对话框,在struts2中保存来自服务器的文件
- 如何在Struts2中上传多个文件之前显示选定的文件名
- struts2文件使用ajax在同一页面上传成功消息
- 如何使用javascript在struts2中使文件上传字段为空
- 当struts2页面刷新时,Javascript文件无法重新加载
- 使用Ajax、Jquery和Struts2上传文件