Trigger Datei Upload-Dialog mit Javascript/Jquery

Question

anstelle von <input type="file">, ist es möglich zu verwenden <input type="text"> und dann skript es mit Javascript oder jquery so, dass, wenn das Textfeld angeklickt wird, der Datei-Upload-Dialog erscheint ..... (und habe es tatsächlich hochgeladen, wenn es in einem Formular eingereicht wird)

Answer 1

Ich habe den Verdacht, dass Sie aus Sicherheitsgründen nicht in der Lage sind, dies zu tun. Ich scheine mich zu erinnern, dass ich vor einiger Zeit versucht habe, das value-Attribut eines Datei-Upload-Elements zu setzen, was Sie nicht tun können, da Sie bestimmte Dateien ohne Zustimmung vom Computer eines Benutzers abrufen können. Ich würde mir vorstellen, dass sich dies auf das programmatische Ändern eines Textfelds in ein Element zum Hochladen von Dateien erstreckt, da Sie den Wert des Textfelds auf die hinzuzufügende Datei festlegen und dann den Typ in ein Upload-Element ändern und das Formular absenden können.

Es sollte eine einfache Sache genug sein, um zu versuchen, obwohl ich denke, dass Sie innerhalb der Grenzen von Javascript arbeiten und deshalb, wenn Sie es nicht in nativem JS tun können, würden Sie JQuery wahrscheinlich nicht verwenden können .

Hoffnung diesem Sinne bedeuten

JLOVE

Answer 2

Sie so etwas wie das macht?

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 die von der Dateieingabe angegebenen Wert aus Sicherheitsgründen eine Fälschung ist. Wenn Sie nur den Dateinamen anzeigen möchten, können Sie die Schrägstriche ausschneiden.

Hier ist ein Beispiel dafür, wie es zu tun, um eine Zeichenfolge aufgeteilt und ein Array Pop mit:

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 diese weiter für Systeme berücksichtigen anpassen können, die einen Schrägstrich als das Verzeichnis verwenden Separator. Es ist auch wichtig zu beachten, dass wenn Sie dies tun, Sie die Funktionalität vieler moderner Browser verlieren, wo Benutzer Dateien von ihrem Computer direkt auf eine Dateieingabe ziehen können. Wenn ich Sie wäre, würde ich dieses Paradigma annehmen, indem ich die Dateieingabe stemple, anstatt zu versuchen, eine Texteingabe in etwas zu verwandeln, das es nicht ist.

Answer 3

Dont verwenden display:none oder visibility:hidden zunächst in der CSS-

In JQuery:

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

Answer 4

Und wenn der HTML-Code hat gleich mehrere Eingänge wie diese unter: -

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

Erweitern auf @ Treaface-Antwort, der Jquery-Code (aktuelle Version 1.8.0) wäre:

$('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 zwischen $ parents() und $ parent() in jQuery.Probieren Sie es aus @http://jsfiddle.net/afxDC/

Answer 5

glaube ich Ihnen die Eingabe von Text in eine jquery binden kann/JavaScript-Funktion, die eine Datei-Eingabe mit dem Code und die dem Benutzer nun eine Datei kann

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