Récupération de données JSON avec formulaire
J'ai un souci pour récupérer des données json lorsque j'ajoute un formulaire, alors que jusque là ça marche.
Je suis en train d'essayer de faire un explorateur de fichiers, le plus simple possible. Le but est d'avoir un répertoire avec les images utilisées dans les articles du site. On doit pouvoir uploader des images, les déplacer, les copier, les effacer, etc.
Il y a deux fichiers, l'index avec le html et le jQuery, et l'autre avec le php, ajax.php.
La zone où s'affichent les icônes représentant les dossiers et les fichiers est un bloc <div id="explorer">, vide au niveau du fichier html.
Lorsqu'on arrive sur la page, l'initialisation de jQuery appelle ajax.php qui lit le contenu du répertoire par défaut et renvoie le résultat en format JSON. Si on fait un simple clic sur un dossier ou fichier, l'élément est sélectionné au niveau jQuery ajax.php n'est alors pas concerné). Un double-clic sur un dossier appelle ajax.php en passant l'url du dossier cliqué (pour les fichiers, ce n'est pas encore implémenté).
Schématiquement, ajax.php est comme ça:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <?php
header('Content-type: application/json') ;
...
// Soit il n'y a pas de variable de passée (affichage par défaut),
// soit une variable 'url' a été passé, qui représentente le répertoire
// sur lequel on a cliqué.
if(isset($_REQUEST['url'])){
$actualdir=realpath($_REQUEST['url']) ;
}else{$actualdir=ROOT ;}
...
// On lit les fichiers et répertoires se trouvant à l'url passée
foreach($scanresult =scandir($actualdir) as $key => $filestring){
...
}
...
// On prépare l'objet JSON et on le renvoie
$response=array(...)
echo json_encode($response) |
Jusqu'ici, tout va bien. Je peux naviguer dans l'arborescence du répertoire réservé aux images pour les articles. Mais, lorsque j'ajoute un formulaire, soit pour uploader des fichiers, soit pour créer un répertoire, l'appel à ajax.php ne se passe pas bien. Les tâches (upload ou création de dossier) s'effectuent correctement, mais ajax.php, au lieu de renvoyer l'objet comme il l'a fait jusqu'ici, l'affiche comme si j'avais oublié la ligne header('Content-type: application/json') .
Pour tester la requête, le code devient le suivant :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| // Soit on a soumis le formulaire newfolder ($_REQUEST['newfolder']),
// soit celui de téléchargement de fichiers ($_FILES['uploadedfile']),
// soit on a cliqué sur un dossier ($_REQUEST['url']), soit on est dans
// la situation par défaut.
if (isset($_REQUEST['newfolder'])){
$actualdir=realpath($_REQUEST['currentdir']) ;
$newdir = $_REQUEST['newfoldername'] ;
mkdir($actualdir . "/" . $newdir, 0777, true) ;
}elseif(isset($_FILES['uploadedfile'])){
$actualdir=realpath($_REQUEST['currentdir']) ;
if(move_uploaded_file(...){
$message="Le upload a marché." ;
}else{$message="Le upload n'a pas marché. ..."}
}elseif(isset($_REQUEST['url'])){
$actualdir=realpath($_REQUEST['url']) ;
}else{$actualdir=ROOT ;} |
Quelqu'un saurait s'il y a quelque chose de particulier à faire lorsqu'il s'agit de formulaires ?
Voici des extraits de index.php :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <!doctype html>
...
<body>
<div id="content">
...
<div id="explorer"></div>
<div id="manager">
<form enctype="multipart/form-data" action="ajax.php" method="post" id="uploadimg">
...
</form>
<form action="ajax.php" method="post" name="folder" id='folder'>
...
</form>
</div>
</div>
... |
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
| $(function(){
//$("#explorer").load("ajax.php",
//function(response,status,XMLHttpRequestObject){
$.post('ajax.php', function(data){
$("#explorer").html(data.fileslist) ;
$(".currentdir").val(data.actualdir) ;
$("body").on('click', "#explorer img", function(event){
event.preventDefault() ;
$('#file').html($(this).attr('src')) ;
$('#explorer figure').removeClass('selected');
var figure = $(this).parent().parent() ;
figure.addClass('selected');
})
$("body").on('dblclick', "#explorer a", function(event){
event.preventDefault() ;
var hrefurl = $(this).attr('href') ;
$('#directory').html(hrefurl) ;
$.post('ajax.php', {url:hrefurl}, function(data){
//$("#explorer").load("ajax.php", {url:hrefurl},
//function(response,status,XMLHttpRequestObject){}) ;
$("#explorer").html(data.fileslist) ;
$(".currentdir").val(data.actualdir) ;
})
})
//$("input[name=newfolder]").on("click", {newfolder:data.actualdir}, function(event){
//$("body").on("click", "input[name=newfolder]", function(event){
$("#form").on('submit',{newfolder:data.actualdir}, function(event){
console.log(event) ;
event.preventDefault() ;
$.post('ajax.php', {newfolder:data.actualdir}, function(data){
//$.getjson('ajax.php', {newfolder:data.actualdir}, function(data){
console.log(data);
$("#explorer").html(data.fileslist) ;
$(".currentdir").val(data.actualdir) ;
})
})
if(data.message != ""){$("#message").html(data.message);}
}) ;
}); |
J'hésite à mettre le code en entier ... Si ça peut aider ...
