java鬼混笔记：jsp上传文件不跳转页面

最新推荐文章于 2023-03-03 01:24:57 发布

最新推荐文章于 2023-03-03 01:24:57 发布

阅读量1.1k

点赞数

本文链接：https://blog.csdn.net/u013845177/article/details/73929091

版权

要两个页面，原理是：比如index.jsp是主页主页里有个iframe（隐藏的，）iframe里有个small.jsp ,small.jsp里有个form, form里有个<input type="file" name="file"/> 这个是用来选择上传文件的，都懂吧。接下来，index.jsp点击按钮(index.jsp上有个按钮)，按钮触发small.jsp中的form的<input type="file" name="file"/>这个元素的点击事件，这时就弹出一个选择文件框(很正常) .虽然iframe是隐藏的，但是弹出的文件选择框可以在index.jsp中看到的。这时你选中你要上传的文件(这里以图片为例)，然后就触发一个方法(方法是small.jsp中)，这个方法的作用是对small.jsp中的form表单进行一个submit事件，这样子，你选中的文件就上传了，全都在small.jsp中操作，完全不影响index.jsp（index.jsp唯一能做的就是选择文件），实现了index.jsp页面选择文件上传而不跳转功能。如图：

效果图：

代码：

index.jsp

<body>
<input type="button" value="上传文件" οnclick="upload()"/>
<p id="name">文件名：</p>
<p id="size">文件大小：</p>
<img id="path" src="" width="300" height="300">
<iframe id="myIframe" name="myIframe" src="small.jsp" style="display: none;"></iframe>
<script type="text/javascript">
function upload(){
myIframe.window.startUpload(); 
}
</script>
</body>

small.jsp

<body οnlοad="bbc()">
<center>
<form id="myForm" action="<%=basePath%>upload/start.do" enctype="multipart/form-data" method="post">
<input type="file" name="file" id="file" οnchange="upload()"/>
<input type="submit" value="gogogo" />
</form>
</center>
<input type="hidden" name="name" value="${name}" id="name"/>
<input type="hidden" name="size" value="${size}" id="size"/>
<input type="hidden" name="path" value="${path}" id="path"/>
<script type="text/javascript">
function startUpload(){
$('input[name="file"]').click();//触发 id="file"的元素的点击事件 就弹出那个选择文件的框
}
//在文件选择框选中文件后 开始上传
function upload(){
$('#myForm').submit();
}
function bbc(){
$(window.parent.document).find('#name').text('文件名:'+$('#name').val());
$(window.parent.document).find('#size').text('文件大小:'+$('#size').val());
$(window.parent.document).find('#path').attr('src',$('#path').val());
}
</script>
</body>

后台代码：

@Controller
public class MyUpload {
@Autowired
private HttpServletRequest request;
@RequestMapping("/upload/start")
//@RequestParam("file")中上file对应的是input元素中的name="file"
public String upload(@RequestParam("file") MultipartFile file) throws Exception{
//路径D://abc.jpg(假设我上传的是abc.jpg图片)
String path = request.getServletContext().getRealPath("/")+"images"+File.separator+file.getOriginalFilename();
request.setAttribute("name", file.getOriginalFilename());//上传文件名
request.setAttribute("size", file.getBytes().length);//上传文件大小
request.setAttribute("path", "images"+File.separator+file.getOriginalFilename());//上传路径
File ff = new File(path);
file.transferTo(ff);
return "small";
}
}

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
java鬼混笔记：jsp上传文件不跳转页面

要两个页面，原理是：比如index.jsp是主页主页里有个iframe（隐藏的，）iframe里有个small.jsp ,small.jsp里有个form, form里有个这个是用来选择上传文件的，都懂吧。接下来，index.jsp点击按钮(index.jsp上有个按钮)，按钮触发small.jsp中的form的<input type="file" name="file"/>这个元素的点击
复制链接

扫一扫