Comment faire IE8/9 soumettre input type=“file” lorsque javascript déclenché la boîte de dialogue ouvrir

J'ai été aux prises avec le même problème, et je suis encore à trouver une solution propre.

J'ai cependant découvert un travail autour de. Veuillez noter que les solutions ci-dessous ignorer complètement les pratiques exemplaires (à mon humble avis) et si quelqu'un a une meilleure, plus conforme aux normes façon de faire cela, s'il vous plaît poster ici.

La fixation de l'événement click du bouton

Après une bonne quantité de la recherche, il semble que beaucoup de gens utilisent une astuce par laquelle ils absolument position de la <input type="file" /> immédiatement sur son bouton, et réglez l'opacité à zéro. Cela signifie que, pour l'utilisateur, on dirait qu'ils sont en cliquant sur un bouton, mais le navigateur ne voit en elle qu'un clic sur le <input type="file" /> (et évite ainsi le problème dans IE). J'ai été surpris de voir que Quirksmode effectivement recommandé cette approche.

La fixation du bouton styles

Maintenant, cela ne veut introduire davantage de problèmes cosmétiques; vous pourriez trouver que vos boutons ne se déclenche plus à leur :hover et :active CSS pseudo-classes (sauf si vous avez placé le <input type="file" /> à l'intérieur de votre bouton), et que le curseur de votre souris sera probablement la valeur par défaut du curseur de la souris, en dépit de toutes les CSS que vous avez appliqué à votre <input type="file" /> ou votre bouton.

Les classes sont faciles à résoudre avec un JavaScript travail autour (je vais laisser ça pour vous), mais le curseur est toujours un problème. Étrangement, vous pouvez définir le style du cursor de la main droite path côté de la <input type="file" \>, mais cela n'affectera pas c'est Browse bouton. Malheureusement, ce (transparent) bouton sera probablement plus une partie de votre style de bouton, résultant en un curseur par défaut sur le vol stationnaire.

Pour résoudre ce problème, je suis tombé sur ce travail autour (JSFiddle ici). En gros, quelqu'un l'a lié à un événement à la mousemove cas de bouton, et placés à la droite de <input type="file" /> sous le curseur de la souris à chaque fois qu'ils passez la souris sur le bouton. Ce pourrait également être améliorée un peu, pour arrêter la <input type="file" /> d'être cliqué à partir de l'extérieur du bouton coordonne si le bouton n'a pas une taille fixe et de overflow: hidden ensemble.

Conclusion

Dans l'ensemble, j'ai trouvé que le style <input type="file" /> est juste pas la peine; il y a trop de hacks, et vous allez probablement avoir à utiliser JavaScript à un certain point, si vous le voulez vraiment regarder bien (pas génial si vous êtes à essayer d'aider les gens qui ont désactivé JavaScript). Je n'ai aucune idée de comment cela affectera mobile soit.

Si vous ciblez les navigateurs les plus récents qui prennent en charge les Html5 Fichier API, de mettre en œuvre un AJAX glisser /déposer solution (ici est un joli), et de se débarrasser de la <input type="file" /> tout à fait. Pour ceux qui ne le supportent pas (plus vieux navigateur et ceux avec le JavaScript désactivé), il suffit de laisser le non stylé <input type="file" /> il y a comme une solution de repli.