Диалог загрузки файла триггера с помощью javascript/jquery

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

Ответ 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);
});

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

Ответ 2

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

В JQuery:

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

Ответ 3

И если код 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());
});

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

Ответ 4

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

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

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

JLove

Ответ 5

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

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