Django 验证错误后重新提交 ImageField 中的图像

Question

我的管理界面中有一个带有 ImageField 的表单。一切都很好，除非其他字段引发验证错误。在这些情况下，表单将返回给用户进行更正，但已加载的图像文件将从表单中清除。

知道如何以某种方式将已提交的图像重新加载到表单中以便保存图像吗？

谢谢！

一些有趣的代码

class DealForm(forms.ModelForm):
    image = forms.ImageField(required=False,widget=AdminImageWidget)

    def clean():
        data = self.cleaned_data
        date_start = data.get('date_start')
        date_end = data.get('date_end')
        (... several other validations ...)
        return data

：

class AdminImageWidget(forms.FileInput):
    def __init__(self, attrs={}):
        super(AdminImageWidget, self).__init__(attrs)

    def render(self, name, value, attrs=None):
        output = []
        if value and hasattr(value, "url"):
            output.append(('<a target="_blank" href="%s">' 
                            '<img src="%s" /></a> '
                            % (value.url, value.url_200x150)))
        output.append(super(AdminImageWidget, self).render(name, value, attrs))
        return mark_safe(u''.join(output))

Answer 1

HTML 字段无法预先填充数据。因此，如果在另一个字段上验证失败，您将必须重新选择图像。

这是一种 HTML/浏览器安全措施。就像，没有办法解决它！

想象一下，如果一个网站可以将 C:\Windows\something_important 注入到页面一角的表单中会怎样？

---

如果这是关键功能，您可以...

1. 强制在表单验证之前上传文件，并将文件名存储在用户会话中
2. 设置模板，以便在文件上传后重新显示时显示“成功”消息
3. 禁用文件当会话包含上传信息时进行字段验证
4. 在提交真实有效的表单后从会话中提取文件名

Answer 2

这是 django 应用程序，称为 django-file-resubmit。它正好解决了这个问题。

https://github.com/un1t/django-file-resubmit

Answer 3

如果验证失败，您需要发送图像文件作为响应的一部分，然后 JavaScript 应从那里继续。

# if an image is loaded convert it to base64 string and include it in the context
if 'tnimagefn' in self.request.FILES:
  ctx['img'] = base64.b64encode(self.request.FILES.get('tnimagefn').read()).decode()

在模板中添加所需的 JavaScript 代码：

        {% if img %}
// create a dataURL from your base64 string and make it the source of image element
          let imgdataURL = "data:image/png;base64,{{ img }}"
          document.getElementById("tnimage").src = imgdataURL;
//convert the dataURL to a blob
          let blob = dataURItoBlob(imgdataURL);
// create a file of that blob and associate with your file input element        
          let list = new DataTransfer();
          let cImageFile = new File([blob], "tnimg.png");
          list.items.add(cImageFile);
          document.getElementById("id_tnimagefn").files = list.files;
        {% endif %}

dataURItoBlob 函数：

function dataURItoBlob(dataURI) {
if(typeof dataURI !== 'string'){
    throw new Error('Invalid argument: dataURI must be a string');
}
dataURI = dataURI.split(',');
var type = dataURI[0].split(':')[1].split(';')[0],
    byteString = atob(dataURI[1]),
    byteStringLength = byteString.length,
    arrayBuffer = new ArrayBuffer(byteStringLength),
    intArray = new Uint8Array(arrayBuffer);
for (var i = 0; i < byteStringLength; i++) {
    intArray[i] = byteString.charCodeAt(i);
}
return new Blob([intArray], {
    type: type
});