I am unable to upload image file to the mysql database using ajax jquery in php

Question

I am unable to upload image file to the mysql database after submitting the form. I am getting error message:

Uncaught TypeError: Illegal invocation

in my inspect element console tab.

<!DOCTYPE html>

<html>
<head>
    <title>Ajax Test</title>
    <style>
         .error{
             color: red;
        }
        .success{
            color: green;
        }
        .input-error {
            box-shadow: 0 0 5px red;
        }
        .input-success {
            box-shadow: 0 0 5px green;
        }
    </style>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            $('form').submit(function (event) {
                event.preventDefault();
                var inp = $("#t_input").val();
                var file = $("#t_file").val();
                var sub = $("#t_submit").val();
                $(".test_msg").load("hello_ajax.php", {
                    inp: inp,
                    type: "POST",
                    url: "hello_ajax.php",
                    file: new FormData($(file)[0]),
                    contentType: false,
                    cache: false,
                    processData: false,
                    success: function(feedback){
                        $("#t_file").val("");
                    },
                    sub: sub
                });
            });
        });
        </script>

</head>
<body>
    <h2>Testing Ajax</h2>
    <form action="hello_ajax.php" method="POST">
        <input id="t_input" type="text"  name="tst_input" placeholder="Hello" />
        <input id="t_file" type="file"  name="tst_file"/><br/>
        <input id="t_submit" name="submit" type="submit"  value="submit" /><br/>
        <p class="test_msg"></p>
    </form>
</body>
</html>

Here is the php code for uploading file to mysql database below after redirecting

<?php
    $host = "127.0.0.1";
    $id = "root";
    $pass = "";
    $db = "test_mysql";

    try{
        $conn = new PDO("mysql:host=$host; dbname=$db", $id, $pass);
        $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

    }catch(PDOException $e){
        echo "Error" . $e->getMessage();
    }

    if (isset($_POST['sub'])){


        if(isset($_FILES["t_file"])){
            $file = $_FILES['t_file'];
            $sql = "ISERT INTO uploadimage (imgName) VALUES (:img)";
            $stmt->prepare($sql);
            $stmt->bindValue(":img", $file, PDO::PARAM_STR);
            $stmt->execute();
        }else{
            echo "<span class='error'> Unable to input file </span><br/>";
        }

        $in = $_POST["inp"];

        $blk = false;

        if (empty($in)){
            echo "<span class='error'>Field must not be empty! </span>";

            $blk = true;
        }else{
            echo "<span class='success'>" . $in . "Successfull</span>";

        }
    }else{
        echo "<span class='test_msg'>There is some Error </span>";

    }
 ?>
<script>
    $("#test_input").removeClass("input-error");
    var blk = "<?php echo $blk; ?>";

    if(blk == true){
        $("#t_input").addClass("input-error");
        $("#t_input").val("");
    }
    if(blk == false){
        $("#t_input").val('');
    }
</script>

Possible duplicate of [How can I upload files asynchronously?](https://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously) — José A. Zapata, Sep 25 '17 at 22:22

score 0 · Answer 1 · answered Sep 25 '17 at 22:19

0

The $_FILES array contains metadata about the file, not the file itself. The actual file is stored in a temporary file in $_FILES['t_file']['tmp_name']. You can get the content using

$file = file_get_content($_FILES['t_file']['tmp_name']);

Check the documentation for the full structure of the array.

answered Sep 25 '17 at 22:19

solarc

5,638
2
40
51

You should check `$_FILES['t_file']['error']` before trying to use the file too. – solarc Sep 25 '17 at 22:21

I am unable to upload image file to the mysql database using ajax jquery in php

1 Answers1