使用PHP进行MySQL更新查询，导致使用AJAX进行错误回调

Question

I'm very new to PHP and backend web development, so forgive me if I do or say anything too stupid.

I'm trying to upload in image with PHP, use jQuery and AJAX to call the PHP function, and then use MySQL to store the image path of the data. For some reason though, when I try to send the query to the MySQL database to tell it to update the image path, it creates an error and uses the error callback for AJAX. I've tested the query, and it only creates an error when used in this function. I've also found that it doesn't create an error if I use a query that doesn't involve an UPDATE. I'm completely lost as to why this is happening.

Relevant code

HTML:

<form enctype="multipart/form-data">
    Select image to upload:
    <input id="pic" type="file" name="Picture" />
    <button id="upload">Upload</button>
</form>

Javascript

        var file_data = $('#pic').prop('files')[0];
        var form_data = new FormData();
        form_data.append('file',file_data);
        alert(form_data);
        $.ajax({
            url: 'upload.php',
            cache: false,
            processData: false,
            data: form_data,
            type: 'post',
            success: function(response){
                alert("Success"+response);
            },
            error: function(){
                alert('Error');
            }
        });

PHP 'upload.php'

<?php
$servername = "localhost";
$username = "foo";
$password = "bar";
$dbname = "name";
//
$conn = new mysqli($servername, $username, $password, $dbname);

if (!$conn) {
    die("Connection failed: " . mysqli_connect_error());
}
echo "Connected successfully";
$sql = "UPDATE table SET var='test' WHERE id=1";
$conn->query($sql);
?>

Answer 1

call the java-script code, on submit button click event,

$('#upload').on('click', function() { 

//the above java-script code;

});