web-dev-qa-db-fra.com

jQuery: comment obtenir la "valeur" du champ de saisie de téléchargement de fichier

Est-il possible de déterminer si l'utilisateur a sélectionné un fichier pour un champ de type d'entrée = "fichier" particulier à l'aide de javascript/jQuery?

J'ai développé un type de champ personnalisé pour ExpressionEngine (CMS basé sur PHP) qui permet aux utilisateurs de télécharger et de stocker leurs fichiers sur Amazon S3, mais le service d'hébergement EE le plus populaire a défini une limite de 20 pour max_file_uploads. J'aimerais autoriser l'utilisateur à téléchargez 20 fichiers, modifiez à nouveau l'entrée pour en ajouter 20 autres, etc. Malheureusement, lors de la modification de l'entrée, les 20 fichiers initiaux ont un champ de saisie "Remplacer cette image" qui semble masquer la possibilité de télécharger de nouvelles images. Je souhaite supprimer tous les champs de saisie de fichier inutilisés via javascript lors de la soumission du formulaire.

phpjavascriptjqueryformsfile-upload
13
Ty W

Oui - vous pouvez lire la valeur et même vous lier à l'événement change si vous le souhaitez.

<html>
<head>
  <title>Test Page</title>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript">
  $(function()
  {
    $('#tester').change( function()
    {
      console.log( $(this).val() );
    });
  });
  </script>
</head>

<body>

<input type="file" id="tester" />

</body>
</html>

Mais il existe d'autres solutions de téléchargement multiple qui pourraient mieux répondre à vos besoins, telles que bpeterson76.

20
Peter Bailey

Ce code supprimera toutes les entrées de fichier vides du formulaire, puis le soumettra:

HTML: 

<form action="#">
  <input type="file" name="file1" /><br />
  <input type="file" name="file2" /><br />
  <input type="file" name="file3" /><br />
  <input type="file" name="file4" /><br />
  <input type="file" name="file5" /><br />

  <input type="submit" value="Submit" />
</form>

JavaScript: 

$(function() {
  $("form").submit(function(){
    $("input:file", this).filter(function(){
      return ($(this).val().length == 0);
    }).remove();
  });
});

Exemple: http://jsbin.com/axuka3/

2
Peter Örneholm

Cet uploader a vraiment très bien fonctionné pour mes buts: http://webdeveloperplus.com/jquery/ajax-multiple-file-upload-form-us--jquery/

L’avantage de l’utiliser comme base de votre codage est que les fichiers sont téléchargés de manière asynchrone. Il n’est donc pas nécessaire de limiter leur nombre à 20 à la fois. Il existe un avantage certain pour l'interface utilisateur d'effectuer le téléchargement lorsque l'utilisateur effectue une recherche.

Le redimensionnement est une jolie fonctionnalité aussi, si vous en avez besoin!

0
bpeterson76