webentwicklung-frage-antwort-db.com.de

So machen Sie einen Link als Dateieingabe

Ich habe einen Link

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

Und wenn Sie darauf klicken, möchte ich, dass es als Dateieingabe dient

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

Wie würde ich das schaffen?

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

folgendes wird das Problem gelöst

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

Sie können ein verstecktes <input>-Tag haben, das Sie dann $('#upload').click() aufrufen können, um einen Klick zu simulieren.

Oder Sie können ein verstecktes <input>-Tag mit einer ID haben und dann einfach ein Label-Attribut zu Ihrem Link hinzufügen.

2
Ivan

nur HTML

Hier ist eine ziemlich einfache Antwort, die ohne CSS, Javascript/jQuery und ohne Framework-Infrastruktur auskommt.

<label>
  <input type="file" style="display: none;">
  <a>Upload Photo link</a>
</label>

oder noch einfacher

<label>
  <input type="file" style="display: none;">
  Upload Photo link
</label>
1
Jamie Armour

BEARBEITET:

Diese Demo anzeigen: 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;
}

ODER 

Sie können Nice-Plugins wie folgt verwenden: 

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

0
Ahsan Rathod

Sie können dies auch ohne Javascript tun. Browserübergreifende Lösung mit dem 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

In Angular 6 können Sie Folgendes tun:

<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>

Wenn Sie auf das li html-Tag klicken, wird der Klick der Eingabeschaltfläche ausgelöst. Das Attribut "hidden" macht unsichtbar.

0