вызвать диалог загрузки файла, используя javascript / jquery

Question

вместо использования <input type="file">, возможно ли использовать <input type="text">, а затем выполнить сценарий с использованием javascript или jquery, чтобы при щелчке по текстовому полю открывался диалог загрузки файла ..... (и онфактически загружено, когда оно отправлено в форму)

Answer 1

Вы имеете в виду что-то вроде этого?

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

Обратите внимание, однако, что значение, указанное в файле ввода, является поддельным по соображениям безопасности.Если вы хотите, чтобы имя файла отображалось, вы можете вырезать косую черту.

Вот пример того, как сделать это, используя разбиение строки и массив pop:

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

Вы можете отрегулировать это далее для учета систем, которые используют прямой слеш в качестве разделителя каталогов.Также важно отметить, что если вы сделаете это, вы потеряете функциональность многих современных браузеров, где пользователи могут перетаскивать файлы со своего компьютера прямо на вход файла.На вашем месте я бы принял эту парадигму, стилизуя ввод файла, а не пытаясь превратить ввод текста в нечто, чем это не является.

Answer 2

А если HTML-код имеет несколько идентичных входных данных, как показано ниже: -

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

Если развернуть ответ @ treeface, код Jquery (текущая версия 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());
});​

Обратите внимание на $ parent () и $ parent () в jQuery. Попробуйте @ @ 1007 *http://jsfiddle.net/afxDC/

Answer 3

Не используйте display:none или visibility:hidden изначально в css

В Jquery :

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

Answer 4

У меня есть подозрение, что по соображениям безопасности вы не сможете этого сделать. Кажется, я вспомнил некоторое время назад, пытаясь установить атрибут value элемента загрузки файла, который вы не можете сделать, так как вы можете извлекать определенные файлы с компьютера пользователя без их согласия. Я полагаю, что это будет распространяться на программное изменение текстового поля на элемент загрузки файла, поскольку вы можете установить значение текстового поля для файла, который вы хотите добавить, затем изменить его тип на элемент загрузки и отправить форму.

Это должно быть достаточно просто, чтобы попробовать, хотя я думаю, что вы работаете в рамках ограничений Javascript, и поэтому, если вы не можете сделать это в нативном JS, вы вряд ли сможете использовать JQuery.

Надеюсь, это имеет смысл,

JLove

Answer 5

я думаю, что вы можете связать введенный текст с функцией jquery / javascript, которая создаст ввод файла с кодом, и пользователь теперь может загрузить файл

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