Exemple de partage d'implémentation ajax de 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 de fichiers (images) asynchrone. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer.

Comme nous le savons tous, la plupart des grands sites Web disposent désormais de fonctions 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 pour une utilisation ultérieure. Cependant, un fichier de page Web Comment définir. 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 d'un formulaire et l'autre de la soumission asynchrone via ajax. Cependant, un problème avec la soumission d'un formulaire est que l'interface sera actualisée à chaque fois. 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 obtenir Pour 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 que nous voulons stocker les informations du fichier maintenant, et ensuite nous devons l'utiliser. La requête ajax est soumise à l'arrière-plan :

  //创建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 gérer en conséquence et enregistrez l'image dans le dossier spécifié. Le PHP correspondant devrait 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 du fichier. télécharger. Si vous souhaitez télécharger vos photos préférées sur la 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);
  }
  });
 });

Recommandations associées :

Explication détaillée du chargeur de fichiers asynchrone js

Code php Ajax pour implémenter le fichier asynchrone upload_PHP Tutorial

Exemple de code sur la façon d'implémenter le téléchargement de fichiers asynchrone via Ajax dans les compétences php_php

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!