HDTuto.com

Ajax multiple image upload using bootstrap-fileinput in PHP

ajax is an important part in web development. here i will share with you to upload multiple images with preview using bootstrap-fileinput in PHP. this tutorial covers steps to upload multiple images with preview and also upload with process so you can see how much is left.

Bootstrap fileinput is a bootstrap plugin. bootstrap-fileinput provide us to upload multiple images or file using dropzone js. bootstrap-fileinput is also use dropzone js for image upload. bootstrap-fileinput is super and amazing plugin.

So, let's create both file index.php and imageUpload.php file code. let's create both files.

index.php

<!DOCTYPE html>
<html lang="en">
<head>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.7/css/fileinput.css" media="all" rel="stylesheet" type="text/css"/>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" media="all" rel="stylesheet" type="text/css"/>
    <style type="text/css">
        .main-section{
            margin:0 auto;
            padding: 20px;
            margin-top: 100px;
            background-color: #fff;
            box-shadow: 0px 0px 20px #c1c1c1;
        }
        .fileinput-remove,
        .fileinput-upload{
            display: none;
        }
    </style>
</head>
<body class="bg-danger">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-sm-12 col-11 main-section">
                <h1 class="text-center text-danger">File Input Example</h1><br>
                    <div class="form-group">
                        <div class="file-loading">
                            <input id="file-1" type="file" name="file" multiple class="file" data-overwrite-initial="false" data-min-file-count="2">
                        </div>
                    </div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.7/js/fileinput.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.7/themes/fa/theme.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" type="text/javascript"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" type="text/javascript"></script>

    <script type="text/javascript">
        $("#file-1").fileinput({
            theme: 'fa',
            uploadUrl: "/imageUpload.php",
            allowedFileExtensions: ['jpg', 'png', 'gif'],
            overwriteInitial: false,
            maxFileSize:2000,
            maxFilesNum: 10,
            slugCallback: function (filename) {
                return filename.replace('(', '_').replace(']', '_');
            }
        });
    </script>

</body>
</html>

imageUpload.php

<?php

	if (!empty($_FILES['file'])) {

	    $target = "upload/". $_FILES["file"]["name"];
	    move_uploaded_file($_FILES['file']['tmp_name'], $target);
	    echo json_encode(['uploaded' => $target]); 

	} else {

		echo json_encode(['error'=>'No files found for upload.']); 

	}

?>

make sure you need to create "upload" folder for store image.

You can see here demo on bellow button

See Demo Here

I hope you found your best.....



April 14, 2018 | Category : PHPBootstrapJQueryJQuery PluginAjax
Related Posts


Do you like bellow Tutorials ?


Blog Search

New Articles

Blog Categories

Random Articles