Ouvrir la boîte de dialogue fichier en JavaScript

    $("#logo").css('opacity','0');
    
    $("#select_logo").click(function(e){
       e.preventDefault();
       $("#logo").trigger('click');
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="select_logo">Select Logo</a> <input type="file" id="logo">

Pour IE ajouter ceci:

$("#logo").css('filter','alpha(opacity = 0');

Je ne sais pas pourquoi personne ne l'a souligné, mais voici une façon de le faire sans Javascript et il est également compatible avec n'importe quel navigateur.

EDIT: dans Safari, le {[2] } est désactivé lorsqu'il est masqué avec display: none. Une meilleure approche serait d'utiliser position: fixed; top: -100em.

<label>
  Open file dialog
  <input type="file" style="position: fixed; top: -100em">
</label>

, Si vous le préférez, vous pouvez aller de l' "manière correcte" en utilisant for dans le label pointant vers la id de l'entrée comme ceci:

<label for="inputId">file dialog</label>
<input id="inputId" type="file" style="position: fixed; top: -100em">

En fait, vous n'avez pas besoin de tout ce genre de choses avec opacité, visibilité, <input> style, etc. Il suffit de jeter un oeil:

<a href="#">Just click me.</a>
<script type="text/javascript">
    $("a").click(function() {
        // creating input on-the-fly
        var input = $(document.createElement("input"));
        input.attr("type", "file");
        // add onchange handler if you wish to get the file :)
        input.trigger("click"); // opening dialog
        return false; // avoiding navigation
    });
</script>

Démo sur jsFiddle . Testé dans Chrome 30.0 et Firefox 24.0. N'a pas fonctionné dans Opera 12.16, cependant.

C'est ce qui a le mieux fonctionné pour moi (testé sur IE8, FF, Chrome, Safari).

#file-input {
  cursor: pointer;
  outline: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  overflow: hidden;
  filter: alpha(opacity=0); /* IE < 9 */
  opacity: 0;
}
.input-label {
  cursor: pointer;
  position: relative;
  display: inline-block;
}

<label for="file-input" class="input-label">
  Click Me <!-- Replace with whatever text or icon you wish to use -->
  <input type="file" id="file-input">
</label>

Explication: J'ai positionné l'entrée du fichier directement au-dessus de l'élément à cliquer, de sorte que tous les clics atterriraient sur lui ou son étiquette (qui tire vers le haut la boîte de dialogue de téléchargement comme si vous aviez cliqué sur l'étiquette elle-même). J'ai eu quelques problèmes avec la partie bouton de l'entrée par défaut qui sort du côté de l'étiquette, donc overflow: hidden sur l'entrée et display: inline-block sur l'étiquette étaient nécessaire.

Que faire si javascript est désactivé sur la machine des clients? Utilisez la solution suivante pour tous les scénarios. Vous n'avez même pas besoin de javascript / jQuery. :

HTML

<label for="fileInput"><img src="File_upload_Img"><label>
<input type="file" id="fileInput"></label>

CSS

#fileInput{opacity:0}  
body{
    background:cadetblue;
}

Explication : for="Your input Id" . Déclencheurs cliquez sur événement par défaut par HTML. Donc, par défaut, il déclenche l'événement click, pas besoin de jQuery / javascript. Si c'est simplement fait par HTML pourquoi utiliser jQuery / jScript? Et vous ne pouvez pas dire si le client a désactivé JS. Votre fonctionnalité devrait fonctionner même si JS est activé hors.

