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);//打印出错信息

}

});

好了,就是这样,大功告成!

相关推荐