Utilisation de l'objet FormData et Spring MVC pour implémenter la fonction de téléchargement de fichiers Ajax (tutoriel graphique)

Cet article présente principalement l'utilisation des objets FormData et Spring MVC pour implémenter la fonction de téléchargement de fichiers Ajax. Les amis dans le besoin peuvent se référer à

Téléchargement de fichiers Ajax.

Utilisation de l'objet FormData et Spring MVC pour implémenter la fonction de téléchargement de fichiers Ajax :

Étapes

1. et préparez le script statique

<dependency>
 <groupId>commons-fileupload</groupId>
 <artifactId>commons-fileupload</artifactId>
 <version>1.3.2</version>
</dependency>
  <h1>Ajax 文件上载</h1>
  <input type="file" id="file1"> <br>
  <input type="file" id="file2"> <br>
  <input type="button" id="upload" value="上载" >
  <p id="result"></p>

1. Lier les événements aux boutons

$("upload").click(ajaxUpload);

2. Récupérez le fichier

var file1 = $("#file1")[0].files[0];
var file2 = $("#file2")[0].files[0];

3. objet Form en mémoire et ajoutez les données transmises au serveur

//创建内存中的表单对象
var form = new FormData();
//向其中添加要传输的数据
form.append("userfile1", file1);
form.append("userfile2", file2);

4.ajax() objet de téléchargement

$.ajax({
  url:'user/upload.do',//请求地址
  data: form,   //请求参数
  type: 'POST',  //请求类型
  dataType: 'json',//服务器返回的数据类型
  contentType: false,//没有设置任何内容类型头信息
  processData: false, //见jQuery_api详解
  success: function(obj){ //成功时回调函数,obj表示服务器返回的数据
    if(obj.state==0){
      $('#result').html("成功!"); 
    }
  }
});

5. Couche de présentation Spring-MVC

@RequestMapping("/upload.do")
@ResponseBody
public JsonResult upload( 
    MultipartFile userfile1, 
    MultipartFile userfile2) throws Exception{
  //Spring MVC 中可以利用 MultipartFile 
  //接收 上载的文件! 文件中的一切数据
  //都可以从 MultipartFile 对象中找到
  //获取上再是原始文件名
  String file1 = 
    userfile1.getOriginalFilename();
  String file2 = 
    userfile2.getOriginalFilename();
  System.out.println(file1);
  System.out.println(file2);
  //保存文件的3种方法:
  //1. transferTo(目标文件)
  //  将文件直接保存到目标文件, 可以处理大文件
  //2. userfile1.getBytes() 获取文件的全部数据
  //  将文件全部读取到内存, 适合处理小文件!!
  //3. userfile1.getInputStream()
  //  获取上载文件的流, 适合处理大文件
  //保存的目标文件夹: /home/soft01/demo
  File dir = new File("D:/demo");
  dir.mkdir();
  File f1 = new File(dir, file1);
  File f2 = new File(dir, file2);
  //第一种保存文件
  //userfile1.transferTo(f1);
  //userfile2.transferTo(f2);
  //第三种 利用流复制数据
  InputStream in1 = userfile1.getInputStream();
  FileOutputStream out1 = 
    new FileOutputStream(f1);
  int b;
  while((b=in1.read())!=-1){
    out1.write(b);
  }
  in1.close();
  out1.close();
  InputStream in2 = userfile2.getInputStream();
  FileOutputStream out2=
      new FileOutputStream(f2);
  byte[] buf= new byte[8*1024];
  int n;
  while((n=in2.read(buf))!=-1){
    out2.write(buf, 0, n);
  }
  in2.close();
  out2.close();
  return new JsonResult(true);
  }

Ci-dessus, je l'ai compilé pour tout le monde. J'espère qu'il sera utile à tout le monde à l'avenir.

Articles connexes :

Collection de codes de requête AJAX basée sur apicloud (absolument détaillé)

Native JS implémente Ajax cross- domain request flask Contenu de la réponse (tutoriel graphique)

Méthode de détection Ajax pour le piratage de sites Web

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!