Baca Juga :  Belajar Membuat Website Menggunakan Wordpress Part 4

Membuat jQuery Ajax Image Upload dengan Animasi Progress Bar

0 441

Unggah gambar / file harus selalu memiliki progress. Ini adalah fitur yang diabaikan sebagian besar pengembang. Itu harus dilihat sebagai bagian dari fungsionalitas. Pengguna tidak dapat duduk dalam kegelapan dan terus menebak-nebak tentang proses unggahan file.

Ketika pengguna meminta server untuk melakukan beberapa operasi, itu baik untuk menunjukkan kepada mereka tentang progress. Ini adalah perilaku UI / UX yang baik. Progress bar adalah salah satu cara terbaik untuk menunjukkan status operasi yang sedang berlangsung. Dalam contoh ini, mari kita belajar membuat bilah kemajuan yang menganimasi menggunakan jQuery saat mengunggah gambar melalui AJAX.

Pilihan input file digunakan untuk memilih gambar dan file binari yang diposting ke PHP melalui AJAX. Setelah mengirim permintaan unggah file ke PHP, skrip AJAX menginisialisasi animasi jQuery untuk menampilkan progres unggah file. Bilah progres akan menyoroti persentase progresif dengan animasi jQuery. Plugin jQuery Form digunakan dalam kode contoh ini untuk menangani unggahan gambar AJAX dengan status progresif.

Formulir HTML dengan Upload File Gambar

Halaman arahan akan menampilkan formulir HTML dengan input file. Pengguna akan memilih file dan memposting data file dengan mengirimkan formulir melalui AJAX. Perpustakaan jQuery dan jQuery Form disertakan di awal skrip. Skrip validasi jQuery minimal ditambahkan untuk memeriksa apakah file gambar telah dipilih sebelum mengirimkan formulir.

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">

<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
    type="text/javascript"></script>
<script type="text/javascript" src="jquery.form.min.js"></script>

</head>
<body>
    <h1>jQuery Ajax Image Upload with Animating Progress Bar</h1>
    <div class="form-container">
        <form action="uploadFile.php" id="uploadForm" name="frmupload"
            method="post" enctype="multipart/form-data">
            <input type="file" id="uploadImage" name="uploadImage" /> <input
                id="submitButton" type="submit" name='btnSubmit'
                value="Submit Image" />

        </form>
        <div class='progress' id="progressDivId">
            <div class='progress-bar' id='progressBar'></div>
            <div class='percent' id='percent'>0%</div>
        </div>
        <div style="height: 10px;"></div>
        <div id='outputImage'></div>
    </div>
</body>
</html>

Formulir AJAX Kirim untuk Meminta Upload File PHP dengan Progressbar

Library formulir jQuery digunakan untuk mengirimkan formulir melalui AJAX dengan progress bar animasi. Fungsi ajaxForm () digunakan untuk mengirimkan file gambar binari ke PHP. Kemajuan pengunggahan gambar ditunjukkan dengan bilah kemajuan dalam fungsi callback uploadProgress. Juga, metode jQuery animate () dipanggil untuk menciptakan efek progresif pada elemen progress bar.

Baca Juga :  WordPress.com vs WordPress.org - Mana yang lebih baik? (Grafik perbandingan)
<script type="text/javascript">
$(document).ready(function () {
    $('#submitButton').click(function () {
    	    $('#uploadForm').ajaxForm({
    	        target: '#outputImage',
    	        url: 'uploadFile.php',
    	        beforeSubmit: function () {
    	        	  $("#outputImage").hide();
    	        	   if($("#uploadImage").val() == "") {
    	        		   $("#outputImage").show();
    	        		   $("#outputImage").html("<div class='error'>Choose a file to upload.</div>");
                    return false; 
                }
    	            $("#progressDivId").css("display", "block");
    	            var percentValue = '0%';

    	            $('#progressBar').width(percentValue);
    	            $('#percent').html(percentValue);
    	        },
    	        uploadProgress: function (event, position, total, percentComplete) {

    	            var percentValue = percentComplete + '%';
    	            $("#progressBar").animate({
    	                width: '' + percentValue + ''
    	            }, {
    	                duration: 5000,
    	                easing: "linear",
    	                step: function (x) {
                        percentText = Math.round(x * 100 / percentComplete);
    	                    $("#percent").text(percentText + "%");
                        if(percentText == "100") {
                        	   $("#outputImage").show();
                        }
    	                }
    	            });
    	        },
    	        error: function (response, status, e) {
    	            alert('Oops something went.');
    	        },
    	        
    	        complete: function (xhr) {
    	            if (xhr.responseText && xhr.responseText != "error")
    	            {
    	            	  $("#outputImage").html(xhr.responseText);
    	            }
    	            else{  
    	               	$("#outputImage").show();
        	            	$("#outputImage").html("<div class='error'>Problem in uploading file.</div>");
        	            	$("#progressBar").stop();
    	            }
    	        }
    	    });
    });
});
</script>

Kode Unggah File PHP

Ini adalah kode PHP biasa yang digunakan untuk mengunggah file gambar ke folder target yang ditentukan. Data file disimpan dalam superglobal $ _FILES. Fungsi PHP move_uploaded_file () digunakan untuk menyalin file yang dikirimkan ke folder target upload.

<?php
if (isset($_POST['btnSubmit'])) {
    $uploadfile = $_FILES["uploadImage"]["tmp_name"];
    $folderPath = "uploads/";
    
    if (! is_writable($folderPath) || ! is_dir($folderPath)) {
        echo "error";
        exit();
    }
    if (move_uploaded_file($_FILES["uploadImage"]["tmp_name"], $folderPath . $_FILES["uploadImage"]["name"])) {
        echo '<img src="' . $folderPath . "" . $_FILES["uploadImage"]["name"] . '">';
        exit();
    }
}
?>

jQuery Ajax Image Upload dengan Animasi Progress Bar Output

Ini adalah output dari contoh upload gambar Ajax dengan progress bar menggunakan animasi jQuery.

Demo

Get real time updates directly on you device, subscribe now.

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.