Upload gambar dengan progress bar jquery php

Apakah Anda mencari contoh File Upload dengan Progress Bar menggunakan jQuery Ajax dan PHP 8. Saya menjelaskan secara sederhana tentang jQuery Ajax Image Upload dengan Animating Progress Bar di php 8. Saya ingin berbagi dengan Anda Upload File Ajax dengan Progress Bar menggunakan PHP 8 dan JQuery. langkah demi langkah menjelaskan Unggah File Besar dengan Bilah Kemajuan menggunakan jQuery Ajax di PHP 8. Baiklah, mari selami langkah-langkahnya

Artikel ini akan memberi Anda contoh sederhana tentang Cara Mengunggah Gambar dengan Progress Bar menggunakan Ajax dan PHP 8?










    
    
    File Upload with Progress Bar using jQuery Ajax and PHP 8</Nicesnippets.com;
</p><p>    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
</p><p>    <script src="https://code.jquery.com/jquery-3.3.1.min.js" type="text/javascript"></script>
</p><p>    <script type="text/javascript" src="jquery.form.min.js"></script>
</p><p>    <style type="text/css">
</p><p>        .progress {
</p><p>            display: none;
</p><p>            position: relative;
</p><p>            height: 25px;
</p><p>            background-color: #ddd;
</p><p>            border-radius: 15px;
</p><p>        }
</p><p>        .progress-bar {
</p><p>            background-color: green;
</p><p>            width: 0%;
</p><p>            height: 30px;
</p><p>            border-radius: 4px;
</p><p>        }
</p><p>        .percent {
</p><p>            position: absolute;
</p><p>            display: inline-block;
</p><p>            color: #fff;
</p><p>            font-weight: bold;
</p><p>            top: 87%;
</p><p>            left: 50%;
</p><p>            margin-top: -9px;
</p><p>            margin-left: -20px;
</p><p>        }
</p><p>        #outputImage {
</p><p>            display: none;
</p><p>            margin-top: 10px;
</p><p>        }
</p><p>        #outputImage img {
</p><p>            max-width: 300px;
</p><p>        }
</p><p>    </style>
</p><p></head>
</p><p><body>
</p><p>    <div class="container mt-5">
</p><p>       <div class="row">
</p><p>           <div class="col-md-12">
</p><p>                <div class="card w-75 m-auto">
</p><p>                    <div class="card-header text-center bg-info text-white">
</p><p>                        <h4>File Upload with Progress Bar using jQuery Ajax and PHP 8 - Nicesnippets.com</h4>
</p><p>                    </div>
</p><p>                    <div class="card-body">
</p><p>                        <div class='progress' id="progressDivId">
</p><p>                            <div class='progress-bar' id='progressBar'></div>
</p><p>                            <div class='percent' id='percent'>0%</div>
</p><p>                        </div>
</p><p>                        <div id='outputImage'></div>
</p><p>                        <div id='error'></div>
</p><p>                        <form action="uploadFile.php" id="uploadForm" name="frmupload"method="post" enctype="multipart/form-data">
</p><p>                            <div class="form-group">
</p><p>                                <label><strong>Select Image : </strong><span class="text-danger"> *</span></label>
</p><p>                                <input type="file" id="uploadImage" name="uploadImage" class="form-control"> 
</p><p>                            </div>
</p><p>                            <div class="d-flex justify-content-center">
</p><p>                                <input id="submitButton" type="submit" name='btnSubmit' value="Upload" class="btn btn-success">
</p><p>                            </div>
</p><p>                        </form>
</p><p>                    </div>
</p><p>                </div>       
</p><p>           </div>
</p><p>       </div> 
</p><p>    </div>
</p><p>    <script type="text/javascript">
</p><p>        $(document).ready(function () {
</p><p>            $('#submitButton').click(function () {
</p><p>                $('#uploadForm').ajaxForm({
</p><p>                    target: '#outputImage',
</p><p>                    url: 'uploadFile.php',
</p><p>                    beforeSubmit: function () {
</p><p>                        $("#outputImage").hide();
</p><p>                        if($("#uploadImage").val() == "") {
</p><p>                            $("#outputImage").show();
</p><p>                            $("#outputImage").html("<div class='alert alert-danger'>Choose a file to upload.</div>");
</p><p>                            return false; 
</p><p>                        }
</p><p>                        $("#progressDivId").css("display", "block");
</p><p>                        var percentValue = '0%';
</p><p>                        $('#progressBar').width(percentValue);
</p><p>                        $('#percent').html(percentValue);
</p><p>                    },
</p><p>                    uploadProgress: function (event, position, total, percentComplete) {
</p><p>                    var percentValue = percentComplete + '%';
</p><p>                    $("#progressBar").animate({
</p><p>                        width: '' + percentValue + ''
</p><p>                    },  {
</p><p>                            duration: 5000,
</p><p>                            easing: "linear",
</p><p>                            step: function (x) {
</p><p>                                percentText = Math.round(x * 100 / percentComplete);
</p><p>                                $("#percent").text(percentText + "%");
</p><p>                                if(percentText == "100") {
</p><p>                                    $("#outputImage").show();
</p><p>                                    $("#error").html("<div class='alert alert-success mt-2'>Image Successfully Upload.</div>");
</p><p>                                }
</p><p>                            }
</p><p>                        });
</p><p>                    },
</p><p>                    error: function (response, status, e) {
</p><p>                        alert('Oops something went.');
</p><p>                    },
</p><p>                    complete: function (xhr) {
</p><p>                        if (xhr.responseText && xhr.responseText != "error")
</p><p>                        {
</p><p>                            $("#outputImage").html(xhr.responseText);
</p><p>                        }else{  
</p><p>                            $("#outputImage").show();
</p><p>                            $("#outputImage").html("<div class='alert alert-danger'>Problem in uploading file.</div>");
</p><p>                            $("#progressBar").stop();
</p><p>                        }
</p><p>                    }
</p><p>                });
</p><p>            });
</p><p>        });
</p><p>    </script>
</p><p></body>
</p><p></html>
</p><p></p></pre><div><p></p><p><?php
</p><p>    if (isset($_POST['btnSubmit'])) {
</p><p>        $uploadfile = $_FILES["uploadImage"]["tmp_name"];
</p><p>        $folderPath = "uploads/";
</p><p>        if (! is_writable($folderPath) || ! is_dir($folderPath)) {
</p><p>            echo "error";
</p><p>            exit();
</p><p>        }
</p><p>        if (move_uploaded_file($_FILES["uploadImage"]["tmp_name"], $folderPath . $_FILES["uploadImage"]["name"])) {
</p><p>            echo '<img src="' . $folderPath . "" . $_FILES["uploadImage"]["name"] . '">';
</p><p>            exit();
</p><p>        }
</p><p>    }
</p><p>?>
</p><p></p></div><p>It will help you...</p>

kode php

Upload gambar dengan progress bar jquery php

Pos Terkait

Periklanan

BERITA TERKINI

Toplist Popular

Periklanan

Terpopuler

Token Data

Periklanan

Tentang Kami

Legal

Dukungan

Social