Bootstrap mengunggah beberapa pratinjau gambar

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

Table of Contents Show

Server pengembangan
Perancah kode
Menjalankan pengujian unit
Menjalankan tes end-to-end
Bantuan lebih lanjut
Lebih banyak fitur
Bagaimana cara menggunakannya
Bagaimana cara mempratinjau gambar di Bootstrap?
Bagaimana cara mengunggah dan menampilkan banyak gambar dengan javascript?
Plugin mana untuk mengunggah banyak gambar dengan pratinjau di jQuery?
Bagaimana cara mengunggah banyak gambar dengan pratinjau di laravel?

Untuk detail lebih lanjut, silakan kunjungi

Angular 14 Beberapa Gambar diunggah dengan Pratinjau

Istirahatkan server API untuk Klien Angular ini

Contoh Node Express File Upload Rest API

Unggah File Node Express dengan contoh Google Cloud Storage

Unggah File Ekspres Node ke contoh MongoDB

Contoh upload File Spring Boot Multipart (ke folder statis).

Contoh upload File Spring Boot Multipart (ke database).

Lebih banyak latihan

Penyimpanan Firebase Angular 14. Contoh Unggah/Tampilkan/Hapus File

Contoh Aplikasi CRUD Angular 14 dengan Web API

Contoh Paginasi 14 Angular. ngx-pagination

Angular 14 JWT Otentikasi & Otorisasi dengan Web API

Contoh Validasi Formulir Sudut 14 (Bentuk Reaktif)

Fullstack dengan Node

Angular 14 + Node Express + contoh MySQL

Contoh Angular 14 + Node Express + PostgreSQL

Contoh Angular 14 + Node Express + MongoDB

Angular 14 + Node Ekspres. Contoh unggahan file

Fullstack dengan Spring Boot

Contoh Angular 14 + Spring Boot + H2 Embedded Database

Angular 14 + Spring Boot + contoh MySQL

Angular 14 + Spring Boot + Contoh PostgreSQL

Contoh Angular 14 + Spring Boot + MongoDB

Sudut 14 + Boot Pegas. Contoh unggahan file

Tumpukan penuh dengan Django

Contoh Sudut + Django

Sudut + Django + MySQL

Sudut + Django + PostgreSQL

Tanpa server dengan Firebase

Angular 14 Firebase CRUD dengan Realtime DataBase

Contoh CRUD Angular 14 Firestore

Penyimpanan Firebase Angular 14. Contoh Unggah/Tampilkan/Hapus File

Integrasi (jalankan backend dan frontend di server/port yang sama)

Cara mengintegrasikan Angular dengan Node Restful Services

Cara Mengintegrasikan Angular dengan Spring Boot Rest API

Server pengembangan

Jalankan ng serve --port 8081_ untuk server dev. Arahkan ke http://localhost:8081/. Aplikasi akan dimuat ulang secara otomatis jika Anda mengubah salah satu file sumber

Perancah kode

Membangun

Jalankan ng build_ untuk membangun proyek. Artefak build akan disimpan di direktori dist/

Menjalankan pengujian unit

Jalankan ng test untuk menjalankan pengujian unit melalui Karma

Menjalankan tes end-to-end

Jalankan ng e2e_ untuk menjalankan tes end-to-end melalui platform pilihan Anda. Untuk menggunakan perintah ini, Anda harus terlebih dahulu menambahkan paket yang mengimplementasikan kemampuan pengujian end-to-end

Bantuan lebih lanjut

Untuk mendapatkan bantuan lebih lanjut tentang Angular CLI, gunakan ng help atau lihat halaman Ikhtisar Angular CLI dan Referensi Perintah

Bagaimana cara mengunggah dan menampilkan banyak gambar? . Sebelum memulai, saya ingin memperjelas bahwa kami hanya akan mengunggah gambar di frontend dan bukan backend (juga dikenal sebagai…

Ukuran file. 16. Total 8 KBViews. 10083Pembaruan Terakhir. 25/08/2021 03. 44. 00 UTC Tanggal Publikasi. 24/08/2021 02. 57. 52 Situs Resmi UTC. Pergi ke situs web Lisensi. MIT

Unduh Demo

Lainnya dalam kategori ini

Lihat Plugin yang Direkomendasikan

TOP 100 Plugin jQuery 2022

Chrome, IE9+, FireFox, Opera, Safari#Bootstrap#bootstrap 4#pengunggah#unggah

Pemuat Gambar adalah plugin pengunggah bertenaga Bootstrap & jQuery yang menyediakan antarmuka yang mudah digunakan dan tampak bagus untuk mengunggah banyak gambar ke server web

Lebih banyak fitur

Pratinjau gambar kecil
Putar Gambar
Atur urutan gambar dalam antrean
Validasi file

Bagaimana cara menggunakannya

1. Muat library jQuery yang diperlukan, framework Bootstrap 4, dan font ikonik Font Awesome

<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/cdn/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/js/all.min.js" crossorigin="anonymous"></script>

2. Muat file plugin Images Loader

<link rel="stylesheet" href="./jquery.imagesloader.css" />
<script src="./jquery.imagesloader.js"></script>

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

$(document).ready(function () {

  var imagesloader = $('[data-type=imagesloader]').imagesloader({
      // options here
  });

  //Form
  $frm = $('#frm');
  // Form submit
  $frm.submit(function (e) {
    var $form = $(this);
    var files = imagesloader.data('format.imagesloader').AttachmentArray;
    var il = imagesloader.data('format.imagesloader');
    if (il.CheckValidity())
      alert('Upload ' + files.length + ' files');        
    e.preventDefault();
    e.stopPropagation();
  });

});

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

var imagesloader = $('[data-type=imagesloader]').imagesloader({

    // animation speed
    fadeTime: 'slow', 

    // input ID
    inputID: 'files', 

    // maximum number of files
    maxfiles: 4,

    // max image bytes
    maxSize: 5000 * 1024,

    // min image count
    minSelect: 1,
    
    // allowed file types
    filesType: ["image/jpeg", "image/png", "image/gif"],

    // max/min height
    maxWidth: 1280,
    maxHeight: 1024,

    // image type
    imgType: "image/jpeg"

    // image quality from 0 to 1
    imgQuality: .9,

    // error messages
    errorformat: "Accepted format",
    errorsize: "Max size allowed",
    errorduplicate: "File already uploaded",
    errormaxfiles: "Max images you can upload",
    errorminfiles: "Minimum number of images to upload",

    // text for modify image button
    modifyimagetext: "Modify image",
    
    // angle of each rotation
    rotation: 90
    
});

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.