Tworzę formularz dodawania ogłoszenia, gdzie wpisuje sie kilka inputów tekstowych, a pod nimi miejsce z dodawaniem zdjęć i o ile było to zwykłe dodawanie zdjęć bez przeładowywania strony - działało, po prostu wybierałem zdjęcia i jednym przyciskiem submit wysyłało mi caly formularz, wgrywało zdjęcia na serwer i dodawalem nazwy zdjęć do bazy. Ale chciałbym aby ten formularz był bardziej użyteczny i żeby był podgląd tych zdjęć przed wysłaniem calego formularza, więc dodalem skrypt ajaxowy. I problem jest taki że w momencie wybrania zdjęć i ich wgrania na serwer nie wiem jak przekazac je do formularza głownego.
Próbowalem dodać na końcu funkcji upload $this->create($photos) i odebrać je w funkcji create. I je przekazuje, ale od razu po przeładowaniu pierwszym strony przez ajaxa gdy je wgrywa. W momencie gdy następnie wypełnię pola tekstowe formularza i nacisnę wyslij formularz to wtedy $photos jest NULL i nie wiem jak przekazac i zapisac te dane w bazie? Jak zrobić żeby to działalo?
Funkcja create
public function create()
{
if ( !empty( $_POST ) )
{
if ( $this->form_validation->run( 'site_ads_create' ) == true )
{
$activate_code = random_string();
if ( logged_in() == true )
{
$data = array(
'title' => $this->input->post( 'title' , true ),
'description' => $this->input->post( 'description' , true ),
'category_id' => $this->input->post( 'subcat' , true ),
'city_id' => $this->input->post( 'city_id' , true ),
'price' => $this->input->post( 'price' , true ),
'contact' => $this->input->post( 'contact' , true ),
'email' => $this->session->userdata( 'email' ),
'phone' => $this->input->post( 'phone' , true ),
'user_ip' => getUserIpAddr(),
'created' => time(),
'active' => 1,
);
}
else
{
$data = array(
'title' => $this->input->post( 'title' , true ),
'description' => $this->input->post( 'description' , true ),
'category_id' => $this->input->post( 'subcat' , true ),
'city_id' => $this->input->post( 'city_id' , true ),
'price' => $this->input->post( 'price' , true ),
'contact' => $this->input->post( 'contact' , true ),
'email' => $this->input->post( 'email' , true ),
'phone' => $this->input->post( 'phone' , true ),
'user_ip' => getUserIpAddr(),
'created' => time(),
'active' => 0,
'activate_code' => $activate_code,
);
}
$add = $this->Site_model->create( 'ads' , $data );
$this->session->set_flashdata( 'alert' , 'Ogłoszenie zostało dodane.' );
//redirect( '/dodaj-ogloszenie' );
}
else
{
$this->session->set_flashdata( 'alert' , validation_errors() );
//refresh();
}
}
$data['cities'] = $this->Site_model->get_cities('cities', 'name', 'asc');
$data['categories'] = $this->Site_model->get_categories();
$this->load->view( 'create' , $data );
}
funkcja upload
public function upload()
{
if($_FILES["files"]["name"] != '')
{
$output = '';
$path = BASEPATH . '../images/'. date('y').'_'.date('m').'/';
if ( !file_exists( $path ) )
{
mkdir( $path , 0777 );
}
$config['upload_path'] = 'images/'. date('y').'_'.date('m').'/';
$config["allowed_types"] = 'gif|jpg|png';
$this->load->library('upload', $config);
$this->upload->initialize($config);
for($count = 0; $count<count($_FILES["files"]["name"]); $count++)
{
$_FILES["file"]["name"] = $_FILES["files"]["name"][$count];
$_FILES["file"]["type"] = $_FILES["files"]["type"][$count];
$_FILES["file"]["tmp_name"] = $_FILES["files"]["tmp_name"][$count];
$_FILES["file"]["error"] = $_FILES["files"]["error"][$count];
$_FILES["file"]["size"] = $_FILES["files"]["size"][$count];
if($this->upload->do_upload('file'))
{
$data = $this->upload->data();
$output .= '
<div class="col-md-3">
<img src="'.base_url().'images/'. date('y').'_'.date('m').'/'.$data["file_name"].'" class="img-responsive img-thumbnail" />
</div>
';
$photos[] = $this->upload->data();
}
}
echo $output;
}
}
i formularz ze skryptem ajax
<form method='post' action='<?php echo base_url();?>ads/create' enctype='multipart/form-data'>
</ tu caly formularz z inputami ktorego nie wklejam i dalej na koncu formularza skrypt ajax do wgrywania zdjec>
<div class="container">
<br /><br /><br />
<h3 align="center">Upload Multiple Files in Codeigniter using Ajax JQuery</h3><br />
<div class="col-md-6" align="right">
<label>Select Multiple Files</label>
</div>
<div class="col-md-6">
<input type="file" name="files" id="files" multiple />
</div>
<div style="clear:both"></div>
<br />
<br />
<div id="uploaded_images"></div>
</div>
<script>
$(document).ready(function(){
$('#files').change(function(){
var files = $('#files')[0].files;
var error = '';
var form_data = new FormData();
for(var count = 0; count<files.length; count++)
{
var name = files[count].name;
var extension = name.split('.').pop().toLowerCase();
if(jQuery.inArray(extension, ['gif','png','jpg','jpeg']) == -1)
{
error += "Invalid " + count + " Image File"
}
else
{
form_data.append("files[]", files[count]);
}
}
if(error == '')
{
$.ajax({
url:"<?php echo base_url(); ?>ads/upload",
method:"POST",
data:form_data,
contentType:false,
cache:false,
processData:false,
beforeSend:function()
{
$('#uploaded_images').html("<label class='text-success'>Uploading...</label>");
},
success:function(data)
{
$('#uploaded_images').html(data);
$('#files').val('');
}
})
}
else
{
alert(error);
}
});
});
</script>
<?php echo form_close(); ?>
