python - 如何通过内存中的图像文件填写 Jinja2 模板中的文件输入

Question

我正在使用 Jinja2 模板编写一个 flask 服务器。在一个表单中，我有一个文件字段让用户上传图像。

当表单验证失败时，同一个表单将显示一条闪现消息。我希望表单填充旧值，尤其是用户上传的图像。但是，我不知道如何实现这一目标。

发送到 Jinja2 模板的对象 python 是这样的

<FileStorage: 'launch-image-3.5@2x.png' ('image/png')>

我正在使用宏来呈现文件输入，如下所示(我正在使用 Bootstrap 4):

{% macro file_uploader(file_name, url_name, title, url) %}

<fieldset class="form-group">
    <strong>{{ title }}</strong>
    <br/>
    <label class="file">
        <input type="file" class="form-control-file" id="{{ file_name }}" name="{{ file_name }}">
        <span class="file-custom"></span>
    </label>
    <input type="text" class="form-control" id="{{ url_name }}" name="{{ url_name }}" placeholder="{{ title }} URL"
           value="{{ url or '' }}">
    <img id="{{ file_name }}-preview" class="img-thumbnail" src="{{ url or '' }}"
         style="margin-top: 8px; max-width: 50%; display: none;">
</fieldset>

<script>
    $("#{{ file_name }}").on("change", function () {
        $("#{{ url_name }}").val("");
        var input = this;

        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                var preview = $("#{{ file_name }}-preview");
                preview.attr("src", e.target.result);
                preview.show();
            };
            reader.readAsDataURL(input.files[0]);
        }
    });
</script>
{% endmacro %}

只要用户通过点击输入上传图片，图片的预览就会显示在img标签中。

我的问题是，如何以编程方式将图像设置为文件输入，这样 img 标签将被触发以显示预览，并且当用户单击提交按钮时，相同的图像将在表单内再次发送到服务器。

顺便说一句，我的表单是一个 multipart/form-data 表单。

Answer 1

你不能这样做。出于安全原因，浏览器根本不允许您这样做；显然，如果您可以预填充文件输入，恶意网页可以将其设置为指向客户端磁盘上的 secret 数据，例如 passwd 文件。