web-dev-qa-db-fra.com

Comment appeler une fonction JavaScript après avoir sélectionné un fichier dans la fenêtre Sélectionner un fichier et l'avoir fermé?

J'ai un élément d'entrée de fichier

<input type="file" id="fileid">

Comment appeler une fonction JavaScript après avoir sélectionné un fichier dans la boîte de dialogue et l'avoir fermé?

javascriptjqueryhtml
37
coderex

jQuery("input#fileid").change(function () {
    alert(jQuery(this).val())
});
35
mike clagg
<input type="file" id="fileid" >

le changement fonctionnera lorsque vous placerez le script sous l'entrée

<script type="text/javascript">
$(document).ready(function(){
    $("#fileid").on('change',function(){
        //do whatever you want
    });
});
</script>
8
user1899563
<script>
       function example(){
               alert('success');
       }
</script>


<input type="file" id="field" onchange="example()" >
6
Eng Cy

Essayez de déclarer en haut de votre fichier:

<script type="text/javascript">
  // this allows jquery to be called along with scriptaculous and YUI without any conflicts
  // the only difference is all jquery functions should be called with $jQ instead of $
  // e.g. $jQ('#div_id').stuff instead of $('#div_id').stuff
  $jQ = jQuery.noConflict();
</script>

puis:

<script language="javascript">   
$jQ(document).ready(function (){
    jQuery("input#fileid").change(function () {
        alert(jQuery(this).val());
    });
});

(vous pouvez mettre les deux dans la même balise <script>, mais vous pouvez simplement déclarer la première partie de votre modèle parent et utiliser $ jQ chaque fois que vous utilisez jQuery dans vos modèles enfants, ce qui est très utile lorsque vous utilisez RoR par exemple)

comme mentionné dans les commentaires dans une autre réponse, cela ne se déclenche qu'après avoir sélectionné un fichier et cliqué sur Ouvrir. Si vous cliquez simplement sur "Choisir un fichier" et ne sélectionnez rien, cela ne fonctionnera pas

0
marimaf

Ce code testé vous aide à:

$("body").on('change', 'input#fileid',function(){
    alert($(this).val());});
0
mehdi

Je pense que votre objectif est réalisable, mais, autant que je sache, aucun événement de ce type ne ressemble à cela.

Mais pour y parvenir, vous devez coopérer avec 3 événements, Je suppose que vous devez simplement connaître le nom du fichier . J'ai créé walk around here

  1. Tout d’abord, l’événement de modification qui vient de se déclencher lorsque le changement réel se produit. La sélection du même fichier ne déclenchera pas l’événement de modification; ouvrez donc le dialogue et annulez-le.
  2. Cliquez ensuite sur choisir le fichier pour que l'élément d'entrée devienne actif. Lorsque la boîte de dialogue de fichier contextuelle ouverte, l'élément d'entrée perd le focus. 
  3. Lorsque la boîte de dialogue de fichier contextuelle est fermée, l'élément d'entrée récupère son focus.
  4. Vous pouvez donc exécuter la validation côté client côté client lorsque l'élément en entrée perd le focus "à nouveau". 
0
Adi Prasetyo