Comment détecter input type=file “changement” pour le même fichier?
Je veux mettre le feu à un événement lorsque l'utilisateur de sélectionner un fichier. De le faire avec .change
cas il fonctionne si l'utilisateur modifie le fichier à chaque fois.
Mais je veux déclencher l'événement si l'utilisateur de sélectionner à nouveau le même fichier.
- À l'utilisateur de sélectionner le fichier
A.jpg
(événement se déclenche) - À l'utilisateur de sélectionner le fichier
B.jpg
(événement se déclenche) - À l'utilisateur de sélectionner le fichier
B.jpg
(événement n'est pas le feu, je veux qu'il à feu)
Comment puis-je le faire?
Vous devez vous connecter pour publier un commentaire.
Vous pouvez vous tromper. Supprimer l'élément du fichier et l'ajouter dans la même place sur
change
événement. Il va effacer le chemin d'accès au fichier rendant changeant à chaque fois.Exemple sur jsFiddle.
Ou vous pouvez simplement utiliser
.prop("value", "")
, voir cet exemple sur jsFiddle.prop
attr
.attr("value", "")
ou.val("")
(comme suggéré par @wagner-leonardi ci-dessous) internet explorer déclenche l'événement de changement de chrome n'est pas.prop("value", "")
Si vous avez essayé
.attr("value", "")
et n'a pas de travail, pas de panique (comme je l'ai fait)il suffit de ne
.val("")
au lieu de cela, et fonctionnera très bienVous pouvez tout simplement mis à null le chemin d'accès au fichier à chaque fois que l'utilisateur clique sur le contrôle. Maintenant, même si l'utilisateur sélectionne le même fichier, le onchange événement sera déclenché.
J'ai eu ce travail en effaçant le fichier d'entrée valeur onClick puis de poster le fichier onChange. Cela permet à l'utilisateur de choisir deux fois le même fichier dans une rangée et ont encore l'événement de changement de feu de poster sur le serveur. Mon exemple utilise la le jQuery forme de plugin.
onClick
feux avantonChange
, de sorte que cette méthode fonctionne très bien pour moi.L'utilisation de l'événement onClick pour effacer la valeur de la cible d'entrée, chaque fois que l'utilisateur clique sur le terrain. Cela garantit que l'événement onChange sera lancée pour le même fichier. A fonctionné pour moi 🙂
À L'Aide De La Machine
Ce travail pour moi
VueJs solution
Inspirant de @braitsch j'ai utilisé dans mon AngularJS2
input-file-component
Ici la
onClick(event)
m'a sauvé 🙂Par défaut, la valeur de la propriété de l'élément d'entrée effacée après la sélection de fichiers si l'entrée ont plusieurs attributs. Si vous ne nettoyez pas cette propriété, alors le "changement" l'événement ne sera pas déclenché si vous sélectionnez le même fichier. Vous pouvez gérer ce problème à l'aide de
multiple
attribut.Référence
Vous ne pouvez pas faire
change
feu ici (comportement correct, puisque rien n'a changé). Cependant, vous pouvez lierclick
ainsi...mais ceci est peut-feu trop souvent...il n'y a pas beaucoup de terrain d'entente entre les deux bien que..click()
n'est pas "le feu sur la re-sélectionner".click
est aussi proche qu'il obtient.Si vous ne souhaitez pas utiliser jQuery
Il fonctionne très bien sous Firefox, mais pour Chrome, vous devez ajouter
this.value=null;
après l'alerte.Probablement la meilleure chose que vous pouvez faire est de définir la valeur à une chaîne vide. Cela l'oblige à changer le fichier à chaque fois, même si le même fichier est à nouveau sélectionnée.
<input type="file" value="" />
Vous pouvez utiliser
form.reset()
effacer le fichier d'entrée estfiles
liste.Ceci permet de réinitialiser tous les champs de valeurs par défaut, mais dans de nombreux cas, vous pouvez être en utilisant uniquement le input type= "file" (fichier dans un formulaire pour uploader des fichiers de toute façon.
Dans cette solution, il n'y a pas besoin de cloner l'élément et re-crochet événements de nouveau.
Grâce à philiplehmann
J'ai couru dans la même question, j'rouge à travers il des solutions ci-dessus, mais ils n'ont pas une bonne explication de ce qui se passe réellement.
Cette solution que j'ai écrit https://jsfiddle.net/r2wjp6u8/ ne pas faire beaucoup de changements dans l'arborescence du DOM, il vient de changer la valeur du champ de saisie. D'aspect performance, il devrait être peu mieux.
Lien pour violon: https://jsfiddle.net/r2wjp6u8/
Donc, on n'est pas à 100% d'être certain de choisir le même fichier, sauf si vous stockez chaque fichier et de les comparer par programmation.
La façon dont vous interagissez avec les fichiers (ce que JS n'lorsque l'utilisateur télécharge un fichier) est HTML5 Fichier API et JS FileReader.
https://www.html5rocks.com/en/tutorials/file/dndfiles/
https://scotch.io/tutorials/use-the-html5-file-api-to-work-with-files-locally-in-the-browser
Ces tutoriels vous montrer comment capturer et de lire les métadonnées (stockés en tant qu'objet js) lorsqu'un fichier est téléchargé.
Créer une fonction qui se déclenche 'onChange' qui va lire->magasin->comparer les métadonnées du fichier en cours contre les fichiers précédents. Ensuite, vous pouvez déclencher votre événement quand le fichier souhaité est sélectionné.
Croyez-moi, il va certainement vous aider!
Espère que cela va aider beaucoup d'entre vous les gars.