I want to upload file my file - php

Question

I was getting undefined file as an error in my php while uploading a file.
function click_submit_form() {
var action = "jb_data_charity_submit.php";
// alert("I step"+$('#id_frm_per_details, #id_frm_acc_details , #id_frm_charity_details').serialize());
$.ajax({
url: 'jb_data_charity_submit.php',
type: 'POST',
data: $('#id_frm_charity_details').serialize(),
success: function (data_in) {
//alert(data_in);
if (data_in != null && !isEmpty(data_in) && (data_in).indexOf('VALIDATION_ERROR') != -1) {
var value = data_in.substr(data_in.indexOf('VALIDATION_ERROR'), data_in.indexOf('|#END#'));
var array_str = value.split('|')
//alert(array_str[0]);
//alert(array_str[1]);
//alert(array_str[2]);
var id_val = "#id_" + array_str[1].trim();
show_error(id_val, array_str[2])
} else {
window.location.replace('jb_charity_regn_confirm.html');
alert(data_in);
// alert("FINAL");
}
}
});
return false;
}
<form class='form-vertical' id='id_frm_charity_details' name='frm_charity_details' action='jb_data_harity_submit.php' enctype='multipart/form-data'>
<input id="id_file" name="file" class="input-file" type="file"> <a onclick='click_submit_form();' href="#" class="btn btn-info btn-custom8 btn-large "><i class=" icon-play"></i> Submit Application</a>
</form>
In my php
<?php
$files = $_FILES['file']['name'];
$files_tmp = $_FILES['file']['tmp_name'];
$copy = copy($files_tmp, $files);
//echo $_POST['file'];
move_uploaded_file($files_tmp, "C:\wamp32\www\jb_from_live\src\uploaded_files/" . $files);
?>
If i use the above line then it says undefined index 'file'.But the execution not going after $files=$_FILES['file']['name'];
It says undefined index file.

Answer 1

Send image to this format
$('#form').submit(function() {
var img=$('#image').val();
var forms=($(this).serialize());
$.ajax({
type:"POST",
url: "do.php?do=upload",
data:forms+'&r='+encodeURIComponent(img),
success: function(result){ //your code }
});
Try this in your code like this
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
function click_submit_form(){
var action = "jb_data_charity_submit.php";
// alert("I step"+$('#id_frm_per_details, #id_frm_acc_details , #id_frm_charity_details').serialize());
var img=$('#id_file').val();
var forms=($('#id_frm_charity_details').serialize());
$.ajax({
url: 'jb_data_charity_submit.php',
type: 'POST',
data:forms+'&r='+encodeURIComponent(img),
// data: $('#id_frm_charity_details').serialize(),
success: function(data_in) {
//alert(data_in);
if (data_in != null && !isEmpty(data_in) && (data_in).indexOf('VALIDATION_ERROR') != -1) {
var value = data_in.substr(data_in.indexOf('VALIDATION_ERROR'), data_in.indexOf('|#END#'));
var array_str = value.split('|')
//alert(array_str[0]);
//alert(array_str[1]);
//alert(array_str[2]);
var id_val = "#id_" + array_str[1].trim();
show_error(id_val, array_str[2])
} else {
window.location.replace('jb_charity_regn_confirm.html');
alert(data_in);
// alert("FINAL");
}
}
});
return false;
}
</script>
<form class='form-vertical' id='id_frm_charity_details' name='frm_charity_details' action='jb_data_harity_submit.php' enctype='multipart/form-data' >
<input id="id_file" name="file" class="input-file" type="file">
<a onclick='click_submit_form();' href="#" class="btn btn-info btn-custom8 btn-large "><i class=" icon-play"></i> Submit Application</a>
</form>

Answer 2

I recommend you to use FormData instead of serialize(). The advantage of using formData is that you can also upload pdf,xml,JSON files by specifying their content-type.
For eg:
var fData = new FormData();
fData.append("XML", new Blob([ xml ], { type: "text/xml" });
fData.append("JSON", new Blob([ JSON.stringify(json) ], { type: "application/json" }));
fData.append("PDF", file);

Answer 3

Make sure your file upload form has attribute enctype="multipart/form-data" otherwise the file upload will not work.
You cannot upload a file via ajax that simply unfortunately, for security reasons js doesn't have access to file data and therefore cannot post it via the form serialize function.
If you want to validate other parts of the form and then submit you could write a function like this
function submit(){
var valid = true;
//TODO: check validation on form, set valid to false if incorrect
if( valid )
document.forms[0].submit();
return false;
}
If you want to use HTML5 have a geez at this answer which utilizes the FormData() function:
How can I upload files asynchronously?
Otherwise if you with to upload a file asynchronously you'll have to look for a jsp or flash fallback plugin.
Here's a really good one:
http://blueimp.github.io/jQuery-File-Upload/