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

时间:2011-05-19 05:34:55

标签: jquery mysql jquery-ui codeigniter

我正在为我的朋友构建一个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得到的)

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

但是,是否可以在主应用程序窗口中执行所有这些上传操作并坚持我朋友的要求(无导航,无刷新,无表单提交,等待时没有白页)

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

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

1 个答案:

答案 0 :(得分:1)

使用jquery.post(),数据实际上会提交给控制器页面 - 就像你点击“提交”一样。问题是,文件上传不能(还)用javascript处理(我认为只有例外是ff 4)。

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

它通过iframe无缝处理上传,而且非常轻巧。只是使用它的功能而不是发布,你会没事的。