Как загрузить предварительный просмотр изображения в браузере, обслуживая страницу в Flask?

Question

Я пытаюсь динамически изменить содержимое моей страницы из файла .png по умолчанию на то, что пользователь загрузил для предварительного просмотра. Мне удалось реализовать нечто похожее на Предварительный просмотр изображения перед его загрузкой . Я принял предложение и завернул свой div в <form runat="server"></form> Мои HTML-элементы выглядят так:

     <form runat="server">
    <label class="control-label col-md-4 col-lg-3" for="photo" id="FotoLbl">
        Foto anfügen
        <div class="inline-help form-label" data-help="&amp;bdquo;Ein
" data-heading="Foto einfügen" data-help-key="offers.photo"><i onClick="myFunction('fotoModal','commentOK6')" class="fa fa-question-circle-o" id="FotoHilfe"></i></div>
    </label>
    <div class="col-md-8 col-lg-9">
        <div class="row fileinput-control">
            <img id="preview"  src="Anzeige%20erstellen-Dateien/default_offers_photo-edd8e5ff2d549a9fa1a898b23119931ebd0e745.png" width="500px" height="360px" style="padding-left:15px;" onload="addDeleteBttn()"/>
            <br/>
            <input type="file" id="image" style="display: none;" />
            <!--<input type="hidden" style="display: none" value="0" name="remove"remove">-->


            <a href="javascript:changeProfile()">
                <div class="file-btns">
                    <span class="btn btn-default btn-file" id="bildBttn">
                        <i title="Bild auswählen" class="fa fileinput-new fa-file-image-o"></i></span></div>
            </a>        
            <a id="removeBttnFrame" href="javascript:removeImage()">    
            </a>
            <div class="col-sm-6">
                <textarea class="form-control copyright" placeholder="Geben Sie hier die Bildquelle an: Foto­graf, Lizenz, ...
    Ohne Quellen­an­ga­ben kann das Bild nicht angezeigt werden.
    " name="offer[photo_copyright]" id="offer_photo_copyright"></textarea>
                <div class="fileinput-description"></div>
            </div>
        </div>
    </div>
</form>
</div>  

В приведенном ниже коде .js вы видите, как я обычно загружаю предварительный просмотр изображения, который прекрасно работает,Однако, когда я работаю со страницей в FLASK, предварительный просмотр изображения не загружается.

function changeProfile() {
  $('#image').click();
}
$('#image').change(function() {
  var imgPath = this.value;
  var ext = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
  if (ext == "gif" || ext == "png" || ext == "jpg" || ext == "jpeg")
    readURL(this);
  else
    alert("Please select image file (jpg, jpeg, png).")
});

function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();
    reader.readAsDataURL(input.files[0]);
    reader.onload = function(e) {
      $('#preview').attr('src', e.target.result);
      //              $("#remove").val(0);
    };
  }
}

function removeImage() {
  $('#preview').attr('src', 'noimage.jpg');
  //      $("#remove").val(1);
  $('#preview').attr('src', 'Anzeige%20erstellen-Dateien/default_offers_photo-edd8e5ff2d549a9fa1a898b23119931ebd0e745.png');

}


function addDeleteBttn() {
  var removeBttn = document.createElement("BUTTON");
  removeBttn.title = "Entfernen";
  removeBttn.innerHTML = '<i class="fa fa-trash-o"></i>'

  removeBttn.className = "removeBttnClass";

  document.getElementById("removeBttnFrame").appendChild(removeBttn);
}

Мне нужно иметь возможность отображать HTML-страницу на колбе и позволить пользователю загружать предварительный просмотр изображения. Поскольку это всего лишь предварительный просмотр изображения без фактической загрузки файла в колбу, я не понимаю, почему во фляге возникает проблема с отображением предварительного просмотра изображения в браузере. Я довольно новичок в FLASK / HTML / javascript и до сих пор не понимаю большинство их концепций. Что тут происходит? Чего мне не хватает?

Answer 1

Думайте о Flask как о программе, которая принимает данные и возвращает данные. В этом случае, когда ваш браузер получает доступ к соответствующему URL, Flask отправляет вам обратно HTML.

Как только ваш браузер имеет HTML, он затем загружает CSS и JavaScript, предполагая, что они находятся в разных файлах HTML. В противном случае все они загружаются вместе.

Когда браузер имеет HTML, CSS и JavaScript, он полностью независим * от Flask. Между ними нет никакой связи.

Это означает, что здесь, с помощью JavaScript, вы можете изменить содержимое страницы, и Flask не узнает об этом. Он не будет заботиться об изменениях страницы.

Однако, когда вы нажимаете «Отправить» в своей форме, вы получаете все содержимое формы и отправляете их в Flask. Поскольку у вас есть ввод файла, существует период времени, в течение которого ваш браузер отправляет файл во Flask.

В течение этого периода страница остается статичной, поэтому ваш предварительный просмотр должен отображаться до того, как вы нажмете кнопку Отправить. Помните, что на этой странице уже есть фотография, поэтому вам не нужен Flask для предварительного просмотра.

После завершения загрузки Flask отправит вам дополнительные данные:

• Перенаправление, которое отправляет браузер на другую страницу (фактически удаляя вас от формы и предварительного просмотра).
• Еще немного HTML, который эффективно очищает вашу страницу и заменяет ее новой страницей.

Надеюсь, это поможет!