通过ajax jquery上传文件

Question

I am trying to upload file input with jquery ajax but without refreshing the page. my html form is

 <form name="uploadform" id="uploadform" method="post" enctype="multipart/form-data">
 <div name="profileBiodata" id="profileBiodata" style="display:none">
            <input type="file" id="file" name="file">
            <input type="submit"  id="submit" value="Upload" >
        </div>
</form>

and my script is

$(document).ready(function() {

    // process the form
    $('#uploadform').submit(function() {
        var filename = $("#file").val();

        $.ajax({
            url: '../PhpProject1/ProfileBiodataUpload.php',
            dataType: 'json',
            type: 'POST',
            data: {"op": "upload",  "filename": filename},
            success: function(response) {

                if (response.status == "success") {
                    alert("file exists");

                }
                else if (response.status == "failure")

                {
                    alert("file not exists");

                }


            },
            error: function(x, e) {
                if (x.status === 0) {
                    alert('You are offline!!\n Please Check Your Network.');
                } else if (x.status === 404) {
                    alert('Requested URL not found.');
                } else if (x.status === 500) {
                    alert('Internel Server Error - Please try after relogin to the application');
                } else if (e === 'parsererror') {
                    alert('Parsing JSON Request failed.');
                } else if (e === 'timeout') {
                    alert('Request Time out.');
                } else {
                    alert('Unknow Error.\n' + x.responseText);
                }
            }
        });


    });

});

my php page is

<?php

if (isset($_POST['filename']))
{
        echo '{"status" : "success"}';
     }

?>

but i am getting the output alert You are offline!!\\n Please Check Your Network. how to solve this.Any one help please.thanks in advance

Answer 1

It works fine. Below is the modified code.

HTML form

<form name="uploadform" id="uploadform" method="post" enctype="multipart/form-data">
    <div name="profileBiodata" id="profileBiodata">
        <input type="file" id="file" name="file">
        <input type="submit"  id="submit" value="Upload" >
    </div>
</form>

Script

$(document).ready(function() {

// process the form
$('#uploadform').submit(function() {
    var filename = $("#file").val();

    $.ajax({
        url: 'ProfileBiodataUpload.php',
        dataType: 'json',
        type: 'POST',
        data: {"op": "upload",  "filename": filename},
        success: function(response) {
            if (response.status == "success") {
                alert("file exists");
            }
            else if (response.status == "failure")
            {
                alert("file not exists");
            }
        },
        error: function(x, e) {
            if (x.status === 0) {
                alert('You are offline!!\n Please Check Your Network.');
            } else if (x.status === 404) {
                alert('Requested URL not found.');
            } else if (x.status === 500) {
                alert('Internel Server Error - Please try after relogin to the application');
            } else if (e === 'parsererror') {
                alert('Parsing JSON Request failed.');
            } else if (e === 'timeout') {
                alert('Request Time out.');
            } else {
                alert('Unknow Error.\n' + x.responseText);
            }
        }
    });
    return false;
});
});

ProfileBiodataUpload.php

<?php
if (isset($_POST['filename']))
{
    echo '{"status" : "success"}';
}
?>