submit success but upload not work at combine form

Question

During trying to combine submit and upload in one form, I have a problem in upload but for submit form it's no problem.

JQuery + Ajax :

$("#oqcsubmit").click(function() {
    if($("#oqc").valid()) {
            var params=$("#oqc").serialize();
                $.ajax({
                    type:"post",
                        url:"doinput.php",
                        data:params,
                        cache :false,
                        async :false,
                        success : function() {
                            $(".dt").val("");
                                $(".stat").val("");
                                return this;
                                },
                        error : function() {
                            alert("Data failed to input.");
                                }
                        });
                 return false;
                 }
     });

<form id="oqc" enctype="multipart/form-data" >
    <input type="text" id="mod" name="mod" class="dt"/>
    <input type="text" id="no" name="no" class="dt"/>
    <input id="filename" name="uploadedfile" type="file" />
    <input type="submit" id="oqcsubmit" value="Submit" />
    <input type="hidden" name="action" value="oqcdata" />
</form>

PHP :

$dbc=mysql_connect(_SRV,_ACCID,_PWD) or die(_ERROR15.": ".mysql_error());
$db=mysql_select_db("QPL",$dbc) or die(_ERROR17.": ".mysql_error());

$target_path = "data/";

$target_path = $target_path . basename( $_FILES['uploadedfile']['name']);
//print_r($_FILES);
        if(move_uploaded_file($_FILES['uploadedfile']['tmp_name'], $target_path)) {
                echo "The file ". basename( $_FILES['uploadedfile']['name']). " has been uploaded";
                }
        else{
                echo "There was an error uploading the file, please try again!";
                }

switch(postVar('action')) {
        case 'oqcdata' :
                oqcdata(postVar('mod'),postVar('no'));
                break;
        }

function oqcdata($mod,$no) {

        $Model          = mysql_real_escape_string($mod);
        $Serial         = mysql_real_escape_string($no);

//build query
  $sql = "INSERT INTO OQC (Model, Serial) VALUES ('".$Model."','".$Serial."')";
echo $sql;
$result=mysql_query($sql) or die(_ERROR26.": ".mysql_error());
echo $result;
mysql_close($dbc);

how to put the upload code correctly in this page? so both could working. directory permission :chmod 777 data

---

the file is left behind in the form after submit (not send) .

---

UPDATE

After move the upload code before switch I got thi error:

PHP Notice:  Undefined index: uploadedfile

it's mean that the form not send the uploadedfile value. After check the parameter there are no uploadedfile included. why it happens? even this value is included inside the form and using .serialize().

form data :
mod:KD-R321ED
no:177X1000          // where is the uploaded file value?
action:oqcdata

Answer 1

PHP Notice:  Undefined index: uploadedfile

it's mean that the form not send the uploadedfile value. After check the parameter there are no uploadedfile included. why it happens?

You can not upload files over vanilla cross-browser ajax, such as that which jQuery uses. Period, full stop, end of story.

If you must do the upload without a page refresh, the common trick is to create an iframe and submit the form to it. Another trick is to use the experimental File API, exposed as part of HTML5. These can be a pain to handle yourself, but it should work well if you want to do it all by hand.

I highly recommend using a third-party file upload widget for this. I've had luck with Plupload, but some people also recommend Uploadify. They can both optionally use a Flash or HTML5 backend to perform the upload, which also gives users a happy little progress meter.