Загрузка файлов с помощью jQuery и CodeIgniter (но без обновления страницы)

Question

Я создаю веб-приложение для моего друга. Он хочет, чтобы это приложение было «настольным», что означает отсутствие обновления страницы. Итак, я решил создать это приложение, используя CodeIgniter, jQuery, jQuery UI и MySQL. Это главное окно приложения содержит несколько вкладок, каждая вкладка имеет свое собственное содержимое div.

Все запросы страницы, отправка формы, действие и другое обрабатываются jQuery для извлечения данных. Затем эти данные будут отправлены на конкретный контроллер для обработки и ответа с соответствующим представлением

Например, отправка формы ...

//JavaScript
$('#submitButton').live('click',function(){
    var data = $('#form').serialize();
    $.post('someController/someMethod', data, function(data){
        $('#someTargetDiv').html(data);
    })
})

//Controller
function someMethod(){
    var data1 = $this->input->post('data1');
    var data2 = $this->input->post('data2');
    var data3 = $this->input->post('data3');
    var data4 = $this->input->post('data4');

    /* some data handling code */

    $this->load->view('someView',data);
}

Но проблема в том, что я не могу загрузить файл в контроллер.
1.) Если я сообщу "$ ('input [type = file]'). Val ()", результат будет "Диск: /fakePath/fileName.extension".
2.) Если я оповестю "$ ('# form'). Serialize (), результатом будет" name = value1 & lastName = value2 & ... ", но нет файла входные данные включены)

Я прочитал руководство по функции CodeIgniter do_upload ().
Я предполагаю (если я не ошибаюсь), что я должен передать файл в контроллер.
Но для моего приложения, которое не имеет отправка формы, как я могу сделать этот файл загрузки.
Так как все, что я получил сейчас, это поддельный путь к файлу. (Который я получил из сценария 1. выше)

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

Но можно ли выполнить все эти действия по загрузке в главном окне приложения и придерживаться требований моего друга (без навигации, без обновления, без отправки формы, без белой страницы, пока в ожидании)

Пример кода будет отличной помощью. Но некоторые ключевые слова для Google тоже хорошо.
Заранее благодарим за каждую помощь, совет или даже критикуем.

P.S. Не стесняйтесь комментировать мой дизайн приложения тоже. Я не уверен, что это лучший способ создать настольное веб-приложение или нет.

Answer 1

С помощью jquery.post () данные фактически передаются на страницу контроллера - как если бы вы нажали «отправить».Проблема в том, что загрузка файлов (пока) не может быть обработана с помощью javascript (я думаю, что единственным исключением является ff 4).

Лучшее решение, которое я нашел для согласованного взаимодействия с пользователем, - это плагин: http://jquery.malsup.com/form/

Он легко обрабатывает загрузку через iframe и довольно легкий.Просто используйте его функцию вместо поста, и все будет в порядке.