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.

Answer 2

You should use XHR2 to upload files through AJAX .

An example :

Javascript / Clientside:

function upload() {
    var fileInput = document.getElementById('file_input_upload'); 
    var file = fileInput.files[0];        

    xhr = new XMLHttpRequest();

    xhr.open('post', 'upload.php', true);
    xhr.setRequestHeader("Content-Type", "application/octet-stream");
    xhr.setRequestHeader("Cache-Control", "no-cache");  
    xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");  
    xhr.setRequestHeader("X-File-Name", file.name);  
    xhr.setRequestHeader("X-File-Size", file.size);  
    xhr.setRequestHeader("X-File-Type", file.type);   
    xhr.send(file);
}

HTML :

<input type="file" id="file_input_upload"/>
<div onmousedown="upload()">Upload my file</div> 

PHP / Serverside (upload.php):

$file_name = $_SERVER['HTTP_X_FILE_NAME'];
$file_size = $_SERVER['HTTP_X_FILE_SIZE'];
file_put_contents(
            "data/" . $file_name, 
            file_get_contents("php://input")
        );

This was a simple example without any error checking . So please do not use this code for production use . And if you want to upload large files(in GB) you should use webworkers

Answer 3

for uploading files through ajax go through this url ajax file uploading

Answer 4

You can use Uploadify to handle the file upload. It offers "onUploadSuccess" callback function. From where you can get the uploaded file info (filename,path etc). You can use that info and update a hidden input field in your form. And then you can access the information on the server side and manipulate it.

Hope this helps.

Answer 5

It is impossible to send file input data via $.ajax only. I have successfully used jQuery form plugin http://malsup.com/jquery/form/. It wraps any form into AJAX processing, and adds a lot of useful callback options. It also does some clever things to handle file uploads. For older browsers (which do not support XHR Level 2) there might be some very minor additional server-side modifications, but otherwise it works out of the box.

For specific docs on using jQuery form to handle file uploads see http://malsup.com/jquery/form/#file-upload

Answer 6

Better is using a simply way, with separate process :

$("#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">
    <input type="text" id="mod" name="mod" class="dt"/>
    <input type="text" id="no" name="no" class="dt"/>
    <input type="submit" id="oqcsubmit" value="Submit" />
    <input type="hidden" name="action" value="oqcdata" />
</form>

<form enctype="multipart/form-data" action="uploader.php" method="POST"> 
    Upload File: <input id="filename" name="uploadedfile" type="file" />
    <input id="upload" type="submit" value="Upload File" style="display:none;"/>
</form>

both can works normally,the best way is do not do the complicated way if the easy one can be done.