Стиль входного файла и автоматическая отправка

Question

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

Большое спасибо

Answer 1

Встраивание javascript в страницу плохая практика .

Добавить отправку к элементу с помощью селектора. Это также позволяет вам добавить функциональность к базовой ссылке, как вы и просили.

HTML

<form id="myForm">
    <a id="uploadLink" href="#">Upload file</a>
</form>

JQuery

$(document).ready(function() {
    $("#uploadLink").click(function() {
        $("#myForm").submit();
    }
});

Дополнительные ресурсы

Вот ссылка на плагин jQuery Form .

Существует также плагин для загрузки нескольких файлов для jQuery .

Answer 2

Вы можете вызвать метод отправки вашей формы. Он отправит вашу страницу на сервер, и вы сможете получить файл в коллекции Files запроса.

Вам нужно вызвать метод submit () формы для события "onchange" элемента "file".

<input type="file" onchange="formname.submit();" id="f" />

РЕДАКТИРОВАТЬ: Попробуйте это.

Answer 3

С версией 1.7+ JQuery:

    //wait for an file input to change anywhere in the document
    $(document).on('change', 'input[type="file"]', function () { 
        $(this).parents('form').submit(); //then submit its parent form
    });

Answer 4

Хорошо, хорошо, jQuery не всегда может быть ответом, но я в настоящее время злоупотребляю им - в основном для селекторов и живого материала - в любом случае, используя jQuery, лучшим решением для вашей проблемы будет следующее:

$('input[type:"file"]').live('change',function(){
    $(this).parents('form').submit();
});

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

И вы также можете сделать его легче, не используя live (я так делаю, потому что использую его динамически)