Je ajoute une fonctionnalité d'importation de fichier à une page existante.
Je veux faire cela en utilisant JavaScript et sans modifier la page, c'est-à-dire. Sans ajouter le "type d'entrée =" Fichier "" "Tag, tout le monde semble parler de.
J'ai ajouté le bouton, je souhaite maintenant que l'événement affiche la boîte de dialogue Fichier, l'utilisateur à parcourir le fichier et JavaScript pour soumettre le fichier au serveur pour la validation.
Comment puis-je faire ça? BTW, la priorité principale est la boîte de dialogue Ouverture du fichier, donc pas besoin d'un utilisateur ou d'une pièce soumise, si vous ne le connaissez pas.
thx
4 Réponses :
Eh bien, si je comprends bien ce que vous voulez, c'est un peu comme celui-ci ... cacher le fichier fichier code> et appeler la boîte de dialogue de fichier avec un autre objet . Droite? P> myClickHandler() {
var f = document.createElement('input');
f.style.display='none';
f.type='file';
f.name='file';
document.getElementById('yourformhere').appendChild(f);
f.click();
}
button.onclick = myClickHandler
Quelque chose comme ça, oui, mais de préférence sans avoir à utiliser des étiquettes du tout. Je suis codé sur une application existante et je ne suis actuellement pas autorisé à modifier les sites trop.
Les éléments DOM n'ont pas de méthode "Cliquez"
Merci. Utilisé votre JavaScript comme source d'inspiration et proposé avec: Var Element = Document.Createeelement ("Entrée"); élément.settattribute ("ID", "ImportsFile"); élément.setattribute ("type", "fichier"); element.setattribute ("style", "Visibilité: cachée;"); Ensuite, ajout de clic-événement dans la méthode d'appel et la boîte de dialogue apparaît :-)
@ I.Devries Vérification Maintenant, je vois que cela ne fonctionne tout simplement pas dans Chrome.
J'ai caché mon premier bouton comme celui-ci Le suivant déclenche le fichier d'entrée: Qui déclenche mon deuxième bouton: (j'ai utilisé une icône)
Utilise toujours
Voici un moyen de le faire sans JavaScript et il est également compatible avec chaque navigateur, y compris mobile.
BTW, dans safari, l'entrée code> est désactivée lorsqu'il est caché avec Affichage: Aucune code>. Une meilleure approche serait d'utiliser la position : fixe; TOP: -100EM CODE>. P>
<label for="inputId">file dialog</label>
<input id="inputId" type="file" style="position: fixed; top: -100em">
fonctionne pour moi: puis: