Implémenter la fonction de téléchargement de fichiers Ajax

La colonne

Tutoriel Ajax partage le code spécifique pour le téléchargement de fichiers Ajax pour votre référence. Le contenu spécifique est le suivant

Formulaire frontal et code jsp/html JQuery

Utilisation de JQury

<script src="static/js/jquery-3.4.1.js"></script>

Formulaire frontal

<form id="form-avatar" enctype="multipart/form-data">
 <p>请选择要上传的文件：</p>
 
 <p><input type="file" name="file" /></p>
 <p><input id="btn-avatar" type="button" value="上传" /></p>
</form>

Requête ajax au serveur

<script>
 function uploadfile(){
  $.ajax({
   url : "/url/upload",
   data: new FormData($("#form-avatar")[0]),
   type : "POST",
   // 告诉jQuery不要去处理发送的数据，用于对data参数进行序列化处理 这里必须false
   processData : false,
   // 告诉jQuery不要去设置Content-Type请求头
   contentType : false,

   success : function(json) {
    alert("执行成功");
   },
   error : function(json) {
    alert("执行失败");

   }
  });
 }
 $("#btn-avatar").on("click",uploadfile);
</script>

Conroller. java

@PostMapping("/upload")
 public void fileUpload2(@RequestParam("file") CommonsMultipartFile file, HttpServletRequest request) throws IOException {
  System.out.println("走了");
  //上传路径保存设置
  String path = request.getServletContext().getRealPath("/upload");
  File realPath = new File(path);
  if (!realPath.exists()) {
   realPath.mkdir();
  }
  //上传文件地址
  System.out.println("上传文件保存地址：" + realPath);

  //通过CommonsMultipartFile的方法直接写文件（注意这个时候）
  file.transferTo(new File(realPath + "/" + file.getOriginalFilename()));

 }

Résultats

Ce qui précède est l'intégralité du contenu de cet article, j'espère qu'il sera utile à l'étude de chacun.

Recommandations d'apprentissage gratuites associées :

javascript (vidéo)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!