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

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

亚连
Libérer: 2018-05-22 09:49:24
original
1589 Les gens l'ont consulté

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>
Copier après la connexion


1. Lier les événements aux boutons


$("upload").click(ajaxUpload);
Copier après la connexion


2. Récupérez le fichier


var file1 = $("#file1")[0].files[0];
var file2 = $("#file2")[0].files[0];
Copier après la connexion


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);
Copier après la connexion


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


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


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);
  }
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal