使用Ajax上传图像但PHP没有看到文件

Question

So the PHP works fine when I just the form in a standard way. But, when I try to send the form through ajax, it does not see the $_file[] and returns, "success|na" which I want it to do if there is no file, but I get the same result if there is a file.

Are the ajax setting correct? cashe: false, processData: false?

Any help would be helpful guys I can always use an iframe, but I would rather not. Thank you for time!

function info_save(){
    gf.wait();
    var info_ava = '';
    var info_abo = $('#info_abo').val()
    target =  './php/profile_system.php';
            $.ajax({
                url: "./php/profile_image.php",
                type: "POST",
                data: new FormData('#info_for'),
                contentType: false,
                cache: false,
                processData:false,
                success: function(reply){
                    imgresponse = reply.split("|");
                    if(imgresponse[0] == 'success' || imgresponse[0] == 'Success'){
                            if(imgresponse[1] == 'na'){info_ava = ' ';}
                            else{info_ava = imgresponse[1];}
                            var formDataA = {
                                'action': 'info',
                                'info_abo': info_abo,
                                'info_ava': info_ava
                            };
                            profile_ajax(target, formDataA,'info');
                    }else{
                        profile_stop(reply,'info');
                    }
                }
            });
}

<form id="info_for" class="form-horizontal col-lg-8 dblue_text" role="form" action="../php/profile_image.php" method="post" enctype="multipart/form-data">
    <div class="form-group">
        <label class="control-label col-sm-2" for="info_abo"><i class="fa fa-info"></i> About</label>
        <div class="col-lg-8 col-sm-10">
            <textarea class="form-control" id="info_abo" name="info_abo" placeholder="Let your friends know a little about yourself!"><?php echo $info_abo;?></textarea>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-sm-2" for="file"><i class="fa fa-picture-o"></i> Avatar</label>
        <div class="col-lg-8 col-sm-10"> 
            <input type="file" name="file" id="file">
        </div>
    </div>
</form>
<button onclick="info_save()" class="btn btn-info">Update</button>

<?php
    if(ISSET($log_username) && $user_ok == true){
        if(isset($_FILES["file"]["type"])){
            $validextensions = array("jpeg", "jpg", "png","gif");
            $temporary = explode(".", $_FILES["file"]["name"]);
            $file_extension = end($temporary);
            if ((($_FILES["file"]["type"] == "image/png") || ($_FILES["file"]["type"] == "image/jpg") || ($_FILES["file"]["type"] == "image/jpeg") || ($_FILES["file"]["type"] == "image/gif")) && ($_FILES["file"]["size"] < 100000) && in_array($file_extension, $validextensions)){
                if ($_FILES["file"]["error"] > 0){
                    echo "Return Code: " . $_FILES["file"]["error"] . "<br/><br/>";
                }else{
                    if (file_exists("../profiles/".$log_username."/".$_FILES["file"]["name"])){
                        echo "File Already Exists: ".$_FILES["file"]["name"];
                    }else{
                        $sourcePath = $_FILES['file']['tmp_name']; // Storing source path of the file in a variable
                        $targetPath = "../profiles/".$log_username."/".$_FILES['file']['name']; // Target path where file is to be stored
                        if(move_uploaded_file($sourcePath,$targetPath)){echo 'success|'.$_FILES["file"]["name"]; exit();}
                        else{echo 'Connection Error';exit();}
                    }
                }
            }else{
                echo "Invalid file Size or Type"; exit();
            }
        }else{echo 'success|na'; exit();}
    }else{echo 'Please Sign In'; exit();}
?>

</div>

Answer 1

The FormData Constructor takes an HTMLFormElement as the parameter not a selector string or a jQuery object.

data: new FormData(document.getElementById('info_for')),

or

data: new FormData($('#info_for')[0]),

or

data: new FormData(document.querySelector('#info_for')),