Dalam tutorial ini, saya akan menunjukkan kepada Anda cara membuat Angular 14 Multiple Images upload dengan contoh Preview menggunakan Bootstrap, Multipart File, FormData dan Progress Bar
2. Muat file plugin Images Loader
3. Struktur HTML yang diperlukan untuk pengunggah gambar
<form id="frm" method="post" class="needs-validation" novalidate=""> <!--Image container --> <div class="row" data-type="imagesloader" data-errorformat="Accepted file formats" data-errorsize="Maximum size accepted" data-errorduplicate="File already loaded" data-errormaxfiles="Maximum number of images you can upload" data-errorminfiles="Minimum number of images to upload" data-modifyimagetext="Modify immage"> <!-- Progress bar --> <div class="col-12 order-1 mt-2"> <div data-type="progress" class="progress" style="height: 25px; display:none;"> <div data-type="progressBar" class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" style="width: 100%;">Load in progress...</div> </div> </div> <!-- Model --> <div data-type="image-model" class="col-4 pl-2 pr-2 pt-2" style="max-width:200px; display:none;"> <div class="ratio-box text-center" data-type="image-ratio-box"> <img data-type="noimage" class="btn btn-light ratio-img img-fluid p-2 image border dashed rounded" src="./img/photo-camera-gray.svg" style="cursor:pointer;"> <div data-type="loading" class="img-loading" style="color:#218838; display:none;"> <span class="fa fa-2x fa-spin fa-spinner"></span> </div> <img data-type="preview" class="btn btn-light ratio-img img-fluid p-2 image border dashed rounded" src="" style="display: none; cursor: default;"> <span class="badge badge-pill badge-success p-2 w-50 main-tag" style="display:none;">Main</span> </div> <!-- Buttons --> <div data-type="image-buttons" class="row justify-content-center mt-2"> <button data-type="add" class="btn btn-outline-success" type="button"><span class="fa fa-camera mr-2"></span>Add</button> <button data-type="btn-modify" type="button" class="btn btn-outline-success m-0" data-toggle="popover" data-placement="right" style="display:none;"> <span class="fa fa-pencil-alt mr-2"></span>Modify </button> </div> </div> <!-- Popover operations --> <div data-type="popover-model" style="display:none"> <div data-type="popover" class="ml-3 mr-3" style="min-width:150px;"> <div class="row"> <div class="col p-0"> <button data-operation="main" class="btn btn-block btn-success btn-sm rounded-pill" type="button"><span class="fa fa-angle-double-up mr-2"></span>Main</button> </div> </div> <div class="row mt-2"> <div class="col-6 p-0 pr-1"> <button data-operation="left" class="btn btn-block btn-outline-success btn-sm rounded-pill" type="button"><span class="fa fa-angle-left mr-2"></span>Left</button> </div> <div class="col-6 p-0 pl-1"> <button data-operation="right" class="btn btn-block btn-outline-success btn-sm rounded-pill" type="button">Right<span class="fa fa-angle-right ml-2"></span></button> </div> </div> <div class="row mt-2"> <div class="col-6 p-0 pr-1"> <button data-operation="rotateanticlockwise" class="btn btn-block btn-outline-success btn-sm rounded-pill" type="button"><span class="fas fa-undo-alt mr-2"></span>Rotate</button> </div> <div class="col-6 p-0 pl-1"> <button data-operation="rotateclockwise" class="btn btn-block btn-outline-success btn-sm rounded-pill" type="button">Rotate<span class="fas fa-redo-alt ml-2"></span></button> </div> </div> <div class="row mt-2"> <button data-operation="remove" class="btn btn-outline-danger btn-sm btn-block" type="button"><span class="fa fa-times mr-2"></span>Remove</button> </div> </div> </div> </div> <div class="form-group row"> <div class="input-group"> <!--Hidden file input for images--> <input id="files" type="file" name="files[]" data-button="" multiple="" accept="image/jpeg, image/png, image/gif," style="display:none;"> </div> </div> </form> <!-- Upload Button --> <div class="row mt-2"> <div class="col-md-4 offset-md-8 text-center mb-4"> <button id="btnContinue" type="submit" form="frm" class="btn btn-block btn-outline-success float-right" data-toggle="tooltip" data-trigger="manual" data-placement="top" data-title="Continue"> Continue<span id="btnContinueIcon" class="fa fa-chevron-circle-right ml-2"></span><span id="btnContinueLoading" class="fa fa-spin fa-spinner ml-2" style="display:none"></span> </button> </div> </div>4. Inisialisasi pengunggah gambar dengan opsi default
5. Atur gambar untuk dimuat di init
var imagesloader = $('[data-type=imagesloader]').imagesloader({ imagesToLoad: [ {"Url":"1.jpg","Name":"Image1"}, {"Url":"2.jpg","Name":"Image2"} // more images here ] });_6. Opsi yang memungkinkan untuk mengonfigurasi pengunggah gambar
Plugin jQuery yang luar biasa ini dikembangkan oleh ITformat. Untuk Penggunaan Lanjutan lainnya, silakan periksa halaman demo atau kunjungi situs web resmi
Bagaimana cara mempratinjau gambar di Bootstrap?
getElementById("pratinjau"). src = e. target. hasil; . .
Bagaimana cara mengunggah dan menampilkan banyak gambar dengan javascript?
Akses elemen input dan output yang dibuat dalam file HTML. Buat juga array bernama imagesArray yang menyimpan gambar yang diunggah. Tambahkan pendengar acara perubahan ke kolom input yang aktif setiap kali pengguna mengunggah gambar.
Plugin mana untuk mengunggah banyak gambar dengan pratinjau di jQuery?
zona lepas. js adalah pustaka javascript untuk jQuery yang menyediakan cara mudah untuk mengunggah dan mempratinjau gambar dengan bilah progres yang bagus. Ini mendukung banyak unggahan file dan seret dan lepas unggahan.
Bagaimana cara mengunggah banyak gambar dengan pratinjau di laravel?
Cara Mengunggah Banyak Gambar di Laravel .
Langkah 1. Buat proyek Laravel baru menggunakan komposer. .
Langkah 2. Dalam proyek multipleImageApp, buat migrasi untuk membuat tabel produk
Langkah 3. Dalam migrasi, tambahkan kolom nama dan deskripsi
Langkah 4. Buat migrasi lain yang akan membuat gambar