IE nécessite un double clic avec le bouton personnalisé

J'ai un script qui est plongé:

HTML:

<div id="wrapper">
     <div id="container">
        <div id="button">Click me!</div>
        <form>
            <input type="file" />
        </form>
      </div>
     <div id="notice">File is uploaded!</div>
</div>

JavaScript(JQuery 2):

$(document).ready(function () {
    $("input").on("change", function () {
       $("div#notice").fadeIn();
        //$("form").submit(); //If you want it to submit on your site uncomment this
    });
 });

CSS:

div#wrapper {
    background-color: #ccc;
    position: absolute;
    width: 300px;
    height: 200px;
}
div#wrapper > form > input {
    color: rgba(0, 0, 0, 0);
    zoom: 1;
    filter: alpha(opacity=0);
    opacity: 0;
    color: rgba(0, 0, 0, 0);
 }
div#container {
    width: 200px;
    height: 20px;
    overflow: hidden;
}
div#button, input {
    position: absolute;
    top: 0px;
    left: 0px;
    cursor: pointer;
 }
div#button {
    z-index: 1;
    background-color: #AAA;
 }
input {
    z-index: 2;
    background-color: rgba(0, 0, 0, 0);
    opacity: 0;
    alpha: filter(opacity=0);
    font-size: 25px;
    color: rgba(0,0,0,0);
    filter: alpha(opacity=0);
    zoom: 1;
 }
div#notice
{
    background-color: green;
    display: none;
    position: absolute;
    bottom: 0px;
    left: 0px;
 }

Remarque: Ce problème était là avant que le flou a été mis à masquer l'icône qui clignote dans IE.

Dans Chrome et Firefox, le bouton ne nécessite qu'un seul clic. Dans IE 10, il nécessite un double-clic, que je ne veux pas. Je suis en train de réfléchir à un moyen de le faire seul clic.

La seule chose que j'ai essayé jusqu'à présent est à .render("click") sur l'entrée, mais cela ne fonctionne pas.

JSFiddle: http://jsfiddle.net/plowdawg/mk77W/

source d'informationauteur Travis Pessetto

J'ai eu le même problème et trouvé une approche différente. Je viens de bouton être aussi grand que j'ai besoin avec une taille de police. Alors personne ne peut tout simplement pas cliquez sur la section de texte.

<div class="divFileUpload">
    <input class="fileUpload" type="file" />
</div>

et css:

.divFileUpload {
    background-color: #F60;
    border-radius: 5px;
    height: 50px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    position: relative;
    width: 50%
}
.fileUpload {
    cursor: pointer;
    font-size: 10000px; /* This is the main part. */
    height: 100%;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%
}

5

De poursuivre ce SDLion dit....

Ce pourrait être ce que vous voyez

Mais vraiment en plus de cela il y a un fichier de contrôle de téléchargement, qui a été rendue transparente.

En cliquant sur le bouton parcourir apporte le téléchargement de fichier boîte de dialogue avec un seul clic.
Dans internet explorer, Vous devez double-cliquez sur la zone de texte à gauche de celui-ci si vous voulez voir le téléchargement de fichier boîte de dialogue.

Augmentation de la taille du fichier de saisie pour remplir l'image du bouton
0

Le "double clic" qui se passe sur la partie texte de l'upload d'un fichier, comme @TravisPessetto déclaré.

Puisqu'il n'est pas possible de masquer/supprimer la partie texte du fichier de contrôle d'entrée, je vous recommande de mettre régulièrement un bouton au dessus de l'entrée de fichier.

Voir ici pour plus de détails.
0

J'ai trouvé une autre solution plus simple, simplement déclencher l'événement "click" sur mousedown pour cet élément uniquement:
```
$("input").mousedown(function() {
    $(this).trigger('click');
})
```
afin d'éviter des problèmes sur d'autres navigateurs, appliquer cette solution à seulement IE:
```
if ($.browser.msie && parseInt($.browser.version, 10) > 8) {
    $("#your_file_input").mousedown(function(event) {
        if (event.which == 1) {
            $(this).trigger('click');
        }
    })
}
```
voici votre jfiddle modifié, le vérifier sur IE 9 et 10:
http://jsfiddle.net/7Lq3k/

Edit: exemple modifié afin de limiter la gestion des événements de gauche, cliquez sur uniquement
(voir: Comment faire la distinction entre gauche et droite de la souris, cliquez avec jQuery pour plus de détails)

J'ai mélangé plusieurs solutions pour obtenir celui-ci qui fonctionne pour moi (sur tous les navigateurs). Elle est écrite en utilisant MOINS de nidification.

HTML

<!--/* Upload input */-->
<div class="input-file">
  Select image
  <input type="file" />
</div>

MOINS CSS

/*
* Input "file" type Styling
* Based on http://goo.gl/07sCBA
* and http://stackoverflow.com/a/21092148/1252920
*/
.input-file {
  position: relative;
  overflow: hidden;
  margin: 10px;

  input[type="file"] {
    opacity: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
    padding: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
    font-size: 10000px;
  }

  //For Chrome
  input[type=file]::-webkit-file-upload-button {
    cursor: pointer;
  }
}

Vous devez vous connecter pour publier un commentaire.