How to upload image and move in folder using jquery ? - php

Question

View:
<script>
$("#team_image").change(function(){
var file_data = $('#team_image').prop('files')[0];
var member_name = $("#member_name").val();
var form_data = new FormData();
form_data.append('file', file_data);
$('#imgs').html("<img src='<?php echo base_url(); ?>resource/loading.gif' />");
$.ajax({
url: '<?php echo base_url(); ?>upload',
dataType: 'text',
cache: false,
contentType: false,
processData: false,
data: form_data,
type: 'post',
success: function(php_script_response){
$("#imgs").html(php_script_response);
}
});
});
</script>
<input id="team_image" type="file" name="team_image" />
<input id="member_name" type="text" name="member_name" />
Controller:
public function upload()
{
if ( 0 < $_FILES['file']['error'] )
{
echo 'Error: ' . $_FILES['file']['error'] . '<br>';
}
else
{
$filename = $_FILES['file']['name'];
$ext = pathinfo($filename, PATHINFO_EXTENSION);
$allowed = array("jpg", "jpeg", "png");
if(!in_array($ext, $allowed))
{
echo '<p id="red">Only jpg, jpeg, and png files are allowed.</p>';
}
else
{
$data = array(
'member_name'=>$this->input->post('member_name'),
'team'=>$filename
);
$sql = $this->db->insert('team',$data);
move_uploaded_file($_FILES['file']['tmp_name'], ''.FCPATH.'image/team_image/'.$_FILES['file']['name']);
if($sql==true)
{
echo '<p style="color:green;font-weight:bold;">File uploaded Successfully</p>';
}
else
{
echo '<p id="red">Unable to proceed!</p>';
}
}
}
}
In this code I have simple two file i.e. type="file" and type="text". Now, What I actually want when I click on type=" file" image and member_name will insert into database and image should be moved into a folder. I don't know where am I doing wrong? So, How can I do this? Please help me.
Thank You

Answer 1

Please change AJAX code, don't need to use prop method to get files data, with FormData() method, it will send $_POST & $_FILES data on the server. Also, use form tag.
Please follow below code:-
<script>
$("#team_image").change(function(){
var form_data = new FormData();
$('#imgs').html("<img src='<?php echo base_url(); ?>resource/loading.gif' />");
$.ajax({
url: '<?php echo base_url(); ?>upload',
dataType: 'text',
cache: false,
contentType: false,
processData: false,
data: form_data,
type: 'post',
success: function(php_script_response){
$("#imgs").html(php_script_response);
}
});
});
</script>
<form method="post" enctype="multipart/form-data">
<input id="team_image" type="file" name="team_image" />
<input id="member_name" type="text" name="member_name" />
</form>
On server side (on PHP script) you can get data by using $_FILES (Array) & $_POST (Array).
Please use this.