it-swarm.com.de

datei-Upload-Dialog mit Javascript/Jquery auslösen

ist es nicht möglich, <input type="file"> zu verwenden, können Sie <input type="text"> verwenden und dann mit JavaScript oder Jquery ein Skript erstellen, sodass beim Klicken auf das Textfeld der Datei-Upload-Dialog angezeigt wird .... (und er wird tatsächlich hochgeladen, wenn er in ein bilden)

31
kamikaze_pilot

Du meinst so etwas?

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());
});

Beachten Sie jedoch, dass der von der Dateieingabe angegebene Wert aus Sicherheitsgründen gefälscht ist. Wenn nur der Dateiname angezeigt werden soll, können Sie die Schrägstriche ausschneiden.

Hier ein Beispiel, wie Sie dies mit einem String-Split und einem Array-Pop tun:

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);
});

Sie können dies weiter anpassen, um Systeme zu berücksichtigen, die einen Schrägstrich als Verzeichnistrennzeichen verwenden. Beachten Sie außerdem, dass Sie dadurch die Funktionalität vieler moderner Browser verlieren, in denen Benutzer Dateien von ihrem Computer direkt auf eine Dateieingabe ziehen können. Wenn ich Sie wäre, würde ich dieses Paradigma annehmen, indem Sie die Dateieingabe gestalten, anstatt zu versuchen, eine Texteingabe in etwas umzuwandeln, das sie nicht ist.

81
treeface

Und wenn der HTML-Code identische mehrfache Eingaben wie die folgende hat: -

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

Wenn Sie die Antwort auf @ treeface erweitern, lautet der Jquery-Code (aktuelle Version 1.8.0):

$('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());
});​

Beachten Sie in jQuery zwischen $ eltern () und $ parent (). Probieren Sie es aus @ http://jsfiddle.net/afxDC/

8
Alvin K.

Verwenden Sie display:none oder visibility:hidden zunächst nicht in der CSS

In Jquery :

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

Ich habe den Verdacht, dass Sie dies aus Sicherheitsgründen nicht tun können. Ich scheine mich an eine Weile zu erinnern, als ich versuchte, das value-Attribut eines Datei-Upload-Elements festzulegen, was Sie nicht tun können, da Sie bestimmte Dateien ohne Zustimmung von einem Computer eines Benutzers abrufen könnten. Ich könnte mir vorstellen, dass sich dies auf das programmgesteuerte Ändern eines Textfelds in ein Datei-Upload-Element erstrecken würde, da Sie den Wert des Textfelds auf die Datei setzen können, die Sie hinzufügen möchten. Dann wird der Typ in ein Upload-Element geändert und das Formular gesendet.

Es sollte eine einfache Sache sein, um es zu versuchen, obwohl ich denke, dass Sie innerhalb der Einschränkungen von Javascript arbeiten. Wenn Sie dies nicht in nativen JS tun können, ist es unwahrscheinlich, dass Sie JQuery verwenden können.

Hoffe das macht Sinn,

JLove

2
JLove

ich denke, Sie können den Eingabetext an eine Jquery/Javascript-Funktion binden, die eine Dateieingabe mit Code erstellt, und der Benutzer kann jetzt eine Datei hochladen

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