通过onChange（）检查图像文件后如何使用jquery提交表单？

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);
        }
    });
}));

Answer 1

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.