怎么在FormData中利用Ajax请求上传文件

发布时间:2021-05-17 16:51:19 作者:Leah
来源:亿速云 阅读:179

这篇文章将为大家详细讲解有关怎么在FormData中利用Ajax请求上传文件,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。

Servlet3.0开始提供了一系列的注解来配置Servlet、Filter、Listener等等。这种方式可以极大的简化在开发中大量的xml的配置。从这个版本开始,web.xml可以不再需要,使用相关的注解同样可以完成相应的配置。

a.选中上传

怎么在FormData中利用Ajax请求上传文件

b:后台显示

怎么在FormData中利用Ajax请求上传文件

c:上传的文件夹

怎么在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>
 <h2>文件上传</h2>
 <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请求上传文件就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。

推荐阅读:
  1. ajax利用FormData、FileReader实现多文件上传php获取
  2. 怎么在JavaScript中使用FormData类上传文件

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

formdata ajax

上一篇:如何使用yii2多图上传组件

下一篇:如何在CSS中使用placeholder-shown伪类实现输入框浮动文字效果

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》