web-dev-qa-db-fra.com

déclencher le dialogue de téléchargement de fichier à l'aide de javascript/jquery

au lieu d'utiliser <input type="file">, est-il possible d'utiliser <input type="text">, puis de le scripter à l'aide de javascript ou de jquery, de sorte que lorsque la zone de texte est cliquée, le dialogue de téléchargement de fichier s'affiche forme)

javascriptjqueryhtmlfile-uploadtextbox
31
kamikaze_pilot

Tu veux dire quelque chose comme ca?

http://jsfiddle.net/CSvjw/

$('input[type=text]').click(function() {
    $('input[type=file]').trigger('click');
});

$('input[type=file]').change(function() {
    $('input[type=text]').val($(this).val());
});

Notez cependant que la valeur donnée par l'entrée de fichier est fausse pour des raisons de sécurité. Si vous voulez simplement que le nom du fichier apparaisse, vous pouvez couper les barres obliques.

Voici un exemple de la façon de le faire en utilisant une division de chaîne et un tableau pop:

http://jsfiddle.net/CSvjw/1/

$('input[type=text]').click(function() {
    $('input[type=file]').trigger('click');
});

$('input[type=file]').change(function() {
    var vals = $(this).val(),
        val = vals.length ? vals.split('\\').pop() : '';

    $('input[type=text]').val(val);
});

Vous pouvez ajuster cela davantage pour tenir compte des systèmes qui utilisent une barre oblique en tant que séparateur de répertoire. Il est également important de noter que si vous faites cela, vous perdrez la fonctionnalité de nombreux navigateurs modernes où les utilisateurs peuvent faire glisser des fichiers de leur ordinateur directement sur une entrée de fichier. Si j'étais vous, j'embrasserais ce paradigme en décrivant l'entrée de fichier plutôt que d'essayer de transformer une entrée de texte en quelque chose qui ne le serait pas.

81
treeface

Et si le code HTML a plusieurs entrées identiques à celle ci-dessous: -

<div class="item">
<input type="text" />
<input type="file" />
</div>
<div class="item">
<input type="text" />
<input type="file" />
</div>​​​​​​​​​​​​​​​​​​​​​

En développant la réponse de @ treeface, le code Jquery (version actuelle 1.8.0) serait:

$('input[type=text]').click(function() {
    $(this).parent(".item")
        .find('input[type=file]')
        .trigger('click');
});

$('input[type=file]').change(function() {
    $(this).parent(".item")
        .find('input[type=text]')
        .val($(this).val());
});​

Prenez note entre $ parents () et $ parent () dans jQuery. Essayez-le @ http://jsfiddle.net/afxDC/

8
Alvin K.

Ne pas utiliser display:none ou visibility:hidden initialement dans le css

Dans Jquery :

$(document).ready(function() {
 $('#file').hide(); 
 $("#elementToBeClicked").click(function(){
   $('#file').click();
 });
});
6
Raghav

Je soupçonne que, pour des raisons de sécurité, vous ne pourrez pas le faire. Il me semble me souvenir d’un certain temps en essayant de définir l’attribut value d’un élément de téléchargement de fichier, ce que vous ne pouvez pas faire car vous pourriez extraire des fichiers spécifiques de l’ordinateur d’un utilisateur sans son consentement. J'imagine que cela va s'étendre à la modification par programmation d'une zone de texte en un élément de téléchargement de fichier, car vous pouvez définir la valeur du champ de texte sur le fichier que vous souhaitez ajouter, puis changer son type en élément de téléchargement et soumettre le formulaire.

Cela devrait être une chose assez simple à essayer, bien que je pense que vous travaillez dans les limites de Javascript. Par conséquent, si vous ne pouvez pas le faire en langage JS natif, il est peu probable que vous puissiez utiliser JQuery.

J'espère que cela a du sens,

JLove

2
JLove

je pense que vous pouvez lier le texte d'entrée à une fonction jquery/javascript qui créera une entrée de fichier avec du code et que l'utilisateur peut maintenant télécharger un fichier

<input type="text" onclick="upload"/>
 jquery
 function upload(){
   $('[input type='text']').append('<input type="file"/>')
0
zedecliff