web-dev-qa-db-fra.com

événement on change pour l'élément input de fichier

J'ai 4 entrées de fichier que je veux qu'ils déclenchent le processus de téléchargement lorsque leur valeur est modifiée .. Je veux dire, lorsque vous sélectionnez une image et cliquez sur Ouvrir dans la boîte de dialogue Sélectionner une image, le script permettant de télécharger l'image est déclenché. J'ai utilisé l'événement onchange mais je pense que ce n'est pas le bon événement:

JS: 

$("input[type=file]").on('change',function(){
    alert(this.val());//I mean name of the file
});

HTML: 

<div class="form-group col-md-11 col-md-offset-1">
    <input type="file" name="photos[]">
    <input type="file" name="photos[]">
    <input type="file" name="photos[]">
    <input type="file" name="photos[]">
</div>

Que devrais-je faire?

javascriptjqueryhtmlupload
19
Ramin

L’événement OnChange est un bon choix. Mais si un utilisateur sélectionne la même image, l'événement ne sera pas déclenché car la valeur actuelle est la même que la précédente. 

L'image est la même avec une largeur modifiée, par exemple, et elle devrait être téléchargée sur le serveur. 

Pour éviter ce problème, vous pouvez utiliser le code suivant:

$(document).ready(function(){
    $("input[type=file]").click(function(){
        $(this).val("");
    });

    $("input[type=file]").change(function(){
        alert($(this).val());
    });
});
19
Humberto Corrêa

Utilisez la liste de fichiers files de l'élément au lieu de val()

$("input[type=file]").on('change',function(){
    alert(this.files[0].name);
});
8
techfoobar

Donne une classe unique et un identifiant différent pour l'entrée de fichier

           $("#tab-content").on('change',class,function()
               {
                  var id=$(this).attr('id');
                      $("#"+id).trigger(your function); 
               //for name of file input  $("#"+id).attr("name");
               });
1
AAA

Pour les personnes souhaitant utiliser l’événement onchange directement sur l’entrée de fichier, définissez onchange="somefunction(), exemple de code provenant de le lien :

<html>
<body>
    <script language="JavaScript">
    function inform(){
        document.form1.msg.value = "Filename has been changed";
    }
    </script>
    <form name="form1">
    Please choose a file.
    <input type="file" name="uploadbox" size="35" onChange='inform()'>
    <br><br>
    Message:
    <input type="text" name="msg" size="40">
    </form>
</body>
</html>
0
yu yang Jian