Contoh bilah kemajuan pengunggahan file bootstrap
Pada artikel ini, kita akan melihat upload file dengan progress bar di Angular 13. Di sini kita akan belajar cara mengunggah gambar dengan progress bar di Angular 13. Kami akan membuat formulir reaktif sederhana dengan opsi unggah gambar. Juga, buat API PHP untuk mengunggah gambar. Di layanan API, kami akan menulis kode untuk menampilkan kode persentase bilah kemajuan
Langkah 1. Buat Aplikasi Baru
Pada langkah ini, kita akan membuat aplikasi baru menggunakan perintah di bawah ini
ng new my-new-app
Baca Juga. Bootstrap Modal Dalam Angular 13
Langkah 2. Instal Bootstrap 5
Sekarang, kita akan menginstal paket inti bootstrap menggunakan perintah di bawah ini
npm install bootstrap --save
_
Sekarang, kita perlu menyertakan bootstrap CSS seperti node_modules/bootstrap/dist/css/bootstrap. min. css. Jadi, tambahkan ke sudut. file json
sudut. json
"styles": ["node_modules/bootstrap/dist/css/bootstrap.min.css","src/styles.css"],
Langkah 3. Modul Impor
Sekarang, kita akan mengimpor HttpClientModule, ReactiveFormsModule, dan ImageUploadService ke aplikasi. modul. berkas .ts
Unggah File Asinkron Dengan Indikator Bootstrap Progress BarAjax Form PlugIn.
CSS styles are done using Bootstrap Library.
...
- 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