ajax implémente la fonction de téléchargement de fichiers ou d'images asynchrones

Cet article présente principalement en détail la fonction de téléchargement asynchrone de fichiers (images) d'ajax. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

Bonjour à tous, cet article je souhaite partager avec vous. le code d'une fonction de téléchargement de fichiers de 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 , d'abord nous Pour d'abord obtenir les informations sur les images téléchargées par les utilisateurs de ce site, 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 nous voulons stocker les informations du fichier maintenant. Ensuite, nous devons les 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 le gérer en conséquence et mettre L'image est enregistrée dans le dossier spécifié, le PHP correspondant doit donc effectuer 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);
 }
?>

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

Pièce jointe : si vous devez inclure d'autres informations vous concernant lors du téléchargement de fichiers, 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);
  }
  });
 });

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles connexes :

AJAX est utilisé pour déterminer si l'utilisateur est enregistré

Résoudre parfaitement l'erreur d'erreur d'analyse sous ajax requête inter-domaines

Solution au problème des points d'interrogation tronqués en chinois lors de l'utilisation d'ajax pour transmettre json à la réception

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!