Question

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

当表单验证失败时，同一表单将显示flash消息。我希望表单填充旧值，尤其是用户上传的图像。但是，我无法弄清楚如何实现这一目标。

发送到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

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

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

1 个答案: