How To Store Image To DB Without Using Form By Ajax JQuery

Posted By Bajarangi soft , Posted On 22-10-2020

In JQuery we can upload image or file with out form submit with Ajax request and PHP Script without page refresh. So today we discuss how to do it.

How To Store Image To DB Without Using Form By Ajax JQuery

Step 1: Create Index.php file and implement below html code :

<h2>Select Image</h2>
<input class="form-control" type="file" name="file" id="file" />
<br />
<span id="uploaded_image"></span>

Step 2: Implement below jquery to upload image:

<script>
    $(document).ready(function(){
        $(document).on('change', '#file', function(){
            var name = document.getElementById("file").files[0].name;
            var form_data = new FormData();
            var ext = name.split('.').pop().toLowerCase();
            if(jQuery.inArray(ext, ['gif','png','jpg','jpeg']) == -1)
            {
                alert("Invalid Image File");
            }
            var oFReader = new FileReader();
            oFReader.readAsDataURL(document.getElementById("file").files[0]);
            var f = document.getElementById("file").files[0];
            var fsize = f.size||f.fileSize;
            if(fsize > 2000000)
            {
                alert("Image File Size is very big");
            }
            else
            {
                form_data.append("file", document.getElementById('file').files[0]);
                $.ajax({
                    url:"upload.php",
                    method:"POST",
                    data: form_data,
                    contentType: false,
                    cache: false,
                    processData: false,
                    beforeSend:function(){
                        $('#uploaded_image').html("<label class='text-success'>Image Uploading...</label>");
                    },
                    success:function(data)
                    {
                        $('#uploaded_image').html(data);
                    }
                });
            }
        });
    });
</script>

Step 3: Create upload.php file and Implement php script to save posted image into folder and database:

<?php

//upload.php
if($_FILES["file"]["name"] != '')
{
    $test = explode('.', $_FILES["file"]["name"]);
    $ext = end($test);
    $name = rand(100, 999) . '.' . $ext;
    $location = '../image/' . $name;

    $host = "localhost"; /* Host name */
    $user = "root"; /* User */
    $password = ""; /* Password */
    $dbname = "bsoft"; /* Database name */

    $con = mysqli_connect($host, $user, $password,$dbname);
// Check connection
    if (!$con) {
        die("Connection failed: " . mysqli_connect_error());
    }

    // Insert record
    $query = "insert into image(image_name) values('".$name."')";
    mysqli_query($con,$query);

    move_uploaded_file($_FILES["file"]["tmp_name"], $location);

    echo '<img src="'.$location.'" height="250" width="425" class="img-thumbnail" />';
}
?>

Complete Code For Storing Image To DB Without Using Form By Ajax JQuery

<!DOCTYPE html>
<html>
<head>
    <title>How To Store Image To DB Without Using Form By Ajax JQuery</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<style>
    body {
        background: black;
    }
</style>
<body>
<br /><br />
<div class="container">
    <br><br><br>
    <div class="text-center">
        <h1 id="color" style="color: White;">Store Image To DB Without Using Form By Ajax JQuery</h1>
    </div>
    <br>
        <div class="well">
            <br />
            <h2>Select Image</h2>
            <input class="form-control" type="file" name="file" id="file" />
            <br />
            <span id="uploaded_image"></span>
        </div>
    <br>
</div>
</body>
</html>
<script>
    $(document).ready(function(){
        $(document).on('change', '#file', function(){
            var name = document.getElementById("file").files[0].name;
            var form_data = new FormData();
            var ext = name.split('.').pop().toLowerCase();
            if(jQuery.inArray(ext, ['gif','png','jpg','jpeg']) == -1)
            {
                alert("Invalid Image File");
            }
            var oFReader = new FileReader();
            oFReader.readAsDataURL(document.getElementById("file").files[0]);
            var f = document.getElementById("file").files[0];
            var fsize = f.size||f.fileSize;
            if(fsize > 2000000)
            {
                alert("Image File Size is very big");
            }
            else
            {
                form_data.append("file", document.getElementById('file').files[0]);
                $.ajax({
                    url:"upload.php",
                    method:"POST",
                    data: form_data,
                    contentType: false,
                    cache: false,
                    processData: false,
                    beforeSend:function(){
                        $('#uploaded_image').html("<label class='text-success'>Image Uploading...</label>");
                    },
                    success:function(data)
                    {
                        $('#uploaded_image').html(data);
                    }
                });
            }
        });
    });
</script>