Cara Menampilkan Gambar Sebelum Di Upload Menggunakan Angularjs

Upload adalah suatu kegiatan menggunggah suatu data. Sebelum melakukan unggahan data atau file dengan format gambar  kita bisa menampilkan gambar yang akan di unggah. Hal tersebut membantu user agar file yang akan di unggah atau di upload adalah file yang benar sesuai yang diinginkan. Dan karena hal tersebut saya akan bahas tentang Cara Menampilkan Gambar Sebelum Di Upload Menggunakan Angularjs.

Cara Menampilkan Gambar Sebelum Di Upload Menggunakan Angularjs tidak terlalu rumit. Teman-teman silahkan mulai dengan struktur html seperti yang ada di bawah ini.

<!DOCTYPE html>

<html>

<head>

                <title>Cara Menampilkan Gambar Sebelum Di Upload Menggunakan Angularjs</title>

                <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

</head>

<body ng-app="myApp" ng-controller="myCtrl">

                <label for="">Gambar</label>

                <input type="file" ng-model-instant onchange="angular.element(this).scope().imageUpload(event)" required><br>

                <img class="thumb" width="300" ng-src="{{img}}" />

 

</body>

<html>

Untuk struktur di atas saya memberikan direktif onchange="angular.element(this).scope().imageUpload(event)" pada tag input untuk menjalankan fungsi imageUpload() ketika melakukan event onchange atau browse file. Kemudian teman-teman lanjutkan dengan membuat fungsi imageUpload() didalam sebuah controller seperti script di bawah ini.

<script>

                var app = angular.module("myApp",[]);

                app.controller("myCtrl", function($scope){

                                $scope.imageUpload = function (event) {

            var files = event.target.files;

            for (var i = 0; i < files.length; i++) {

                var file = files[i];

                var reader = new FileReader();

                reader.onload = $scope.imageIsLoaded;

                reader.readAsDataURL(file);

            }

        }

        $scope.imageIsLoaded = function (e) {

            $scope.$apply(function () {

                $scope.img = e.target.result;           

            });

        }

                })

</script>

Di dalam controller ada dua fungsi yang dibuat. Fungsi imageUpload() adalah fungsi untuk mengambil file gambar dari tag input dengan event onchange yang kemudian data di looping. Dan fungsi imageIsLoaded() adalah fungsi untuk menampung gambar yang sudah di dapat dan kemudian di jalankan fungsi tersebut dengan $apply untuk ditampilkan di tag img pada html.

Jika teman-teman buka di browser maka tampilannya akan seperti gambar di bawah. Dimana sebelum kita melakukan upload file gambar maka gambar akan tampil terlebih dahulu.

Demikian artikel tentang Cara Menampilkan Gambar Sebelum Di Upload Menggunakan Angularjs. Semoga dapat bermanfaat dan selamat mencoba.