jQuery File Upload Ne fonctionne pas sur Safari

Question

J'ai un bouton qui, lorsqu'on clique sur Chrome ou Firefox ou Edge, affiche la fenêtre du navigateur de fichiers où je peux ensuite sélectionner un fichier et terminer le téléchargement du fichier. Cependant, lorsque je clique sur le bouton dans Safari, rien ne se passe - la fenêtre du navigateur de fichiers n'apparaît pas. Je cours sous Windows 10 et j'ai installé une version Windows de Safari.

Button:

<a href="javascript:void(0)" id="uploadFile">Upload File</a> 

Handler:

 $(document).ready(function() { 
      $("#uploadFile").click(function() { 
       $("#uploadFileHandle").click(); 
       $('html,body').css('cursor','progress'); 
       var formdata = false; 
       if (window.FormData) { 
        formdata = new FormData(); 
       } 
       $("#uploadFileHandle").on("change", function() { 
        $('html,body').css('cursor','progress'); 
        var i = 0, len = this.files.length, file; 
        file = this.files[0]; 
        formdata.append("fileUpload", file) 
        if (formdata) { 
         csrftoken(); 
         $.ajax({ 
          url: "/profile/uploadFile", 
          type: "POST", 
          data: formdata, 
          processData: false, 
          contentType: false, 
          success: function (response) { 
           if (response.success) { 
            var res = response.file; 
            $('html,body').css('cursor','default'); 
           } 
          } 
         }) 
        } 
       }); 
      }); 
     }); 

Toutes les idées sur la façon d'obtenir la fenêtre du navigateur de fichier apparaît lorsque le bouton Télécharger le fichier est cliqué dans Safari?

Answer 1

Je crois que, pour des raisons de sécurité, certains navigateurs vont se plaindre de l'activation programmée des boîtes de dialogue de téléchargement de fichiers.

Au lieu d'une balise a, essayez d'utiliser la balise label avec un for attribut correspondant à l'ID de votre fichier d'entrée de téléchargement, comme ceci:

<label for="uploadFileHandle">Upload File</label> 

Lorsqu'un label a un attribut for, cliquer dessus automatiquement également cliquer sur l'élément qui a un ID correspondant. Ce comportement n'est pas bloqué par les navigateurs que je connais et cela va aussi alléger votre javascript.

body { 
 
    padding: 25px; 
 
} 
 

 
#uploadFile { 
 
    transition: all .2s ease-in-out; 
 
    text-transform: uppercase; 
 
    text-align: center; 
 
    padding: 10px 20px; 
 
    background-color: #2ecc71; 
 
    border: 2px solid #2ecc71; 
 
    color: #ffffff; 
 
    font-family: sans-serif; 
 
    cursor: pointer; 
 
} 
 

 
#uploadFile:hover { 
 
    background-color: #ffffff; 
 
    color: #2ecc71; 
 
} 
 

 
#uploadFileHandle { 
 
    visibility: hidden; 
 
}

<label for="uploadFileHandle" id="uploadFile">Upload File</label> 
 
<input type="file" id="uploadFileHandle">

Answer 2

figured it out grâce à un commentaire sur ce post: How to open a file/browse dialog using javascript?

Je suis désolé de quitter sur une ligne importante dans ma question initiale:

<input type="file" class="displayNone" id="uploadFileHandle"> 

Apparemment, Safari n'aime pas class = "displayNone" sur l'élément d'entrée. Je l'ai fait en supprimant la classe displayNone et en la stylisant différemment pour masquer l'élément. Merci à tous pour vos réponses!