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

我正在尝试将页面内容从默认的.png文件动态更改为用户为预览加载的任何文件。我设法实现了类似的功能。我接受了这个建议，把我的意见写了进去 我的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);
}

---

我需要能够在flask上提供HTML页面，并让用户加载图像预览。由于它只是一个图像预览，没有在flask上实际上传文件，我不明白为什么flask在浏览器上显示图像预览时出现问题。我对FLASK/HTML/javascript相当陌生，仍然不理解他们的大部分概念。这是怎么回事？我遗漏了什么？

将Flask视为一个接受数据并返回数据的程序。在这种情况下，当您的浏览器访问适当的URL时，Flask会将HTML发回给您

一旦您的浏览器拥有HTML，它就会加载CSS和JavaScript，假设它们位于HTML的不同文件上。否则，它们会一起加载

当浏览器具有HTML、CSS和JavaScript时，它完全独立于Flask。他们之间没有任何交流

这意味着，在这里，使用JavaScript，您可以更改页面内容，而Flask不会知道。它将不关心任何页面更改

但是，当您在表单上按Submit时，您将获得所有表单内容并将其发送到Flask。因为您有一个文件输入，所以您的浏览器会在一段时间内将文件发送到Flask

在此期间，页面保持静态，因此在单击“提交”之前必须显示预览。请记住，此时页面上已经有了照片，因此不需要烧瓶来显示预览

上传完成后，Flask将向您发送更多数据：

重定向，它将浏览器发送到另一个页面，有效地将您从表单和预览中移开。 更多的HTML，它可以有效地清除您的页面并用新页面替换它。

---

希望这有帮助

谢谢你的解释。在我的例子中，页面仅用于测试目的，没有文件上传。我对文件不感兴趣。最重要的是，用户能够使用图像预览功能预览和删除图像。因此，基本上，我的代码已经在这样做了，如果我没弄错的话，我不需要担心。。