Codeigniter : Multiple File Uploading - php

Question

I tried many multiple file uploaders which can be integrated with codeigniter like
pulpload
jquery file upload
Even though they work perfectly in the pure php environment, i could not make them work in codeigniter framework. I tried this for two days.. tried many articles which was in the github and blogs..
But i could not made it in codeigniter framework..
If anyone can tell me it by step by step or if there is a tutorial for that, please help me.
I am a newbi to codeigniter..
New:
I downloaded the blueimp Jquery-File-Upload plugin, and followed this link as it is..
https://github.com/blueimp/jQuery-File-Upload/wiki/Latest-jQuery-File-Upload-easy-integration-with-codeigniter
When I select a file and click upload in chrome it says:
Error SyntaxError: Unexpected token <
In firefox it says:
Error SyntaxError: SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data
I examined the difference between using it on my server and on the demo server, on my server in firebug the POST return is the entire index.html...
but on the demo server it returns JSON data..
Here is the modified section of js/main.js that I changed:
$(function () {
'use strict';
// Initialize the jQuery File Upload widget:
$('#fileupload').fileupload({
// Uncomment the following to send cross-domain cookies:
//xhrFields: {withCredentials: true},
url: 'upload/do_upload'
});
// Enable iframe cross-domain access via redirect option:
$('#fileupload').fileupload(
'option',
'redirect',
window.location.href.replace(
/\/[^\/]*$/,
'/cors/result.html?%s'
)
);
if (window.location.hostname === 'blueimp.github.io') {
// Demo settings:
$('#fileupload').fileupload('option', {
url: '//jquery-file-upload.appspot.com/',
// Enable image resizing, except for Android and Opera,
// which actually support image resizing, but fail to
// send Blob objects via XHR requests:
disableImageResize: /Android(?!.*Chrome)|Opera/
.test(window.navigator.userAgent),
maxFileSize: 5000000,
acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i
});
// Upload server status check for browsers with CORS support:
if ($.support.cors) {
$.ajax({
url: '//jquery-file-upload.appspot.com/',
type: 'HEAD'
}).fail(function () {
$('<div class="alert alert-danger"/>')
.text('Upload server currently unavailable - ' +
new Date())
.appendTo('#fileupload');
});
}
} else {
// Load existing files:
$('#fileupload').addClass('fileupload-processing');
$.ajax({
// Uncomment the following to send cross-domain cookies:
//xhrFields: {withCredentials: true},
url: $('#fileupload').fileupload('option', 'url'),
dataType: 'json',
context: $('#fileupload')[0]
}).always(function () {
$(this).removeClass('fileupload-processing');
}).done(function (result) {
$(this).fileupload('option', 'done')
.call(this, $.Event('done'), {result: result});
});
}
});
The only thing I changed was making index.html to have the form action point to my script (upload/do_upload)

Answer 1

controller
function add()
{
if(isset($_POST['submit']))
{
$length = count($_FILES['image']['name']);
$filename = $_FILES['image']['name'];
$tempname = $_FILES['image']['tmp_name'];
$allimage = array();
foreach($filename as $key =>$value)
{
move_uploaded_file($tempname[$key],'media/uploads/mobile_product/'
.$filename[$key]);
$allimage[] = $filename[$key];
}
if(!empty($allimage))
{
$allimage = json_encode($allimage);
}
else
{
$allimage = '';
}
$data['image'] = $allimage;
$this->db->insert('table_name',$data);
$this->session->set_flashdata('message','<div class="alert alert-success">Record has been successfully saved.</div>');
}
}