前提
最近项目中用到的是针对Execl文件的导入和导出，其中上传采用一键上传的方式，只要一个导入按钮，选好文件自动上传。实例如图
现状：
系统中上传文件页面显示效果如下图所示
关于这种操作，在上传文件之后页面进行跳转而且还需要手动点击【upload】按钮，问题是我想把用户培养的更懒啊，而且之前学过ajax异步加载，用户体验度还很高。为什么还要用这种方式！下面就是坑了，问题的关键是ajax不支持文件上传！！！
解决
好在jQuery本身提供一个上传插件jquery.ocupload-1.1.2.js，只要在jsp中引用就可以了，然后一句代码就可以解决了。
<input id="but1" type="button" value="upload">实现机制
demo
页面
<body>
<form target="myFrame" action="abc" method="post" enctype="multipart/form-data">
<input name="myFile" type="file">
<input type="submit" value="upload">
</form>
<iframe width="0" frameborder="0" height="0" name="myFrame"></iframe>
</body>
</html>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.ocupload-1.1.2.js"></script>
<script type="text/javascript">
$(function(){
$("#but1").upload({
action: 'abc',
name: 'myFile'
});
});
</script>在页面中创建一个<iframe>在页面跳转的时候跳转到<iframe>，然后让<iframe>隐藏。这也就是为什么界面不跳转的原因。
为什么不用点击提交按钮？
在原始的上传界面有一个获取文件路径的文本框，其实当有文件上传的时候，text中内容是变化的。所以可以利用text的change事件和upload按钮绑定，js实现自动提交。
【总结】
只能说站在巨人的肩膀上，利用jQuery提供的插件，功能实现的轻而易举。我认为这个问题的关键是不知道jQuery提供了这款插件，也就是之前boss说过的不怕不知道就怕不知道。真的随着时间的深入才知道其中精髓之处。
137
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
