菜单

使用FormData举行Ajax请求上传文书之实例代码

2018年12月17日 - Ajax

Servlet3.0起提供了同等多级的笺注来安排Servlet、Filter、Listener等等。这种艺术可极大的简化在开中大量的xml的配置。从这些本先河,web.xml可以不再用,使用相关的注释同样好做到相应的安排。

Servlet3.0起来提供了同等多元之笺注来安排Servlet、Filter、Listener等等。这种方法可极大的简化在付出中大量之xml的布局。从之版起头,web.xml可以不再用,使用相关的注释同样好得相应的配备。

a.选中及传

本人笔记里也起记文件上传:https://www.cnblogs.com/hhmm99/p/9239782.html

图片 1

a.选中及污染

b:后台突显

图片 2

图片 3

b:后台彰显

c:上传的公文夹

图片 4

图片 5

c:上传的文书夹

html代码:

图片 6

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Ajax上传</title>
 <script src="js/jquery-1.12.4.js"></script>
</head>
<body>
 <h1>文件上传</h1>
 <form id="f" enctype="multipart/form-data">
  UserName:<input type="text" name="userName"><br/>
  File1:<input type="file" name="file"><br/>
  File2:<input type="file" name="file"><br/>
  <input type="button" id="btn" value="提交">
 </form>
</body>
<script>
 $(function () {
  $("#btn").on("click",function () {
   //使用FormData对象来提交整个表单,它支持文件的上传
   var formData=new FormData(document.getElementById("f"));
   //额外带来一些数据
   formData.append("age",14);
   //使用ajax提交
   $.ajax("ajaxUpload",{
    type:"post",
    data:formData,
    processData:false,//告诉jquery不要去处理请求的数据格式
    contentType:false,//告诉jquery不要设置请求头的类型
    success:function (data) {
     alert(data);
    }
   });
  })
 })
</script>
</html>

 

java后台代码:

 

@WebServlet("/ajaxUpload")
@MultipartConfig //开启上传功能
/**
 * @author hh
 */
public class FileUploadServlet extends HttpServlet {
 @Override
 protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
  req.setCharacterEncoding("utf-8");
  //获取用户名
  String userName=req.getParameter("userName");
  //获取年龄
  String age=req.getParameter("age");
  System.out.println(userName);
  System.out.println(age);
  //获取项目部署的绝对路径
  String uploadPath=req.getServletContext().getRealPath("/photos");
  //构建上传的文件夹
  File dir=new File(uploadPath);
  if(!dir.exists()){
   dir.mkdir();
  }
  //获取所有上传的Part
  Collection<Part> parts= req.getParts();
  for (Part part:parts) {
   //判断上传的类型是否为空,如果为空则不执行上传
   if(part.getContentType()!=null){
    //获取文件名
    String fileName=part.getSubmittedFileName();
    //执行上传
    part.write(uploadPath+File.separator+fileName);
   }
  }
  //响应上传成功
  resp.getWriter().println("uplaod success");
 }
}

 

总结

 

以上所述是有点编给我们介绍的利用FormData举行Ajax请求上传文书之实例代码,希望对我们持有匡助,假设大家有任何疑窦请叫本人留言,小编会及时復苏大家之。在是为至极感谢大家对剧本的家网站的支撑!

html代码:

公可能感兴趣之篇章:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax上传</title>
    <script src="js/jquery-1.12.4.js"></script>
</head>
<body>
    <h1>文件上传</h1>
    <form id="f" enctype="multipart/form-data">
        UserName:<input type="text" name="userName"><br/>
        File1:<input type="file" name="file"><br/>
        File2:<input type="file" name="file"><br/>
        <input type="button" id="btn" value="提交">
    </form>
</body>
<script>
    $(function () {
        $("#btn").on("click",function () {
            //使用FormData对象来提交整个表单,它支持文件的上传
            var formData=new FormData(document.getElementById("f"));
            //额外带来一些数据
            formData.append("age",14);
            //使用ajax提交
            $.ajax("ajaxUpload",{
                type:"post",
                data:formData,
                processData:false,//告诉jquery不要去处理请求的数据格式
                contentType:false,//告诉jquery不要设置请求头的类型
                success:function (data) {
                    alert(data);
                }
            });
        })
    })
</script>
</html>

java后台代码:

@WebServlet("/ajaxUpload")
@MultipartConfig //开启上传功能
/**
 * @author hh
 */
public class FileUploadServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("utf-8");
        //获取用户名
        String userName=req.getParameter("userName");
        //获取年龄
        String age=req.getParameter("age");
        System.out.println(userName);
        System.out.println(age);
        //获取项目部署的绝对路径
        String uploadPath=req.getServletContext().getRealPath("/photos");
        //构建上传的文件夹
        File dir=new File(uploadPath);
        if(!dir.exists()){
            dir.mkdir();
        }
        //获取所有上传的Part
       Collection<Part> parts= req.getParts();
        for (Part part:parts) {
            //判断上传的类型是否为空,如果为空则不执行上传
            if(part.getContentType()!=null){
                //获取文件名
                String fileName=part.getSubmittedFileName();
                //执行上传
                part.write(uploadPath+File.separator+fileName);
            }
        }
        //响应上传成功
        resp.getWriter().println("uplaod success");
    }
}

 

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图