Форма с превью загружаемой картинки через div'ы с использованием библиотек bootstrap

Question

Пытаюсь создать такую форму

Используя библиотеки bootstrap. Задача сделать область загрузки фото с превью загружаемого фото и отображением существующего фото из системы (framework Django) Не смог найти стандартной формы загрузки на сайте bootstrap. Код:

<form>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputEmail4">Номер телефона</label>
      <input type="PhoneNumberField" name="phone_number" id="id_phone_number" class="form-control" placeholder="Phone Number" required autofocus value={{account_form.initial.phone_number}}>
    </div>
    <div class="form-group col-md-6" color=black align-items: stretch>
      {% if account_form.initial.image %}
        <img src="{{account_form.initial.image}}"  height=120 width=120>
      {% else %}
        <img src="no">
      {% endif %}
      <!-- Image -->
      <div class="form-group">
        <label for="id_image">Image</label>
        <input  type="file" name="image" id="id_image" accept="image/*" required>
      </div>

    </div>
  </div>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputPassword4">Имя</label>
      <input type="text" name="first_name" id="inputUsername" class="form-control" placeholder="first_name" required value="{{account_form.initial.first_name}}">
    </div>
  </div>
  <div class="form-group">
    <label for="inputAddress">Адрес</label>
    <input type="text" class="form-control" id="inputAddress" placeholder="Address" value="{{account_form.initial.address}}">
  </div>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputCity">Почта</label>
      <input type="email" name="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus value={{account_form.initial.email}}>
    </div>
    <div class="form-group col-md-6">
      <label for="inputState">Место жительства</label>
      <select id="id_livingplace" name = "Livingplace" class="form-control">
        {% for post in livingplace_posts %}
          <option value="{{post.pk}}">{{post.title}}</option>
        {% endfor %}
      </select>
    </div>
  </div>
  <div class="form-group">
    <label for="exampleFormControlTextarea1">О себе</label>
    <textarea class="form-control" id="id_description" rows="3" name="description" value="{{account_form.initial.address}}"></textarea>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="gridCheck">
      <label class="form-check-label" for="gridCheck">
        Показывать адрес
      </label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="gridCheck">
      <label class="form-check-label" for="gridCheck">
        Показывать телефон
      </label>
    </div>
  </div>

  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

Answer 1

const upload = document.querySelector('#inputGroupFile01');
const result = document.querySelector('#result');

upload.addEventListener("change", (e) => {
  previewFunc(e.target.files[0]);
});

function previewFunc(file) {
  if (!file.type.match(/image.*/)) return false;
  const reader = new FileReader();

  reader.addEventListener("load", (e) => {
    const img = document.createElement('img');
    img.src = e.target.result;
    result.append(img);
  });
  reader.readAsDataURL(file);
}

img {
  display: block;
  max-width: 100%;
}

#result {
  max-width: 400px;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text">Upload</span>
  </div>
  <div class="custom-file">
    <input type="file" class="custom-file-input" id="inputGroupFile01">
    <label class="custom-file-label" for="inputGroupFile01">Choose file</label>
  </div>
</div>


<div id="result"></div>

БЛОГ НА HUSL

Форма с превью загружаемой картинки через div'ы с использованием библиотек bootstrap

Ответы (1 шт):