之前在做JSP上传文件到服务器的时候,由于没有采用JQuery,而又必须得到上传文件到服务器后返回的文件id等信息。这一个过程就是出现上传的进度条,上传成功后进度条小时,并显示文件的详细内容,是异步的。没有使用插件的话,这一效果将很难实现。
于是可以通过隐藏iframe实现异步上传并得到返回信息的效果,实现原理如下:
- XML/HTML 代码复制内容到剪贴板
- <form action="/uploadAttaches.do" method="post" enctype="multipart/form-data" target="uploadIframe">
- 添加附件:<input type="file" name="upload"/>
- <input type="submit" value="上传"/><br>
- <span id="msg"></span>
- </form>
- <iframe name="uploadIframe" id="uploadIframe" style="display:none"></iframe>
需要注意的是form里面的target要与iframe里面的id的值相等,指示是form相应了post事件,也就是post时间相应的时候刷新的是iframe而不是整个页面。
- JavaScript 代码复制内容到剪贴板
- <script type="text/javascript">
- function callback(msg){
- document.getElementById("msg").innerHTML = msg;
- document.getElementById("path").value=msg;
- }
- </script>
下面是上传到服务器并返回信息的代码:
- Java 代码复制内容到剪贴板
- String fileName = ""; //上传文件的文件名
- File tmpDir = new File("d:\\temp");
- String file = ""; //文件的生成路径名
- String showFileName = null; //显示的文件名
- String showImageUrl = ""; //上传文件的图标路径
- try{
- if (ServletFileUpload.isMultipartContent(request)){
- DiskFileItemFactory factory = new DiskFileItemFactory();
- factory.setSizeThreshold(1 * 1024 * 1024);
- factory.setRepository(tmpDir);
- ServletFileUpload sfu = new ServletFileUpload(factory);
- sfu.setFileSizeMax(20 * 1024 * 1024);
- sfu.setSizeMax(20 * 1024 * 1024);
- sfu.setHeaderEncoding("UTF-8");
- FileItemIterator fii = sfu.getItemIterator(request);
- String uploadPath = getServletContext().getRealPath("/") + "upload";//获取文件路径
- System.out.println(uploadPath);
- if (!new File(uploadPath).isDirectory()) {
- new File(uploadPath).mkdirs();
- }
- while(fii.hasNext()){
- FileItemStream fis = fii.next();
- if(!fis .isFormField() && fis.getName().length() > 0){
- fileName = fis.getName();
- BufferedInputStream in = new BufferedInputStream(fis.openStream());
- BufferedOutputStream os = new BufferedOutputStream(new FileOutputStream(new File(uploadPath + File.separator + fileName)));
- Streams.copy(in, os, true);
- in.close();
- os.close();
- file = "upload/" + fileName;
- }
- }
- }
- response.getWriter().write("<script>parent.callback('"+file+"')</script>");
- }catch (Exception e) {
- e.printStackTrace();
- }
转载于:https://blog.51cto.com/06peng/962797