Comment télécharger des pièces jointes sans actualiser à l'aide de PHP Ajax

Cet article présente principalement le code spécifique de PHP Ajax pour implémenter la fonction de téléchargement de pièces jointes sans actualisation. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

Pour un site Web, il existe un basique et. fonction indispensable, qui est le téléchargement de fichiers. L'utilisation de la précompression PHP pour réaliser le téléchargement de fichiers présente des avantages uniques, alors aujourd'hui, effectuons un téléchargement de fichier sans actualiser.

------------------------------------------------------ ------ ------------------------------------

Forme normale

Page d'accueil

<form action="./fileupload.php" method="POST">
<p>Username<input type="text" name="username" /></p>
<p>Password<input type="password" name="password" /></p>
<p>E-mail<input type="text" name="email" /></p>
<input type="submit" value="Register" />

</form>

Traitement backend

print_r($_POST);
$username = $_POSY['username'];
$password = $_POST['password'];
$email = $_POST['email'];

// 在服务器上和数据库内容信息对比即可，实现相关的业务逻辑。

···

Formulaire avec fichier

Avec fichier Il y a une grande différence entre un formulaire et un formulaire ordinaire. Il faut d'abord déclarer un attribut sur le formulaire, comme suit :

pour indiquer au serveur que le formulaire que nous avons téléchargé contient des informations sur le fichier.

Mode d'actualisation

Quand il s'agit du mode d'actualisation, c'est-à-dire qu'après avoir cliqué sur Soumettre, la page passe à l'interface de traitement métier. Il s'agit également de la soumission des données du formulaire que nous mettons en œuvre de manière normale.

Interface frontale

<form action="./fileupload.php" enctype="multipart/form-data" method="post">
<p>Username<input type="text" name="username" /></p>
<p>Password<input type="password" name="password" /></p>
<p>E-mail<input type="text" name="email" /></p>
<p>Photo<input type="file" name="photo" /></p>

<input type="submit" value="Register" />

Backend page

En plus des données de formulaire ordinaires, la chose la plus importante dans le traitement en arrière-plan est de traiter les informations du fichier. PHP dispose d'une fonction intégrée qui peut facilement transférer les fichiers téléchargés de la zone de données temporaires vers notre dossier cible pour implémenter la logique métier de téléchargement.

move_uploaded_file('chemin du fichier temporaire','chemin du fichier cible');

Aucune méthode d'actualisation

Utiliser aucune méthode d'actualisation équivaut à en utilisant l'actualisation La seule différence dans la méthode est d'empêcher la page de sauter. Nous avons généralement deux façons d'y parvenir.
•Ajoutez return false à la fin de l'événement de soumission du formulaire.

<script>
var form = document.getElementsByTagName(&#39;form&#39;)[0];
form.onsubmit = function(){
  // to do something
  ···
  // 阻止页面跳转
  return false;
}

</script>

•Utilisez les méthodes liées à h5.

<script>
var form = document.getElementsByTagName(&#39;form&#39;)[0];
form.onsubmit = function(event){
  // to do something
  ···
  // 阻止页面跳转
  event.preventDefault();
}

</script>

D'autres traitements d'opération peuvent être cohérents avec celui avec saut.

Téléchargement de fichiers volumineux

Bien que PHP implémente son téléchargement de fichiers, il est très pratique et rapide. Mais la taille des fichiers téléchargés n’est pas illimitée. Par défaut, deux facteurs limitent la taille des fichiers que nous téléchargeons.
•Valeur extrême de la publication
•Valeur extrême du téléchargement
Nous pouvons contrôler la taille du fichier de téléchargement en modifiant manuellement les informations de configuration php.ini.

POST valeur extrême

post_max_size = 200M

télécharger la valeur extrême

upload_max_filesize=200M

Détails du téléchargement

L'objet ajax a un attribut appelé téléchargement, et le téléchargement existe également en tant qu'objet. Il a une méthode appelée onprogress. Nous pouvons surveiller cette méthode pour voir le pourcentage du processus de téléchargement de fichiers.

Page frontale

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>文件上传示例</title>
<script>
  window.onload = function(){
    var form = document.getElementsByTagName("form")[0];

    form.onsubmit = function(evt){
      // 收集表单信息
      var fd = new FormData(form);
      var ajax = new XMLHttpRequest();

      // 给Ajax设置文件上传的感知事件
      ajax.upload.onprogress = function(evt){
        var loaded = evt.loaded;
        var total = evt.total;
        document.getElementById("progress").value =(loaded/total)*100;
      }



      ajax.onreadystatechange = function() {
        if(ajax.readyState==4){
          alert(ajax.responseText);
        }
      }
      ajax.open(&#39;post&#39;,&#39;./fileupload.php&#39;);
      ajax.send(fd);
      // 阻止浏览器的跳转
      evt.preventDefault();
      //return false;
    }    
  }
</script>
</head>

<body>
<h2>无刷新方式上传附件</h2>
<form action="./fileupload.php">
<p>Username<input type="text" name="username" /></p>
<p>Password<input type="password" name="password" /></p>
<p>E-mail<input type="text" name="email" /></p>
<p>Photo<input type="file" name="photo" /></p>
<!--设置进度条-->
<style>
  #parent {width:300px;height:34px;border:1px solid #033;}
  #son {width:100%;height:10%;background-color:green}
  progress {width:100%;height:34px;}
</style>
<p id="parent">
  <p id="son">
    <progress id="progress">
  </p>

</p>


<input type="submit" value="Register" />

</form>

</body>
</html>

Traitement backend

<?php
//print_r($_POST);
//echo "---------------------"."<BR>";
//print_r($_FILES);


// 附件的存储位置、附件的名字，记得一定要存在upload文件夹
$path = "../upload/";

// 获取文件的原始名称
$origin_name = $_FILES[&#39;photo&#39;][&#39;name&#39;];
// 拼接成该文件在服务器上的名称
$server_name = $path.$origin_name;

if($_FILES[&#39;photo&#39;][&#39;error&#39;]>0) {
  die("出错了！".$_FILES[&#39;photo&#39;][&#39;error&#39;]); 
}
if(move_uploaded_file($_FILES[&#39;photo&#39;][&#39;tmp_name&#39;],$server_name)){
  echo "<BR>"."Upload Success!";
}else{
  echo "<BR>"."Upload Failed!".$_FILES[&#39;photo&#39;][&#39;error&#39;];  
}
?>

N'oubliez pas de vous assurer de l'existence et du chemin du dossier de téléchargement.

Résumé

Le téléchargement de fichiers est une fonction très basique, et elle n'est pas très compliquée à mettre en œuvre. Mais cette fonction est très importante. Nous pouvons facilement modifier l'avatar de l'utilisateur et d'autres informations sur les fichiers via le téléchargement de fichiers.

Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.

Recommandations associées :

phpExplication graphique et textuelle détaillée sur la façon d'obtenir le nombre de jours et les tableaux de dates du mois en cours en fonction de l'année et mois

Implémentation PHP du téléchargement multi-images combinée à l'analyse des idées du plug-in uploadify

Acquisition de l'implémentation PHP Comment spécifier le jour de la semaine

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!