HTML5 API de fichiers et AJAX

Question

J'utilise un script qui tire parti de l'API de fichiers HTML5 et utilise AJAX pour envoyer le fichier à un fichier de téléchargement php. Le problème que je suis est qu'il a été écrit (je pense ..) pour gérer plusieurs téléchargements, car il existe plusieurs boucles d'itération pour traiter tous les fichiers.

Peut-être que c'est une question trop simple mais est-il possible de faire ce seul fichier seulement? Qu'est-ce qui se passe est que je vais choisir un fichier dans le navigateur à envoyer, puis cliquez sur le bouton de téléchargement, et il télécharge sans actualiser la page. Si je reste sur la page et que je télécharge un second fichier, il télécharge le même fichier deux fois de suite. Cela continuera pour toujours.

Voici comment les fichiers sont préparés:

var files; 

    // Grab the files and set them to our variable 
    function prepareUpload(event) 
    { 
     files = event.target.files; 

    } 

Je THNK je lis pour ajouter des fichiers [0] à la fin, mais qui brise la fonction de téléchargement (il appelle le succès, mais rien est en fait téléchargé).

En ce qui concerne les boucles d'itération qui sont la preuve que cela est censé être un Uploader multifichier:

function uploadFiles(event) 
    {var data = new FormData(); 
       $.each(files, function(key, value) 
       { 
        data.append(key, value); 
       }); 



function submitForm(event, data) 
    {$.each(data.files, function(key, value) 
       { 
        formData = formData + '&filenames[]=' + value; 
        console.log(value); 
       }); 

Ce que je suis confus sur ce que type de variable est des fichiers? Est-ce un tableau d'objets? Je ne peux pas trouver cette information dans mes recherches.

PHP:

if (isset($_FILES)) { 
if(isset($_GET['files'])) 
{ 
    $error = false; 
    $files = array(); 
    $uploaddir = '../uploads/'; 


     foreach($_FILES as $file) 
     { 
      if(move_uploaded_file($file['tmp_name'], $uploaddir .basename($file['name']))) 
      { 
       $files[] = $uploaddir .$file['name'];     
      }else{ 
       $error = true; 
      } 
     } 
    $data = ($error) ? array('error' => 'There was an error uploading your files') : array('files' => $files); 
}else{ 
    $data = array('success' => 'Form was submitted', 'formData' => $_POST);  
}}echo json_encode($data); 

Answer 1

Il est techically un fileList, un objet semblable à un tableau.

De la documentation:

Un objet de ce type est retourné par les fichiers propriété de l'élément d'entrée HTML ; cela vous permet d'accéder à la liste des fichiers sélectionnés avec l'élément. Il est également utilisé pour une liste de fichiers déposés dans le contenu Web lors de l'utilisation de l'API glisser-déposer; Voir l'objet DataTransfer pour plus de détails sur cette utilisation.

https://developer.mozilla.org/en-US/docs/Web/API/FileList

Pour effacer l'entrée après le téléchargement, le clone et le remplacer pour garder le gestionnaire d'événements, mais perdre la valeur

function submitForm(event, data) { 
    $.each(data.files, function(key, value) { 
     formData = formData + '&filenames[]=' + value; 
    }); 

    $.ajax({ 
     // upload stuff 
    }).done(function() { 
     var clone = $(event.target).clone(true); 
     $(event.target).replaceWith(clone); 
    }); 
}