Wie verwendet man einen Link anstelle der normalen Dateieingabetaste für Explorer-Dateien und Ordner

Question

Ich würde gerne einen Link erstellen, der beim Klicken auf den Datei-/Ordner-Explorer anstelle der üblichen Dateieingabe (Datei-Explorer-Schaltfläche) automatisch zeigt in Webseiten verwendet. Ist das wirklich möglich?

Die einzige Möglichkeit, die ich geschafft habe, ist die Verwendung der Bootstrap FileStyle, die aber immer noch eine Taste ist, die besser aussieht als die Standard-WW3-Eingabeschaltfläche.

<script type="text/javascript" src="js/bootstrap-filestyle.min.js"> </script> 

Via JavaScript:

$(":file").filestyle({badge: false}); 

Via Datenattribute:

<input type="file" class="filestyle" data-badge="false"> 

Answer 1

du kein gültiges HTML ist

<input id="input_file" type="file" style="display:none;"> 
<a href="#"><label for="input_file">Trigger the file input</label></a> 

Obwohl, Verpackung ein Etikett mit einem Anker verwenden können. Ich empfehle die Verwendung von jQuery oder Javascript, um die Aufgabe zu erledigen.

Hier ist das Beispiel mit jQuery zu erreichen, was Sie wollen.

$(document).ready(function(){ 
 
    $("#trigger-input-file").click(function(){ 
 
    $('input[type="file"]').trigger("click"); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<input type="file" id="input-file" style="display:none;"> 
 

 
<a href="#"><label for="input-file">Trigger input file without script</label></a><br><br> 
 
<a href="#" id="trigger-input-file">Trigger input file with the jQuery script</a>

Hope this Hilfe! Prost!

Answer 2

Sie etwas tun können:

<input id="file" type="file"> 

dieser

und für die Explorer-Link-Datei:

<a href="#"><label for="file">test</label></a> 

hier ist eine Demo: https://jsfiddle.net/1qztex41/

Als @Jandroide erwähnen, verwenden #file { display: none; }

Answer 3

sicher. Maske über Eingang

div { 
 
    position: relative; 
 
    } 
 
label { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
} 
 
a { 
 
    background-color: #fff; 
 
    display: block; 
 
    width: 200px; 
 
    height: 30px; 
 
    pointer-events: none; 
 
    line-height: 30px; 
 
    text-align: center; 
 
}

<div> 
 
    <input type="file" id="qwe"> 
 
    <label for="qwe"><a href="">Select a file</a></label> 
 
</div>