En JavaScript est-il possible de lancer un navigateur de fichier boîte de dialogue par programmation?

Au lieu d'utiliser le <input type="file"> étiquette, je voudrais avoir un bouton qui lance un navigateur de fichier boîte de dialogue.

Ma première pensée a été d'avoir un fichier caché balise d'entrée et d'un bouton. J'aimerais utiliser le bouton cliquez sur le bouton pour tirer le onclick du fichier caché d'entrée, mais je n'ai pas été en mesure de faire ce travail correctement.

La question est donc, est-ce même possible? Et le deuxième est-il une plus belle façon de le faire et toujours être en mesure d'envoyer les informations dans un formulaire?

Ce sera la couche de fond de dégradation de la fonctionnalité (à partir de Flash à JavaScript (notre site ne fonctionne pas sans JS)), de sorte qu'il a à travailler avec base en JS et HTML.

Il a travaillé pour moi... voir ma réponse ci-dessous. C'est peut-être une compatibilité avec les navigateurs chose. Cette question est de 6 ans.

OriginalL'auteur user28655 | 2008-10-16

  1. 11

    Oui, c'est possible (dans la plupart des navigateurs) par l'intermédiaire de l'opacité. Voici un tutoriel.

    Notez que c'est un problème de sécurité et des mesures peuvent être prises pour éviter cela dans le futur.
    Possible? Oui. Recommandé? Pas de. Problème de sécurité? Certainement.
    J'ai vérifié et il n'a pas tout à fait ce que je veux. Et avec le potentiel de sécurité/dépréciation des questions que je ne vais pas l'utiliser. Merci pour la réponse.
    Comment est-ce un problème de sécurité? Il vous permet de contrôler la présentation de la sélection de fichier UI widget. Cela dépend toujours de l'action de l'utilisateur.
    Il est appelé le clickjacking et peut être utilisé pour rendre les gens à cliquer sur des choses comme invisible Facebook Comme des boutons.

    OriginalL'auteur ceejayoz

  2. 1

    Ce que j'ai fait (voir ceejayoz réponse) dans le passé, mais maintenant vous recommandons contre elle. C'est un problème de sécurité et ne peut pas être invoqué pour l'avenir. Une bien meilleure solution est de renforcer progressivement votre formulaire de téléchargement afin que le fichier d'entrée est remplacé par un Flash ou Java uploader avec des fonctionnalités en plus (ou mieux utiliser les fonctionnalités de HTML 5 si elles sont disponibles).

    Avant d'utiliser le flash ou une applet java, vous devez toujours utiliser la forme ordinaire.
    c'est ce que j'ai dit dans ma réponse: "renforcer progressivement" signifie que l'on commence avec le HTML et de l'améliorer sur le côté client (JS, Flash, peu importe) après charge.

    OriginalL'auteur eyelidlessness

  3. 1

    Au lieu d'essayer de pirater le navigateur de fichier de contrôle d'entrée, je vous conseille d'utiliser un flash à base de fichier uploader comme SWFUpload. J'ai commencé à utiliser un de mes projets et ont été TRÈS heureux avec elle.

    Vous obtenez javascript rappels et vous pouvez faire ce que vous voulez pour une INTERFACE utilisateur (le flash est tout simplement le téléchargement de fonctionnalité).

    OriginalL'auteur Daniel Beardsley

  4. 1

    Je préfère éviter la transparence des tours.

    Cela a fonctionné pour moi (utilise jQuery):

    $("#upload-box").change(function(){
    $("#upload-click-handler").val($(this).val());
});
$("#upload-click-handler").click(function(){
    $("#upload-box").click();
});

    Et le code HTML:

    <input id="upload-box" style="visibility:hidden;height:0;" name="Photo" type="file" />
<input id="upload-click-handler" type="text" readonly />

    Il crée une entrée de texte, et un caché de téléchargement d'entrée, et des correctifs (=lignes) cliquer sur la saisie de texte la face cachée du fichier d'entrée.

    Lorsqu'un fichier est sélectionné, il écrira le nom du fichier dans la saisie de texte, en ligne avec ce que la plupart des utilisateurs s'attendent à partir de l'interface.

    Doit travailler sur FF, Chrome, IE9 et +. Je n'ai pas le tester sur IE8.

    Voici un jsfiddle. Merci pour upvoting ma réponse si vous le souhaitez.

    il retourne uniquement le nom de fichier mais comment obtenir le chemin d'accès complet au fichier, comme c:/test.png
    vous ne pouvez pas obtenir le chemin d'accès complet et il ne serait pas utile de toute façon. Vous pouvez lire le fichier avec un FileReader objet si vous voulez voir les données binaires du fichier (ce qui vous permet de convertir toutes les autres données, selon les besoins).

    OriginalL'auteur Rolf