Postingan lainnya

bagaimana cara menampilkan progress bar upload ?

bagaimana cara menampilkan progress bar upload saat user mengupload? skenarionya seperti ini : 1. user menekan tombol upload 2. kemudian user pilih image/file yang akan di upload (multiple) - klik ok 3. progress bar jalan sampai 100% lalu gambar di tampilkan 4. di tekan submit untuk di simpan pada folder upload

php

@arif90

176 Kontribusi 16 Poin

Diperbarui 8 tahun yang lalu

3 Jawaban:

sudah pernah ditanya disini [link]https://sekolahkoding.com/forum/pertanyaan/help-me-jquery-upload[/link] Kalo ngga mau pake plugin alias mau bikin sendiri coba belajar ajaxnya disini http://www.sitepoint.com/html5-javascript-file-upload-progress-bar/

@immeng

10 Kontribusi 18 Poin

Dipost 9 tahun yang lalu

mungkin cara kerjanya sama seperti punya saya ini http://www.indofreeroam.ml/upload-lagu

@aldhinya

29 Kontribusi 9 Poin

Dipost 8 tahun yang lalu

Jawaban Terpilih

lewat belakang pakai AJAX. nih potongan kode yg sy pakai, kali-kali bisa membantu

<?php
....
this.uploadImage = function (event) {
        var formData = new FormData();

        $.each(event.target.files, function (key, value) {
            formData.append(key, value);
        });

        $progress.fadeIn();
        $progress.progress({
            percent: 0,
        });

        $file.prop('disabled', true);

        $.ajax({
            url: config.url.api + 'System/uploadImage',
            type: 'POST',
            data: formData,
            cache: false,
            dataType: 'json',
            processData: false,
            contentType: false,
            success: function(result, textStatus, jqXHR) {

                if(result.status == 'success') {
                    $a.show();

                    $progress.progress({
                        percent: 50,
                    });

                    $img.load(function() {
                        // $hidden.val(result.data);
                        uiUploadImageFileName = result.data;

                        $progress.progress({
                            percent: 100,
                        });
                        $progress.fadeOut('slow');
                        $file.prop('disabled', false);

                    }).prop('src', result.data);
                }
                else {
                    $progress.fadeOut();
                    $file.prop('disabled', false);
                    $file.val('');

                    $msgbox.alert(result.message);
                }

            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.log(textStatus);
                $loading.hide();
                $file.prop('disabled', false);
            },
        });
    };
...

trus di server side pakai php begini

<?php

    public function actionUploadImage() {
//        if(!$this->authen('admin'))
//            return $this->denied();

        if(!empty($_FILES)) {

            $fileType = $_FILES[0]['type'];

            switch($fileType) {
                case 'image/png':
                case 'image/jpeg':
                case 'image/gif':

                    $fileName = $this->encrypt();
                    $splitFileType = explode('/', $fileType);

                    $fileName .= '.'.$splitFileType[1];

                    $filePath = 'asset/tmp/'.$fileName;
                    $fileURL = $this->getTmpUrl($fileName);

                    $fileOnClient = $_FILES[0]['tmp_name'];

                    move_uploaded_file($fileOnClient, $filePath);

                    return $this->success('FILE_UPLOADED', $fileURL);
                    break;
                default:
                    return $this->failed('FILE_TYPE_DENIED');
            }
        }
        else
            return $this->failed('FILE_UPLOAD_FAILED');
    }

@QaiserLab

366 Kontribusi 390 Poin

Dipost 8 tahun yang lalu