MVC下不打开新窗口实现文件上传

应该在很多地方都需要实现文件上传的功能,而且在大都用起了MVC,而文件上传时form又不能用ajax提交,FORM提交总是打开新的页面很是不爽,于是摸索了实现这个未弹新窗口实现文件上传的功能。好了,闲话不多说,直接干活。

1、首先当然是在页面包括Jquery控件了。
<script type="text/javascript" src="${ctx}/js/jquery.min.js"></script>

2、创建一个表单,实现文件上传界面。
<form target="hideWin" method="post" action="${ctx}/dams/upload.do" id="uploadform" enctype="multipart/form-data">
<input type="file" id="excel" name="excel" style="width:270px">
<input type=hidden id='stcd' name="stcd">
<input type=hidden id='clear' name="clear">
<br/>
<input type="checkbox" id="isclear" checked><label for="isclear">先清空数据</label>
</form>
<input type=button id="upload" value="上传">
大家应该注意到了,FORM中加了target=hideWin,意思是告诉浏览器等会儿form提交到hideWin中,而不是新开窗口。至于action后台方法upload.do,这个就交给java后台好了。
3、创建一个名叫hideWin的iframe,隐藏就好。
<iframe id="hideWin" name="hideWin" style="display: none"></iframe>

4、接下来,要做最重要一步,就是如何提交form,提交好办,一个submit就OK了。
$('#upload').click(function(){
var isclear = document.all.isclear.checked?"1":"0";
$('#uploadform').find('#stcd').val(stcd);
$('#clear').val(isclear);
var url = $('#excel').val();
if (url ==""){
$.messager.alert('提示','请选择要上传的EXCEL文件!');
return;
}
var point = url.lastIndexOf(".");
var type = url.substr(point);
if(type!='.xls'){
$.messager.alert('提示','请选择要上传的EXCEL文件!');
return;
};
$('#uploadform').submit();
});
5、最后就是接收后台upload.do方法的返回信息再做处理。但在iframe中接收返回信息可以累坏我了,这也是我记录下这个过程的最重要原因。当初还想用kindeditor的上传功能的,做是也做出来了,却发现它那个上传按钮挺怪异的,还有些地方IE不兼容,最终只好舍弃,自己找办法实现了。
$("iframe[name=hideWin]").bind('load', function() {
var doc =this.contentDocument || this.contentWindow.document;
var data = $.parseJSON(doc.body.innerHTML);
if (data.error === 0){
//$.messager.alert('恭喜','文件已经上传!');
} else {
//alert(data.message);//打印出错信息
}
});

好了,就是这样,大功告成!
  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值