Menampilkan Gambar Sebelum Upload ke Server

Publish Date : 16-11-2023 , dibaca 9434 kali, Hari ini dibaca : 1 kali ,0 comments

Tutorial kali ini kita akan membahas Cara Menampilkan Gambar Sebelum Upload Ke Server dengan javascript, sebelumnya admin sudah memberikan tutorial Menampilkan type File dan Ukuran pada input file , nah sedikit berbeda dengan sebelumnya kali ini kita akan menampilkan gambar saja sebelum upload file , karena kita akan membuat validasi tipe gambar dengan javascript sebelum gambar dipilih / diupload.

Demo Download

Pada contoh ini saya menemukan script yang cukup simple untuk menampilkan gambar sebelum upload file , berikut script nya :

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Button Alignment Senterwebs.com</title>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1">
    <link rel="stylesheet"
          href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
  </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head>
 
<body>
    <div class="container">
        <div class="row bg-light">
            <div class="col-sm-6 mx-auto ">
        <h1 style="text-align:center;color:green;">
          Senterwebs.Com
      </h1>
        <form>
            <div class="form-group">
                <label for="">Image</label>
                 <img id="output" width="200" />
                  <input type="file" name="service_flow" class="form-control" onchange="loadFile(event)">
            </div>
            <div class="form-group">
                <button class="btn btn-success btn-sm"
                        type="submit">
                     Submit
                </button>
                <button class="btn btn-danger btn-sm float-right"
                        type="reset">
                     Reset
                </button>
            </div>
        </form>
        </div>
    </div>
</div>
</body>
 
</html>

kemudian, berikut ini adalah code javascript yang kita gunakan , tempatkan dibawah tag </html>

<script>
    var loadFile = function(event) {
        var image = document.getElementById('output');
        image.src = URL.createObjectURL(event.target.files[0]);
    };

</script>

Simpan script diatas dalam 1 buah file , bernama index.html , dan anda dapat menjalankan scrpt diatas pada browser anda .

Pada kesempatan lain , mungkin kita membutuhkan validas gambar , berikut ini contoh script yang dapat kita gunakan :

JavaScript Code

function fileValidation(){
    var fileInput = document.getElementById('file');
    var filePath = fileInput.value;
    var allowedExtensions = /(\.jpg|\.jpeg|\.png|\.gif)$/i;
    if(!allowedExtensions.exec(filePath)){
        alert('Please upload file having extensions .jpeg/.jpg/.png/.gif only.');
        fileInput.value = '';
        return false;
    }else{
        //Image preview
        if (fileInput.files && fileInput.files[0]) {
            var reader = new FileReader();
            reader.onload = function(e) {
                document.getElementById('imagePreview').innerHTML = '<img src="'+e.target.result+'"/>';
            };
            reader.readAsDataURL(fileInput.files[0]);
        }
    }
}

HTML CODE

tempatkan tepat dibawah code diatas , dan simpan dengan nama "index.html"

<!-- File input field -->
<input type="file" id="file" onchange="return fileValidation()"/>

<!-- Image preview -->
<div id="imagePreview"></div>

Membuat Animasi Loading Saat page dimuat
Previous Post

Simple Responsive Jquery Accordion
Next Post

Produk Rekomendasi

Ebook Membuat Website Dinamis PHP MYSQLi + Source Code

Ebook Membuat Website Dinamis PHP V.2 + Source Code

Aplikasi Perpustakaan Berbasis Web PHP MYsqli + Source Code

Tutorial Blog dan Website PHP MYSQLi

Contact Us

Statistik

Tags

Menampilkan Gambar Sebelum Upload ke Server

index.html

JavaScript Code

HTML CODE

Produk Rekomendasi

Artikel Terkait

Diskusi

Youtube Tutorial

Random Posts