Средство выбора файлов HTML с jQuery

Возможный дубликат:
Чтение текстового файла на стороне клиента с помощью Javascript

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

Мне нужно что-то вроде этого:

<div id="content">
     <button id="selectFile" onclick="return selectFileClick();" />
</div>

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

function selectFileClick()
{
    var fileName = filedialog();
    // parsing file...
    return false;
}

Изменить: я не хочу загружать файл, и у меня есть собственный дизайн, который не похож на;

<input type="file" id="file">

Мне нужно что-то вроде этого: плагин диалогового окна файла jquery

Изменить (2): я решил проблему таким образом;

$(function () {
    $("#button1").click(function (event) {
        event.preventDefault();
        $('#file').trigger('click');
    });

    document.getElementById('file').addEventListener('change', readFile, false);
});

в html;

<input id="button1" type="submit" value="add" />
<input type="file" id="file" style="display: none">

Я надеюсь, что это поможет кому-то еще ;)


javascript html jquery filepicker
person hakan    schedule 12.06.2012    source источник
comment
stackoverflow.com/questions/4950567 / может помочь.   -  person Chris Mohr    schedule 12.06.2012

Ответы (1)


arrow_upward
5
arrow_downward

Взгляните на это: HTML File API

Вероятно, это был бы самый простой способ сделать это, например.

<input type="file" id="file">

Затем просто прикрепите функцию к функции «onChange» элемента.

РЕДАКТИРОВАТЬ: только что заметил, что вы используете jQuery, поэтому вы действительно можете просто сделать:

$("#file").change(function() { selectFileClick(); });
person phenomnomnominal    schedule 12.06.2012
comment
‹input type=file id=file› не всегда лучший вариант. Браузеры в настоящее время жестко закодировали текст, и вы никак не можете его изменить. Можно изменить (обходной путь), поместив накладываемое изображение или стилизованное поле поверх него. - person Tzen; 10.06.2016