Boîte de dialogue Ouvrir un fichier en JavaScript

J'ai besoin d'une solution pour afficher la boîte de dialogue d'ouverture de fichier en HTML tout en cliquant sur un fichier div. La boîte de dialogue d'ouverture de fichier doit s'ouvrir lorsque l'utilisateur divclique sur.

Je ne souhaite pas afficher la zone du fichier d'entrée dans le cadre d'une page HTML. Il doit être affiché dans une boîte de dialogue séparée, qui ne fait pas partie de la page Web.

En voici une belle

Démo Fine Uploader

C'est un <input type='file' />contrôle en soi. Mais un div est placé dessus et des styles css sont appliqués pour obtenir cette sensation. L'opacité du contrôle de fichier est définie sur 0 pour qu'il apparaisse que la fenêtre de dialogue s'ouvre en cliquant sur le div.

    $("#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, ajoutez ceci:

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

Je ne sais pas pourquoi personne ne l'a signalé, mais voici un moyen de le faire sans Javascript et il est également compatible avec n'importe quel navigateur.

EDIT: Dans Safari, le inputest 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 préférez, vous pouvez aller dans le "bon sens" en utilisant fordans le labelpointant vers idl'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 cela avec l'opacité, la visibilité, le <input>style, etc. Jetez un coup d'œil:

<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. Cela ne fonctionnait pas 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 de fichier directement au-dessus de l'élément sur lequel cliquer, de sorte que tout clic atterrirait soit sur celui-ci, soit sur son étiquette (ce qui fait apparaître 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 sortait du côté de l'étiquette, donc overflow: hiddensur l'entrée et display: inline-blocksur l'étiquette étaient nécessaires.

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éclenche l'événement de clic par défaut par HTML. Donc, il déclenche par défaut l'événement de clic, 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 désactivé.

JsFiddle de travail (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 de script , ajoutez simplement ces fonctions ci-dessus.

Dans votre corps ou votre formulaire, ajoutez des balises:

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

Peu importe où dans votre html, c'est comme si vous avez créé une nouvelle instance de type classe OpenFileDialog en tant que variable globale , dont le nom est l' id de l'élément, peu importe où dans votre code ou xaml, mais dans votre script ou code , vous ne pouvez 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'identifiant de l'entrée masquée type = "file" qui est le nom de l'instance OpenFileDialog sous forme de chaîne.

Pour vous faciliter la vie dans la création d'instances de dialogues de fichiers ouverts dans 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 souhaitez supprimer la boîte de dialogue de fichier ouvert, vous pouvez créer 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 d'ouverture de 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 de fichier ouvert dans le corps ou les balises de formulaire dans le html, car il s'agit d'ajouter des entrées masquées type = "file" s, vous pouvez le faire dans le script en utilisant la fonction de création 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 balises de formulaire, vous avez ajouté:

onload="yourBodyOrFormId_onload()"

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

CONSEIL: Vous pouvez ajouter à votre projet ou site Web un nouveau fichier JScript, si vous ne l'avez pas encore fait, et dans ce fichier, vous pouvez mettre toutes les fonctions de dialogue de fichier ouvert à l'écart des balises de script et de la page HTML ou du formulaire Web, et utiliser les dans votre page de formulaire html ou Web à partir de ce fichier JScript, mais n'oubliez pas avant de lier la page de formulaire html ou Web au fichier JScript bien sûr. Vous pouvez le faire simplement en faisant glisser le fichier JScript sur votre page html dans la têteMots clés. 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 qu'elle fonctionne. N'oubliez pas de définir la variable globale dans ce fichier JScript, dont la valeur sera votre corps ou l'identifiant de formulaire sous forme de 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 identifiant de formulaire. Ensuite, dans le fichier JScript, vous n'avez plus à donner au document l'identifiant du corps ou de la forme d'une page, donnez-lui simplement la valeur de cette variable. Vous pouvez appeler cette variable bodyId ou formId ou bodyOrFormId ou tout autre nom de votre choix .

Bonne chance, mec!

Le moyen le plus simple:

#file-input {
  display: none;
}

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

Ce qui est important, l'utilisation de display: nonegarantit qu'aucune place ne sera occupée par l'entrée de fichier caché (ce qui se passe avec opacity: 0).

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

Le seul sans <input type="file">est en incorporant une animation flash transparente sur le div. Vous pouvez ensuite utiliser un événement de clic généré par l'utilisateur (conforme aux nouvelles règles de sécurité de Flash 10) pour déclencher un appel à FileReference.browse de flash .

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

Peut utiliser

$('<input type="file" />').click()