使用jQuery和CodeIgniter上传文件（但没有页面刷新） [英] File upload with jQuery and CodeIgniter (But no page refresh)
问题描述
我正在为我的朋友构建一个Web应用程序。他希望这个应用程序是类似桌面的应用程序，他的意思是根本没有页面刷新。所以，我决定使用CodeIgniter，jQuery，jQuery UI和MySQL构建这个应用程序。此应用程序主窗口包含多个选项卡，每个选项卡都有自己的内容div。
所有页面请求，表单提交，操作和其他操作都由jQuery处理以检索数据。然后，这些数据将被发送到特定的控制器以处理和响应相应的视图
例如表单提交...
I'm building a web application for my friend. He wants this application to be "desktop-like" application which he means no page refresh "at all". So, I decided to build this application using CodeIgniter, jQuery, jQuery UI and MySQL. This application main window contains several tabs, each tab has its own content div.
All of the page request, form submission, action and else are handle by jQuery to retrieve data. Then, these data will be sent to the specific controller to handle and response with the appropriate view
For example of form submission ...
//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应用程序的最佳方式。
But, the problem is I can't upload the file to the controller.
1.) If I alert "$('input[type=file]').val()", the result will be "Drive:/fakePath/fileName.extension".
2.) If I alert "$('#form').serialize(), the result will be "name=value1&lastName=value2&..." but no file input included)
I read the manual of CodeIgniter do_upload() function.
I assume (If I'm not misunderstanding) that I have to submit the file to controller.
But for my application which has no form submission, how can I do this file upload.
Since all I got now is the fake path of the file location. (Which I got from scenario 1. above)
The only solution that I can think is to open a new window to upload the file (seperate from main application window). This window can be navigate (refresh, submit form) and contains file upload form. Once the upload is done, close that window.
But, is it possible to do all this upload thing within the main application window and stick with my friend's requirement (no navigation, no refresh, no form submit, no white page while waiting)
A code example will be great help. But, some keyword for google is fine too.
Thanks in advance for every single help, advise or even criticize.
P.S. Feel free to comment my application design too. I'm not sure this is the best way to build a desktop-like web application or not.
推荐答案
使用jquery.post （），数据实际上提交到控制器页面 - 就像你点击提交一样。问题是，文件上传不能（还）用javascript处理（我认为只有例外是ff 4）。
With jquery.post(), the data is actually submitted to the controller page - just like if you clicked "submit". The problem is, file uploads can not (yet) be processed with javascript (only exception is ff 4, i think).
我为一致用户找到的最佳解决方案经验就是这个插件： http://jquery.malsup.com/form/
The best solution I found for a coherent user experience is this plugin: http://jquery.malsup.com/form/
它通过iframe无缝处理上传，而且非常轻巧。只是使用它的功能而不是发布，你会没事的。
It seamlessy handles the upload via iframe and it's pretty lightweight. Just use its function instead of post and you'll be fine.
这篇关于使用jQuery和CodeIgniter上传文件（但没有页面刷新）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
