疯狂java


您现在的位置: 疯狂软件 >> 新闻资讯 >> 正文

Form表单异步提交的技巧


 

 
form表单默认的提交方式是同步提交的,如果希望通过form表单实现异步提交应该如何操作呢?本文将详细介绍form表单异步提交的技巧.读者可将代码进行分析和测试,详细步骤如下
一,新建一个form表单用于提交图片文件。
      首先需要新建一个JSP的界面file.jsp,代码如下:
 
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
        <head>
                <title>疯狂Java</title>
                <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
                <meta http-equiv="pragma" content="no-cache"/>
                <meta http-equiv="Cache-Control" content="no-cache, must-revalidate"/>
                <meta name="Keywords" content="keyword1,keyword2,keyword3"/>
                <meta name="Description" content="网页信息的描述" />
                <meta name="Author" content="fkjava.org" />
                <meta name="Copyright" content="All Rights Reserved." />
                <link href="fkjava.ico" rel="shortcut icon" type="image/x-icon" />
                <link rel="stylesheet" type="text/css" href="css/commons.css"/>
                
                <script type="text/javascript">
                        function addImag(imagUrl){
                                var img = document.createElement("img");
                                img.src = imagUrl;
                                img.width = 200;
                                img.height = 200;
                                document.getElementById("imgs").appendChild(img);
                        }
                </script>
        </head>
        <body>
                <!-- target="iframe" 服务器响应的页面潜入到 iframe框架中  -->
                <form action="filrUpload.action" target="iframe" method="post" enctype="multipart/form-data">
                              <input type="file" name="pic"/>
                              <input type="submit" value="上传"/>
                </form>
 
                <!-- 通过页面的方式实现异步刷新 -->
                <iframe name="iframe" style="display:none;">
                        
                </iframe>
 
                <div id="imgs">
 
                </div>
        </body>
</html>
复制代码
代码中,form表单的配置是关键,form表单的enctype="multipart/form-data"配置指定这个表单是需要提交文件对象的,target声明了form表单最终响应的结果数据(jsp页面)刷新到iframe中去,这样就避免了整个file.jsp页面的刷新了,这是form表单实现异步的关键所在。
 
二,后台定义接收文件的Servlet
 
package org.fkjava.xhr.servlet;
 
import java.io.File;
import java.io.IOException;
import java.util.Collection;
import java.util.UUID;
 
import javax.servlet.ServletException;
import javax.servlet.annotation.MultipartConfig;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.Part;
 
/**
* @Author xlei @tel 18665616520 @qq 251425887
* @Date 2015年9月3日下午5:05:04
* @Email dlei0009@163.com
* @Version 1.0
* @From http://www.fkit.org
*
*/
@WebServlet("/filrUpload.action")
@MultipartConfig // 代表有文件上传
public class FileUploadTest extends HttpServlet {
 
        @Override
        protected void service(HttpServletRequest request, HttpServletResponse response)
                        throws ServletException, IOException {
                Part part = request.getPart("pic");
                
                /** 1.获取项目的部署路径*/
                String weblPath = this.getServletContext().getRealPath("/images/");
                System.out.println(weblPath);
                /** 2.从新给pic文件指定一个新唯一的名称*/
                 /** a.先获取文件的后缀名*/
                Collection<String > infos =  part.getHeaderNames();
                for(String info : infos){
                        System.out.println(info+"--->"+part.getHeader(info));
                }
        
                String contentDisposition = part.getHeader("content-disposition");
                int pointerIndex = contentDisposition.lastIndexOf(".");
                /** 取图片文件的后缀名*/
                String suffix = contentDisposition.substring(pointerIndex,contentDisposition.length() - 1);
                System.out.println(pointerIndex+"---"+contentDisposition.length()+suffix);
                /** 给文件随机生成一个新的名字*/
                String fileNewName = UUID.randomUUID().toString() + suffix;
                File file = new File(weblPath);
                if(!file.exists()){
                        file.mkdirs();
                }
                /** 3.把文件保存到系统的部署路径中去*/
                part.write(weblPath+"/"+fileNewName);
                
                request.setAttribute("imageUrl", "images/"+fileNewName);
                request.getRequestDispatcher("/frame.jsp").forward(request, response);
                
        }
        
}
复制代码
收到图片后,Servet请求到了frame.jsp页面,同时将上传成功的图片地址带到了frame.jsp页面,值得注意的是frame.jsp页面实际上是响应到了file.jsp中的frame框架中去的,并不会引起整个file.jsp页面的刷新
 
 
三,frame.jsp页面中
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
   <script type="text/javascript">
         parent.addImag("${imageUrl}");
   </script>
</head>
<body>
 
</body>
</html>
复制代码
通过parent找到file.jsp对象中的addImage方法将图片显示出来。效果如下:
 
 
----------------------------------本文摘自疯狂Java联盟-------------------------------------