Блог

Главная - Вопросы по программированию - Как мне получить доступ к полю изображения формы django в коде js

Как мне получить доступ к полю изображения формы django в коде js

#javascript #python #html #django

#javascript #python #HTML #django

Вопрос:

Я создаю BlogApp и создаю функцию preview image before save into Database . НО в последний момент я застрял на проблеме.

Как и раньше, я использовал для доступа к полю изображения в шаблоне, например {{ form.image }} , но я помещал js-код в шаблон для предварительного просмотра выбранного изображения Choose file .

create_blog_post.html

Общий метод выбора поля изображения Choose file в браузере `{{ form.image }}.

     {{ form.image|as_crispy_field }}

код js в create_blog_post.html

 <input type="file" id="uploadImage" name="termek_file" class="file_input" 
multiple/>
<div id="result" class="uploadPreview">

<script>

window.onload = function() {
  if (window.File amp;amp; window.FileList amp;amp; window.FileReader) {
    var filesInput = document.getElementById("uploadImage");
    filesInput.addEventListener("change", function(event) {
      var files = event.target.files;
      var output = document.getElementById("result");
      for (var i = 0; i < files.length; i  ) {
        var file = files[i];
        if (!file.type.match('image'))
          continue;
        var picReader = new FileReader();
        picReader.addEventListener("load", function(event) {
          var picFile = event.target;
          var div = document.createElement("div");
          div.innerHTML = "<img class='thumbnail' src='"   picFile.result   "'"  
            "title='"   picFile.name   "'/>";
          output.insertBefore(div, null);
        });        
        picReader.readAsDataURL(file);
      }

    });
  }
}


</script>

Проблема

Я понятия не имею, как получить доступ {{ form.image }} к атрибуту в коде js, который может отображать оба Preview before save и upload that image .

Что я пробовал

1). Я видел много ответов на SO, но ничего не работает.

2). Перепробовал много методов, НО ничего не работает.

Любая идея будет оценена по поводу того, как получить доступ {{ form.image }} в коде js.

Заранее благодарю вас.

Ответ №1:

Я не уверен, о чем ваш код, но я думаю, вам просто нужно получить доступ к значению, заданному {{ form.image }}

Итак, выполните следующие действия

 const theWantedThing = "{{ form.image }}"

Если вы не включили кавычки, javascript выдаст ошибку

Кроме того, здесь используется шаблон Django HTML, поэтому убедитесь, что ваш код javascript включен в HTML-страницу, если он был в отдельном файле, это не сработает

Метки: