我正在尝试将我的页面内容从默认的 .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="&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);
}
我需要能够在 flask 上提供 HTML 页面并让用户加载图像预览。由于它只是一个图像预览,没有在 Flask 上实际上传文件,我不明白为什么 Flask 在显示浏览器上发生的图像预览时出现问题。我对 FLASK/HTML/javascript 很陌生,仍然不理解他们的大部分概念。这里发生了什么?我错过了什么?
最佳答案
将 Flask 视为一个接受数据并返回数据的程序。在这种情况下,当您的浏览器访问适当的 URL 时,Flask 会将 HTML 发回给您。
一旦您的浏览器拥有 HTML,它就会加载 CSS 和 JavaScript,假设它们位于与 HTML 不同的文件中。否则它们都会一起加载。
当浏览器拥有 HTML、CSS 和 JavaScript 时,它完全独立于 Flask。他们之间没有任何交流。
这意味着在这里,您可以使用 JavaScript 更改页面内容,而 Flask 不会知道。它不会关心任何页面更改。
但是,当您在表单上按“提交”时,您将获得所有表单内容并将它们发送到 Flask。由于您有一个文件输入,因此您的浏览器会在一段时间内将文件发送到 Flask。
在此期间,页面保持静态,因此您的预览必须在您单击“提交”之前显示。请记住,页面此时已经有照片,因此您不需要 Flask 来显示预览。
上传完成后,Flask 会向您发送更多数据:
- 重定向,将浏览器发送到另一个页面(有效地将您从表单和预览中移开)。
- 一些更多的 HTML,可以有效地清除您的页面并将其替换为新页面。
希望这对您有所帮助!
关于javascript - 如何在 Flask 上提供页面时在浏览器上上传图像预览?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58486831/