Maison > développement back-end > tutoriel php > PHP+ajax implémente un exemple de code d'effet de barre de progression de téléchargement de fichiers

PHP+ajax implémente un exemple de code d'effet de barre de progression de téléchargement de fichiers

怪我咯
Libérer: 2023-03-14 11:50:02
original
1578 Les gens l'ont consulté

La barre de progression est lorsque l'ordinateur traite une tâche, elle affiche la vitesse de traitement de la tâche, le degré d'achèvement, la taille des tâches inachevées restantes et le temps de traitement possible sous forme d'images en temps réel . Il est généralement affiché sous la forme d’une barre rectangulaire. Cet article présente principalement les informations pertinentes sur l'implémentation de la barre de progression du téléchargement de fichiers dans PHP Ajax. Les amis qui en ont besoin peuvent s'y référer Cet exemple concerne l'implémentation de la barre de progression lors du téléchargement de fichiers PHP. utilise la technologie Ajax et utilise également HTML5, les amis dans le besoin peuvent l'étudier.

Cet exemple comporte deux fichiers :

upload_form.html :

<!DOCTYPE html>
<html>
<head>
<script>
function _(el){
  return document.getElementById(el);
}
function uploadFile(){
  var file = _("file1").files[0];
  // alert(file.name+" | "+file.size+" | "+file.type);
  var formdata = new FormData();
  formdata.append("file1", file);
  var ajax = new XMLHttpRequest();
  ajax.upload.addEventListener("progress", progressHandler, false);
  ajax.addEventListener("load", completeHandler, false);
  ajax.addEventListener("error", errorHandler, false);
  ajax.addEventListener("abort", abortHandler, false);
  ajax.open("POST", "file_upload_parser.php");
  ajax.send(formdata);
}

function progressHandler(event){
  _("loaded_n_total").innerHTML = "Uploaded "+event.loaded+" bytes of "+event.total;
  var percent = (event.loaded / event.total) * 100;
  _("progressBar").value = Math.round(percent);
  _("status").innerHTML = Math.round(percent)+"% uploaded... please wait";
}

function completeHandler(event){
  _("status").innerHTML = event.target.responseText;
  _("progressBar").value = 0;
}

function errorHandler(event){
  _("status").innerHTML = "Upload Failed";
}

function abortHandler(event){
  _("status").innerHTML = "Upload Aborted";
}
</script>
</head>
<body>
<h2>HTML5 File Upload Progress Bar Tutorial</h2>
<form id="upload_form" enctype="multipart/form-data" method="post">
 <input type="file" name="file1" id="file1"><br>
 <input type="button" value="Upload File" onclick="uploadFile()">
 <progress id="progressBar" value="0" max="100" style="width:300px;"></progress>
 <h3 id="status"></h3>
 <p id="loaded_n_total"></p>
</form>
</body>
</html>
Copier après la connexion

file_upload_parser .php:

<?php
$fileName = $_FILES["file1"]["name"]; // The file name
$fileTmpLoc = $_FILES["file1"]["tmp_name"]; // File in the PHP tmp folder
$fileType = $_FILES["file1"]["type"]; // The type of file it is
$fileSize = $_FILES["file1"]["size"]; // File size in bytes
$fileErrorMsg = $_FILES["file1"]["error"]; // 0 for false... and 1 for true
if (!$fileTmpLoc) { // if file not chosen
  echo "ERROR: Please browse for a file before clicking the upload button.";
  exit();
}
if(move_uploaded_file($fileTmpLoc, "test_uploads/$fileName")){
  echo "$fileName upload is complete";
} else {
  echo "move_uploaded_file function failed";
}
?>
Copier après la connexion

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