Travail jsFiddle (Vous n'avez pas besoin de JS , jquery)

Ajoutez D'abord les balises head :

<script>
   function showDialog(openFileDialog) {
       document.getElementById(openFileDialog).click();
   }
   function fileName(openFileDialog) {
       return document.getElementById(openFileDialog).value;
   }
   function hasFile(openFileDialog) {
       return document.getElementById(openFileDialog).value != "";
   }
   function fileNameWithoutFakePath(openFileDialog) {
       var fileName = document.getElementById(openFileDialog).value;
       return fileName.substr(fileName.lastIndexOf('\\') + 1);
   }
   function fakePathWithoutFileName(openFileDialog) {
       var fileName = document.getElementById(openFileDialog).value;
       return fileName.substr(0, fileName.lastIndexOf('\\'));
   }
</script>

Si vous avez déjà des balises script , ajoutez simplement ces fonctions ci-dessus.

Dans votrecorps ouformulaire ajouter des balises:

<input type="file" style="display:none" id="yourDesiredOrFavoriteNameForTheNewOpenFileDialogInstance"/>

Peu importe où dans votre html, est juste comme ça Vous avez créé une nouvelle instance de type classe OpenFileDialog en tant que variable globale, dont le nom est le id de l'élément, peu importe où dans votre code ou xaml, Mais dans votre script ou code, vous ne peut pas taper son nom, puis lire une propriété ou appeler une fonction, car il existe des fonctions globales qui font celles qui ne sont pas définies dans l'élément input type = "file". Il vous suffit de donner à ces fonctions l'id de l'entrée cachée type="file" qui est le nom de L'instance OpenFileDialog en tant que chaîne.

Pour vous faciliter la vie en créant des instances de dialogue de fichiers ouverts sur votre html, vous pouvez créer une fonction qui le fait:

function createAndAddNewOpenFileDialog(name) {
     document.getElementById("yourBodyOrFormId").innerHtml += "<input type='file' style='display:none' id='" + name + "'/>"
}

Et si vous voulez supprimer ouvrir le fichier dialogue, alors vous pouvez faire et utiliser la fonction suivante:

function removeOpenFileDialog(name) {
    var html = document.getElementById("yourBodyOrFormId").innerHtml;
    html = html.replace("<input type='file' style='display:none' id='" + name + "'/>", "");
    document.getElementById("yourBodyOrFormId").innerHtml = html;
}

Mais avant de supprimer la boîte de dialogue Ouvrir un fichier, assurez-vous qu'elle existe en créant et en utilisant la fonction suivante:

function doesOpenFileDialogExist(name) {
    return document.getElementById("yourBodyOrFormId").innerHtml.indexOf("<input type='file' style='display:none' id='" + name + "'/>") != -1
}

Et si vous ne voulez pas créer et ajouter les boîtes de dialogue open file dans les balises body ou form dans le html, car cela ajoute un type d'entrée caché = "fichier", vous pouvez le faire en script en utilisant la fonction create ci-dessus:

function yourBodyOrFormId_onload() {
    createAndAddNewOpenFileDialog("openFileDialog1");
    createAndAddNewOpenFileDialog("openFileDialog2");
    createAndAddNewOpenFileDialog("openFileDialog3");
    createAndAddNewOpenFileDialog("File Upload");
    createAndAddNewOpenFileDialog("Image Upload");
    createAndAddNewOpenFileDialog("bla");
    //etc and rest of your code
}

Assurez-vous que près de votre corps ou des étiquettes de forme, vous ajouté:

onload="yourBodyOrFormId_onload()"

Vous n'avez pas à faire cette ligne ci-dessus, si vous ne l'avez déjà.

Astuce: Vous pouvez ajouter à votre projet ou site web un nouveau fichier JScript, si vous n'en avez pas encore, et dans ce fichier vous pouvez placer toutes les fonctions de dialogue Ouvrir le fichier loin des balisesscript et de la page html ou web form, et les utiliser dans votre page html ou web form à partir de ce fichier JScript, mais n'oubliez pas avant de lier la page html ou web form au fichier JScript bien sûr. Vous pouvez le faire juste en faisant glisser le fichier JScript vers votre page html dans les balises head . Si votre page est un formulaire web et non un simple html, et que vous n'avez pas de balises head, placez-la n'importe où pour que cela puisse fonctionner. N'oubliez pas de définir une variable globale dans ce fichier JScript, dont la valeur sera votre identifiant de corps ou de formulaire en tant que chaîne. Après avoir lié le fichier JScript à votre page de formulaire html ou web, vous pouvez charger l'événement de votre corps de formulaire, définir la valeur de cette variable sur votre corps ou votre id de formulaire. Puis dans le JScript Fichier, vous n'avez plus à donner au document l'id du corps ou de la forme d'une page, il suffit de lui donner la valeur de cette variable. Vous pouvez appeler cette variable bodyId ou formId ou bodyOrFormId, ou tout autre nom que vous voulez.

Bonne chance mec!

Peut-être que vous pourriez être intéressé cette: http://code.google.com/p/upload-at-click/

Au clic sur l'élément sera ouvert' ouvrir le fichier ' dialogue et

Exécuter une fonction personnalisée.

AFAIK vous avez toujours besoin d'un élément <input type="file">, alors vous pouvez utiliser certaines des choses de quirksmode pour le styliser

Le seul sans <input type="file"> est en intégrant un film Flash transparent sur le div. Vous pouvez ensuite utiliser un événement click généré par L'utilisateur (conforme aux nouvelles règles de sécurité de Flash 10) pour déclencher un appel à FileReference de flash.parcourir.

Il offre une dépendance supplémentaire sur la manière quirksmode mais en retour, vous obtenez beaucoup plus d'événements (tels que les événements intégrés).

Le moyen le plus simple:

#fileInput {
  display: none;
}

<label for="fileInput">
  <div>Click this div and select a file</div>
</label>
<input type="file" id="fileInput"/>

Ce qui est important, en utilisant display: none assure qu'aucune place ne sera occupée par l'entrée de fichier caché (que se passe-t-il en utilisant opacity: 0).