Image Upload PHP Jquery MySQL laravel

bywsdeveloper

 Image Upload  PHP Jquery  MySQL  laravel 

To create an image upload functionality using HTML, jQuery, PHP, MySQL, and Laravel, you can follow these steps:

  1. HTML Form: Create an HTML form to upload the image.
  2. jQuery: Use jQuery for client-side validation and to submit the form asynchronously.
  3. PHP (Laravel): Handle the image upload logic on the server-side using Laravel.
  4. MySQL: Store the image path or binary data in the MySQL database.

Here's a basic example of how you can implement this:

HTML Form (upload_image.blade.php):

html
<!DOCTYPE html>
<html>
<head>
    <title>Image Upload</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <h2>Upload Image</h2>
    <form id="uploadForm" enctype="multipart/form-data">
        <input type="file" name="image" id="image">
        <button type="submit" id="submit">Upload</button>
    </form>

    <div id="message"></div>

    <script>
        $(document).ready(function() {
            $('#uploadForm').submit(function(e) {
                e.preventDefault();
                var formData = new FormData(this);

                $.ajax({
                    url: '/upload',
                    type: 'POST',
                    data: formData,
                    success: function(response) {
                        $('#message').html(response);
                    },
                    cache: false,
                    contentType: false,
                    processData: false
                });
            });
        });
    </script>
</body>
</html>

Laravel Controller (ImageController.php):

php
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Image;

class ImageController extends Controller
{
    public function showForm()
    {
        return view('upload_image');
    }

    public function upload(Request $request)
    {
        $request->validate([
            'image' => 'required|image|mimes:jpeg,png,jpg,gif|max:2048',
        ]);

        $imageName = time().'.'.$request->image->extension();

        $request->image->move(public_path('images'), $imageName);

        $image = new Image;
        $image->path = '/images/' . $imageName;
        $image->save();

        return 'Image uploaded successfully.';
    }
}

Route (web.php):

php
use App\Http\Controllers\ImageController;

Route::get('/upload', [ImageController::class, 'showForm']);
Route::post('/upload', [ImageController::class, 'upload']);

Model (Image.php):

php
<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Image extends Model
{
    use HasFactory;

    protected $fillable = [
        'path',
    ];
}

Make sure you have a folder named "images" inside your public directory where uploaded images will be stored. Also, ensure that your Laravel project has proper file permissions for writing to this directory.

This is a basic example to get you started. You may need to enhance it according to your specific requirements, such as adding authentication, validation, error handling, etc.

Tags:
Previous Post Next Post