[AJAX] Barre de progression ajax et import csv php/mysql
Bonjour,
Je suis en train de faire un import de fichier csv de liste de numéro.
J'ai des longues listes à gérer (10 000, 30 000 résultats) et j'aimerai mettre en place une barre de progression via javascript et ajax pendant le processus.
J'ai écumé pendant une journée des nombreuses pages, et si on trouve des infos sur les progress bar d'upload en revanche impossible de trouver beaucoup de chose concernant les progress bar de script.
J'ai donc mixé quelques choses glanées par ci par là...mais cela ne fonctionne pas.
En effet ma barre de progression ne s'affiche qu'à la fin du processus et à 100%.`
Voici l'architecture :
J'ai une page test.php qui rassemble mon code ajax d'appel de script php dont voici le code.
L'idée est que lorsque je clique sur IMPORT le script ajax se lance.
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
| <?php
require("session.php");
require("connexion.php");
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
<title>Progress Bar</title>
</head>
<script type='text/javascript' src='mod/js/jquery-2.0.2.js'></script>
<script type="text/javascript" src="mod/js/jquery-ui.js"></script>
<script type='text/javascript'>
$(document).ready(function() {
$("#import_2").click(function (event) {
$("#import_2").attr('class', 'vert');
$('div#display_import').empty(); // we empty the div to display the result (in case of old result)
// Début traitement ajax
$.ajax({
type: "POST",
url: "testtest.php",
data: "fonction=importok",
success: function(msg){
$('div#display_import').fadeIn(); // Fade in on the result div
$("div#display_import").append(msg); // display the result of the div
}
});
});
});
</script>
<body>
<div style="margin:10px 10px 10px 10px;width: 150px; height: 20px;">
<label id="import_2" style="width: 150px; height: 20px;padding-left: 10px; cursor: pointer;" class="">
<span style="vertical-align: 0px; margin-right: 10px;"><img id="img_tous" src="images/icone-bouton-gris.png" width="10" height="10" style="margin-right: 5px;" /> <strong>IMPORT</strong></span>
</label>
</div>
<div id="display_import" class="texte_13">
</div>
</body>
</html> |
Et ma page testtest.php avec le script php qui va insérer dans ma base mysql les résultats précédemment regroupé dans array sauvegardé en variable de session et afficher la barre de progression
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
| <?php
require("session.php");
require("connexion.php");
if(isset($_POST['fonction']) and $_POST['fonction']=="importok")
{
echo '<div id="progress" style="width:500px;border:1px solid #ccc;"></div>';
echo '<div id="information" style="width"></div>';
// Total processes
$data=$_SESSION['listeok']; // Mon tableau array avec l'ensemble de mes résultats provenant de mon fichier csv (10 000 résultats environ)
$total=count($data);
// début de ma boucle
for($i=1; $i<=$total; $i++)
{
// Calculate the percentation
$percent = intval($i/$total * 100)."%";
// Javascript for updating the progress bar and information
echo '<script language="javascript">
document.getElementById("progress").innerHTML="<div style=\"width:'.$percent.';background-color:#ddd;\"> </div>";
document.getElementById("information").innerHTML="'.$i.' row(s) processed.";
</script>';
// Insertion du résultat dans ma bdd
$req=("INSERT INTO contact VALUES('".$i."','', '".$numero[$i]."','','','','','','','0')");
$doins = mysql_query($req) or die(mysql_error());
// This is for the buffer achieve the minimum size in order to flush data
echo str_repeat(' ',1024*64);
// Send output to browser immediately
flush();
}
// Tell user that the process is completed
echo '<script language="javascript">document.getElementById("information").innerHTML="Process completed"</script>';
}
?> |
Merci pour votre aide !
