2011-08-20 3 views
3

Cela fonctionne dans FF6 et IE 7, 8 et 9, mais pas Chrome/Safari ou Opera:Comment ouvrir l'invite de téléchargement de fichier lorsque vous cliquez sur un lien texte?

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> 

    <script type="text/javascript"> 
     $(function() { 

      $('#uploadFile').click(function(e) { 
       $('#fileUploadField').click(); 
       e.preventDefault(); 
      }); 

     }); 
    </script> 

    <input type="file" name="something" style="display: none" id="fileUploadField" /> 
    <a href="" id="uploadFile">Upload File</a> 

Je devine que cela est dû à des restrictions de sécurité du navigateur. Est-ce que quelqu'un sait d'une solution de navigateur croisé pour y parvenir?

Répondre

7

Vous ne pouvez pas invoquer un clic sur un élément caché, c'est une restriction de sécurité. Au lieu de display: none, utilisez plutôt opacity: 0. Cela semble fonctionner. Il s'agit d'un fiddle. Je vois le dialogue de sélection de fichier avec FF6 sur Win 7, Chrome 13 sur Win 7/Mac OS X 10.6.8 et Safari 5 sur Mac OS X 10.6.8

+0

Awsome, ne connaissait pas le ne pas être autorisé à invoquer cliquer sur la règle cachée. Au lieu de l'opacité j'ai utilisé: visibilité: caché; position: absolue; puisque opcity est une propriété css3 et n'est donc pas supportée par JC23

1

Même s'il n'y a pas "display: none", il a gagné Ne travaillez pas dans IE8. Dès que vous cliquez sur Envoyer, IE8 supprime les données dans le champ de saisie de fichier et ne soumet pas le formulaire. Essayez le code suivant en tant que php:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
    <head> 
    <title>IE8-Test</title> 
    <script type="text/javascript" src="js/jquery-1.6.4.min.js"></script> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
    <script type="text/javascript"> 
     $('#btn').live('click', function(){ 
     $('#file').click(); 
     }) 
    </script> 
    </head> 
    <body> 
    <form action="test.php" method="POST" enctype="multipart/form-data"> 
     <input id="file" type="file" name="image" class="image"/> 
     <div id="btn">Click me to do a js click on the input type=file button.</div> 
     <input id="submit" type="submit" name="formsubmit" value="Upload"/> 
    </form> 
    <br/> 
    <br/> 
    <br/> 
    <?php 
     if(isset($_POST['formsubmit'])){ 
     echo '<div>POST-Data</div>'; 
     echo '<pre>'; 
     var_dump($_POST); 
     var_dump($_FILES); 
     echo '</pre>'; 
     } 
    ?> 
    </body> 
</html> 
Questions connexes