Implémenter la fonction de téléchargement de fichiers Ajax-js tutoriel-php.cn

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

coldplay.xixi

Libérer： 2020-12-07 17:53:15

avant

3395 Les gens l'ont consulté

La colonne

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

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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()));

 }

Copier après la connexion

Résultats