使用 jQuery 和 CodeIgniter 上传文件（但没有页面刷新）

Question

我正在为我的朋友构建一个 Web 应用程序。他希望这个应用程序是“桌面式”应用程序，他的意思是“根本”不刷新页面。因此，我决定使用 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()”，结果将是"Drive:/fakePath/fileName.extension"。
2.) 如果我警告 "$('#form').serialize()，结果将是 "name=value1&lastName=value2&..." 但没有文件包括输入）

我阅读了 CodeIgniter do_upload() 函数的手册。
我假设（如果我没有误解的话）我必须将文件提交给控制器。
但是对于我没有表单提交的应用程序，我该如何上传这个文件。
因为我现在得到的只是文件位置的假路径。 （我从上面的场景 1 中得到）

我能想到的唯一解决方案是打开一个新窗口来上传文件（与主应用程序窗口分开）。此窗口可以导航（刷新、提交表单）并包含文件上传表单。上传完成后，关闭该窗口。

但是，是否可以在主应用程序窗口中完成所有这些上传操作并坚持我朋友的要求（无导航、无刷新、无表单提交、等待时无白页）

代码示例会很有帮助。但是，谷歌的一些关键字也很好。
提前感谢每一个帮助、建议甚至批评。

附：也请随意评论我的应用程序设计。我不确定这是否是构建类似桌面的 Web 应用程序的最佳方式。

Answer 1

使用 jquery.post()，数据实际上是提交到控制器页面 - 就像您单击“提交”一样。问题是，文件上传不能（还）用 javascript 处理（我认为唯一的例外是 ff 4）。

我找到的获得一致用户体验的最佳解决方案是这个插件：http://jquery.malsup.com/form/

它通过 iframe 无缝处理上传，而且非常轻量级。只需使用它的功能而不是 post 就可以了。