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

来源：互联网发布：mt4外汇交易系统源码编辑：程序博客网时间：2024/06/07 21:45

要两个页面，原理是：比如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="上传文件" onclick="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 onload="bbc()"><center><form id="myForm" action="<%=basePath%>upload/start.do" enctype="multipart/form-data" method="post"><input type="file" name="file" id="file" onchange="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>

后台代码：

@Controllerpublic class MyUpload {@Autowiredprivate 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 0