MVC下不打开新窗口实现文件上传
dalong 2014-05-23
应该在很多地方都需要实现文件上传的功能，而且在大都用起了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);//打印出错信息
}
});
好了，就是这样，大功告成！
