web-dev-qa-db-fra.com

Comment faire un lien agir comme une entrée de fichier

J'ai un lien,

<a id="upload-file">Upload your photo</a>

Et si je clique dessus, je veux qu'il agisse comme une entrée de fichier de navigation

<input id="upload-file" type="file"/>

Comment pourrais-je accomplir ceci?

javascriptjqueryhtmlcss
34
David542

HTML

<input id="upload" type="file"/>
<a href="" id="upload_link">Upload your photo</a>​

CSS

#upload{
    display:none
}

JS

$(function(){
    $("#upload_link").on('click', function(e){
        e.preventDefault();
        $("#upload:hidden").trigger('click');
    });
});

DEMO.

70
The Alpha

ce qui suit va résoudre le problème

html

<input id="upload-file" type="file"/>
<a id="fileupload">Upload your photo</a>

css

#upload-file{
    display: none;
}​

js

$("#fileupload").click(function(){
    $("#upload-file").click();
});​

http://jsfiddle.net/WXBKj/

6
Chamika Sandamal

Vous pouvez avoir une balise <input> masquée sur laquelle vous pouvez ensuite appeler $('#upload').click() afin de simuler un clic.

Ou bien, vous pouvez avoir une balise <input> masquée avec un identifiant, puis ajouter un attribut label à votre lien.

2
Ivan

ÉDITÉ:

Voir cette démo: http://jsfiddle.net/rathoreahsan/s6Mjt/

JQUERY:

$("#upload").click(function(){
    $("#upload-file").trigger('click');
});

HTML

<a href="javascript:void(0)" id="upload">Upload your photo</a>
<input id="upload-file" type="file"/>

CSS

#upload-file {
    display:none;
}

OU 

Vous pouvez utiliser les plugins Nice comme ceci: 

http://blueimp.github.com/jQuery-File-Upload/

0
Ahsan Rathod

Vous pouvez le faire sans Javascript comme ça. solution inter-navigateur avec l'attribut for:

DEMO

HTML

<label for="inputUpload" class="custom-file-upload">Upload your file</label>
<input id="inputUpload" type="file" />

CSS

#inputUpload {
    display: none;
}

.custom-file-upload {
    cursor: pointer;
    font-size: inherit;
    color: #0c090d;
}

.custom-file-upload:hover {
    text-decoration: underline;
}

DEMO

0
Benjamin Arthuys

Dans Angular 6, vous pouvez faire comme ça,

<li class="list-group-item active cursor-pointer" (click)="file.click()">
    <i class="fas fa-cloud-upload-alt"></i> Upload <input type="file" #file hidden />
  </li>

Lorsque vous cliquez sur une balise HTML, le clic du bouton de saisie est déclenché. L'attribut " hidden " rend invisible.

0
Günay Gültekin