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: Fotograf, Lizenz, ...
    Ohne Quellenangaben 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上实际上传文件，因此我不明白为什么flask在显示浏览器上发生的图像预览时会出现问题。我对FLASK / HTML / javascript很陌生，但仍然不了解他们的大多数概念。这里发生了什么？我想念什么？

Answer 1

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

一旦您的浏览器具有HTML，它就会加载CSS和JavaScript（假定它们与HTML位于不同的文件中）。否则它们会一起加载。

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

这意味着在这里，您可以使用JavaScript更改页面内容，而Flask对此一无所知。它不会在乎任何页面更改。

但是，当您在表单上按“提交”时，您将获取所有表单内容并将其发送到Flask。由于您输入了文件，因此浏览器会在一段时间内将文件发送到Flask。

在此期间，页面保持静态，因此您必须在单击提交之前显示预览。请记住，页面此时已包含照片，因此您无需Flask即可显示预览。

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

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

希望这会有所帮助！

在Flask上投放页面时如何在浏览器中上传图像预览？

1 个答案: