如何在 Flask 上提供页面时在浏览器上上传图像预览？

Question

我正在尝试将我的页面内容从默认的 .png 文件动态更改为用户为预览而加载的任何内容。我设法实现了类似于Preview an image before it is uploaded 的东西。我接受了这个建议并将我的 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，可有效清除您的页面并将其替换为新页面。

希望这会有所帮助！