MVC下不打开新窗口实现文件上传
应该在很多地方都需要实现文件上传的功能,而且在大都用起了MVC,而文件上传时form又不能用ajax提交,FORM提交总是打开新的页面很是不爽,于是摸索了实现这个未弹新窗口实现文件上传的功能。好了,闲话不多说,直接干活。
1、首先当然是在页面包括Jquery控件了。
<scripttype="text/javascript"src="${ctx}/js/jquery.min.js"></script>
2、创建一个表单,实现文件上传界面。
<formtarget="hideWin"method="post"action="${ctx}/dams/upload.do"id="uploadform"enctype="multipart/form-data">
<inputtype="file"id="excel"name="excel"style="width:270px">
<inputtype=hiddenid='stcd'name="stcd">
<inputtype=hiddenid='clear'name="clear">
<br/>
<inputtype="checkbox"id="isclear"checked><labelfor="isclear">先清空数据</label>
</form>
<inputtype=buttonid="upload"value="上传">
大家应该注意到了,FORM中加了target=hideWin,意思是告诉浏览器等会儿form提交到hideWin中,而不是新开窗口。至于action后台方法upload.do,这个就交给java后台好了。
3、创建一个名叫hideWin的iframe,隐藏就好。
<iframeid="hideWin"name="hideWin"style="display:none"></iframe>
4、接下来,要做最重要一步,就是如何提交form,提交好办,一个submit就OK了。
$('#upload').click(function(){
varisclear=document.all.isclear.checked?"1":"0";
$('#uploadform').find('#stcd').val(stcd);
$('#clear').val(isclear);
varurl=$('#excel').val();
if(url==""){
$.messager.alert('提示','请选择要上传的EXCEL文件!');
return;
}
varpoint=url.lastIndexOf(".");
vartype=url.substr(point);
if(type!='.xls'){
$.messager.alert('提示','请选择要上传的EXCEL文件!');
return;
};
$('#uploadform').submit();
});
5、最后就是接收后台upload.do方法的返回信息再做处理。但在iframe中接收返回信息可以累坏我了,这也是我记录下这个过程的最重要原因。当初还想用kindeditor的上传功能的,做是也做出来了,却发现它那个上传按钮挺怪异的,还有些地方IE不兼容,最终只好舍弃,自己找办法实现了。
$("iframe[name=hideWin]").bind('load',function(){
vardoc=this.contentDocument||this.contentWindow.document;
vardata=$.parseJSON(doc.body.innerHTML);
if(data.error===0){
//$.messager.alert('恭喜','文件已经上传!');
}else{
//alert(data.message);//打印出错信息
}
});
好了,就是这样,大功告成!