Contoh bilah kemajuan pengunggahan file bootstrap

Daftar Isi

• "JQUERY AJAX FORM" menyediakan fitur unggah File Asinkron

• Plugin dapat ditemukan di tautan di bawah ini. -

• Untuk mengetahui tentang dasar-dasar plugin ini, periksa posting saya sebelumnya di mana saya telah menunjukkan demo untuk unggahan formulir asinkron

• Dalam Demo Ini, "Kita akan melihat unggahan File dengan indikator bilah progres BOOTSTRAP"

• Beberapa fakta dari demo ini. -

---- Menggunakan Server WAMP untuk menyebarkan Demo
---- File php tiruan KOSONG (dummy-file-upload. php) untuk target upload file
---- BOOTSTRAP untuk indikator gaya dan bilah kemajuan

• Struktur direktori Demo adalah seperti di bawah ini. -

• Plugin ini menyediakan metode yang disebut "uploadProgress" dengan 4 parameter. -

peristiwa. menunjukkan acara Progress bar
posisi. Posisi upload file saat ini
total. Ukuran Berkas Total
persenLengkap. File yang diunggah dalam persen

• Markup HTML untuk panel bootstrap dan formulir unggah file adalah seperti di bawah ini

    
    
    


    

        
        

            

                
Ajax File Upload With Bootstrap
            
            

               
               UPLOAD
            
            

                

                    This Demo is For Asynchronous File upload using Ajax Form PlugIn.
                    CSS styles are done using Bootstrap Library.
                

                

                    
                    

                        

                            0% Complete
                        
                    
                
                    
                    
                    
                    
                    

                        ...
                    
                    
            
        
        
    
    
    
    

• File javascript untuk validasi dan pengunggahan file adalah seperti di bawah ini,

/**
 * Created by saan on 10/6/13.
 */
var TS_AJAX_FORM ={

    /*ERROR Message Display Element Reference*/
    MY_MESSAGE_ERR : $(".my-message-error"),

    /*SUCCESS Message Display Element Reference*/
    MY_MESSAGE_SUC : $(".my-message-success"),

    /*Shows the input message and hides it in 5 seconds*/
    showMessage:function(msg, type){

        var message = (type === 'ERR')? this.MY_MESSAGE_ERR : this.MY_MESSAGE_SUC,

            txt = $(message).find('a');

        $(txt).html(msg);

        message.fadeIn('fast',function(){

            message.fadeOut(5000);
        })
    },
    /*
     *Handler: success, Once the form is submitted and response
     *arrives, it will be activated.
     */
    successHandler: function(responseText, statusText, xhr, form){

        $('.ts-file-panel .progress-bar').width('100%');
        $('.ts-hidden-bar').delay(1000).fadeOut('fast')
    },
    /*
     *responseText, statusText, xhr, $form: beforeSubmit, for validation   Let, title and roll is your required field.
     *Let's show an error message if these fields are blank.
     */
    beforeSubmitHandler:function(arr, form, options){

        var isValid = true;

        $.each(arr,function(index, aField){

            if('filename' === aField.name && aField.value === ""){

                TS_AJAX_FORM.showMessage("Please Select a File.", "ERR");

                isValid = false;
            }
        });

        if(isValid){
            $('.ts-hidden-bar').fadeIn();
        }
        return isValid;
    },
    handleUploadProgress: function(event, position, total, percentComplete ){

        $('.ts-file-panel .progress-bar').width(percentComplete+'%');
        $('.ts-file-size').html((total/(1024*1024))+'MB');
        $('.ts-file-completed').html('Position'+position+' event '+event);
    },
    /*Initializing Ajax Form*/
    initMyAjaxForm:function(){

        $("#my-detail-form").ajaxForm({

            beforeSubmit:this.beforeSubmitHandler,

            success:this.successHandler,

            clearForm:true,

            uploadProgress:this.handleUploadProgress

        });
    }
};
/*My Small Tutorial: Execution point*/
$(document).ready(function(){
    TS_AJAX_FORM.initMyAjaxForm()
});

• Render awal panel adalah seperti di bawah ini. -

• Inspeksi markup Firebug menunjukkan elemen formulir menggunakan multipart untuk mengunggah file. Screenshot untuk ini adalah seperti di bawah ini,

• Ketika tidak ada file yang dipilih dan tombol unggah ditekan, pesan kesalahan validasi akan ditampilkan di bagian bawah panel. Screenshot untuk ini seperti di bawah ini,

• Ketika sebuah file dijelajahi dan dipilih maka akan terlihat seperti di bawah layar,

• Tangkapan layar di bawah ini menunjukkan unggahan file sedang berlangsung/sedang berlangsung,

• Inspeksi Firebug pada tangkapan layar unggahan file seperti di bawah ini,

• Konsol Firebug untuk screenshot POST  HEADER seperti di bawah ini,

• Tautan Unduh kode demo. -

tautan unduhan demo

Terkait