How to submit form with jquery after checking image file through onChange()?

Question

This is my form -

<form id="imgUpIcn" class="imgUpIcn" enctype="multipart/form-data" method="post" action="myfile.php">
<div id="upload-file-container">
<input type="file" name="uploadedImagefile" id="myImageFile" onchange="photoUpInit(event,this,'loadingImg','cropPhLayer')" />
</div>   
</form>

This is my photoUpInit() function -

function photoUpInit(evt, obj, loaderID, cropLBID) {

var ext = obj.value.split('.').pop().toLowerCase(), vStat = true;
if (window.File && window.FileReader && window.FileList) {
    var e = evt || window.event, files = e.target.files, fSize = Math.round((parseInt(files[0].size) / 2048) * 100) / 100;
    if (fSize > 2048)
        vStat = false;
}
if (ext != 'png' && ext != 'jpg' && ext != 'jpeg' && ext != 'gif')
    vStat = false;
if (vStat) {
    document.getElementById('uplErr').style.display = "none";
    document.getElementById(loaderID).style.display = 'block';
            //Submitting form here
    obj.form.submit(); 

} else {
    document.getElementById(loaderID).style.display = 'none';
    document.getElementById('uplErr').style.display = "block";
}
}

Now when the form action is performed my file is getting uploaded on the server but I want to get callback from the php file instead I am redirected to the php page.

Here is my php file-

<?php
if (isset($_FILES['uploadedImagefile']['tmp_name']))
{


$target_path = "../uploads/";

$target_path = $target_path . "tmp"; 

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

I already tried using this to get callback but its not working-

$('#imgUpIcn').on('submit', (function(e) {
    e.preventDefault();
    $.ajax({
        type : "POST",
        url : $(this).attr('action'),
        data : $(this).serialize(),
        success : function(data) {
            $("#myModal").dialog("close");
        },
        error : function(data) {
            console.log("error");
            console.log(data);
        }
    });
}));

possible duplicate of [Form submit with AJAX passing form data to PHP without page refresh](http://stackoverflow.com/questions/16616250/form-submit-with-ajax-passing-form-data-to-php-without-page-refresh) — Ryan, Jan 15 '14 at 10:01

score 0 · Answer 1 · answered Jan 15 '14 at 10:18

Considering that it's the php file that uploads your file, you should do a php header redirect back to the form page with a message on both success or failure. Something like this:

<?php
if (isset($_FILES['uploadedImagefile']['tmp_name']))
{


$target_path = "../uploads/";

$target_path = $target_path . "tmp"; 

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

header('Location: back/to/your/form/file?message=' . $message);
}

In the end this should upload the file and go back to your form page which in my oppinion should also be a php file so that you can interpret the $_GET variable in the link.

Then you need to use another approach, where you send the image to the php script through ajax it's called ajaxupload. Google it, since we are not allowed to provide libraries in answers. — Ovidiu Iacomi, Jan 15 '14 at 10:29

How to submit form with jquery after checking image file through onChange()?

1 Answers1