Comment télécharger des fichiers et des images de manière asynchrone avec ajax

Cette fois, je vais vous montrer comment utiliser ajax pour télécharger des fichiers et des images de manière asynchrone. Quelles sont les précautions pour qu'ajax télécharge des fichiers et des images de manière asynchrone. Voici un cas pratique, jetons un coup d'œil.

Bonjour à tous, dans cet article je souhaite partager avec vous le code de la fonction téléchargement de fichiers d'une page Web. J'espère que vous pourrez avoir une référence ou me donner quelques suggestions.

Comme nous le savons tous, la plupart des grands sites Web disposent aujourd'hui d'une fonction de téléchargement de fichiers. Les utilisateurs peuvent enregistrer leurs photos ou autres fichiers préférés en ligne afin de pouvoir les retrouver facilement lorsqu'ils seront utilisés ultérieurement. page Comment configurer la fonction de téléchargement ? Aujourd'hui, je vais prendre le téléchargement d'images comme exemple pour vous montrer les étapes spécifiques de la fonction de téléchargement de fichiers.

En fait, il existe deux façons de télécharger des fichiers, l'une à partir de la soumission par formulaire et l'autre par soumission asynchrone via ajax. Cependant, il y a un problème avec la soumission du formulaire. L'interface sera actualisée à chaque fois. fois que le téléchargement est terminé, ce qui ne peut pas être réalisé. Téléchargement asynchrone, donc maintenant presque tous les sites Web utilisent le téléchargement asynchrone ajax. Je vais maintenant vous montrer comment implémenter le téléchargement asynchrone ajax.

Je crée d'abord un formulaire, le code est le suivant :

 <form action="" id="form">
  用户名：<input type="text" name="user"/></br>
  密码：<input type="password" name="pass" /></br>
  性别：<input type="radio" name="sex" value="男"/>男
   <input type="radio" name="sex" value="女"/>女
  头像：<input type="file" id="file" name="file"/></br>
  <button id="btn" type="button">提交</button>
 </form>
 <p class="con"></p>

Une fois la création terminée, nous devons d'abord obtenir les informations de l'image téléchargée par l'utilisateur à partir de ce site Web, le code est le suivant

var imgs=[];//存储图片链接
 //为文件上传添加change事件
 var fileM=document.querySelector("#file");
 $("#file").on("change",function(){
  console.log(fileM.files);
  //获取文件对象，files是文件选取控件的属性，存储的是文件选取控件选取的文件对象，类型是一个数组
  var fileObj=fileM.files[0];
  //创建formdata对象，formData用来存储表单的数据，表单数据时以键值对形式存储的。
  var formData=new FormData();
  formData.append('file',fileObj);

Le formData ici est l'objet dans lequel nous voulons stocker les informations du fichier maintenant, et nous devons ensuite le soumettre en arrière-plan à l'aide d'une requête ajax :

  //创建ajax对象
  var ajax=new XMLHttpRequest();
  //发送POST请求
  ajax.open("POST","http://localhost/phpClass/file-upload/move_file.php",true);
  ajax.send(formData);
  ajax.onreadystatechange=function(){
  if (ajax.readyState == 4) {
   if (ajax.status>=200 &&ajax.status<300||ajax.status==304) {
   console.log(ajax.responseText);
   var obj=JSON.parse(ajax.responseText);
   alert(obj.msg);
   if(obj.err == 0){、
    //上传成功后自动动创建img标签放在指定位置
    var img =$("<img src=&#39;"+obj.msg+"&#39; alt=&#39;&#39; />");
    $(".con").append(img);
    imgs.push(obj.msg);
   }else{
    alert(obj.msg);
   }
   }
  }
  }
 });

Ensuite, une fois notre demande réussie, l'arrière-plan doit effectuer le traitement correspondant et enregistrer l'image dans le dossier spécifié, le PHP correspondant doit donc terminer ces opérations :

<?php
//解决跨域问题
header("Access-Control-Allow-Origin:*");
//说明向前台返回的数据类型为JSON
header("Content-type:text/json");
//$_FILES超全局变量存储是文件数据，是一个关联数组
 $fileObj=$_FILES[&#39;file&#39;];
 var_dump($fileObj);
 if($fileObj["error"]==0){
 //判断文件是否合法
 $types=["jpg","jpeg","png","gif"];
 $type = explode("/", $fileObj["type"])[1];
 if(in_array($type, $types)){
  $time = time();//获取时间戳 返回一个整形
  //获取文件详细路径
  $filePath="http://localhost/phpClass/image1".$time.".".$type;
  echo $filePath;
  //移动文件
  $res=move_uploaded_file($fileObj["tmp_name"],"../image1/".$time.".".$type);
  if($res){
  $infor=array("err"=>0,"msg"=>"文件移动成功");
  }else{
  $infor=array("err"=>1,"msg"=>"文件移动失败");
  }
 }else{
  $infor=array("err"=>1,"msg"=>"文件格式不合法");
 }
 echo json_encode($infor);
 }
?>

De cette façon, nous avons terminé toutes les étapes de téléchargement de fichiers. Si vous souhaitez télécharger les images que vous aimez sur votre propre page Web, j'espère que ce code pourra vous aider !

Pièce jointe : si vous devez joindre d'autres informations vous concernant lors du téléchargement d'un fichier, il vous suffit d'ajouter ce code une fois la demande de page frontale terminée :

//完成form表单数据的提交
 $('#btn').on('click',function(){
//  serializeArray()将form表单控件中的数据序列化成数组,数组中含有若干对象,对象包含对应控件的name和value
  var infor = $('#form').serializeArray();
//  console.log(infor);
  var stu = {};
  for (var i=0;i<infor.length;i++) {
  var obj=infor[i];
  stu[obj.name] = obj.value;
  }
  stu["imgs"] = imgs;
  stu["imgs"] = imgs[0];
  //发送ajax请求
  $.ajax({
  url:"http://localhost/phpClass/file-upload/data.php",
  data:{
   parameter :JSON.stringify(stu)
  },
  success:function(res){
   console.log(res.msg);
  }
  });
 });

Croyez-le ou pas Après avoir lu le cas dans cet article, vous maîtrisez la méthode. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP !

Lecture recommandée :

jQuery implémente l'actualisation asynchrone

Comment les problèmes jQuery obtiennent et publient des requêtes sur le serveur

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!