Single file upload jquery php - php

Question

I'm sure I've made a simple error on this one. The file isn't being passed to the php page (I get the "Not uploaded:File error. Please try again." error passed back from the PHP page.)
The code works fine without the JQUERY so I guess the PHP is not the problem.
I've checked the field name / id & it seems OK. I tried testing to see if the value of the button was being passed and it wasn't, that's when I came to the conclusion it was probably the JQUERY but then I was stumped.
I know similar posts have been submitted (I've read them) but I'm desperate!!
Thank you in advance.
Here's the HTML:
<form action="upload.php" name="formname" ENCTYPE="multipart/form-data" id="formid">
<fieldset>
<legend>File info</legend>
<p>
<label for="file1">Files<span class="red"> *</span></label>
<input name="file1" type="file" />
</p>
</fieldset>
<p><label> </label><input type="button" id="submit" value="Add" /></p>
</form>
<div id="output"></div>
<script>
$(function(){
$('#submit').on('click', function(){
var fd = new FormData($("#formid"));
$.ajax({
url: 'upload.php',
type: 'POST',
data: fd,
success:function(data){
$('#output').html(data);
},
cache: false,
contentType: false,
processData: false
});
});
});
</script>
and the PHP
<?php
$strName = 'JoeBloggs';
$intId = 1045;
$missing = '';
date_default_timezone_set("Europe/London");
error_reporting(E_ALL);
include('class.upload.php');
// where to put the images?
$dir_dest = '../'.$intId.'/';
$xcount = 0;
if (!file_exists($dir_dest)) { mkdir($dir_dest, 0777, true);}
# upload 1400px
$handle = new upload($_FILES['file1']);
if ($handle->uploaded) {
$y = $handle->image_src_y;
$height = $y/2;
$handle->image_resize = true;
$handle->image_ratio_crop = true;
$handle->image_x = 700;
$handle->image_y = 260;
$handle->image_convert = jpg;
$handle->Process($dir_dest);
if ($handle->processed) {
// everything was fine !
$strFilename1 = $handle->file_dst_name;
rename( $dir_dest . $strFilename1, $dir_dest . $strName . '.jpg' );
$missing .= 'File uploaded';
} else {
$missing .= $missing. 'Not processed:' . $handle->error . '<br />';
}
} else {
$missing .= 'Not uploaded:' . $handle->error . '<br />';
}
echo $missing;
//header('Location: ../index.php?missing='.$missing);
?>
<img src="<?= $dir_dest . $strName?>.jpg" />

Answer 1

Try this will may help you,
<script>
$(function(){
$('#submit').on('click', function(){
var form = $('#formid')[0];
var formData = new FormData(form);
$.ajax({
url: 'upload.php',
type: 'POST',
data: formData,
success:function(data){
$('#output').html(data);
},
cache: false,
contentType: false,
processData: false
});
});
});
</script>

Answer 2

try adding to the ajax function:
contentType: multipart/form-data