从 Jquery 访问手动呈现的表单字段答案

【问题标题】：Accessing manually rendered form fields from Jquery从 Jquery 访问手动呈现的表单字段
【发布时间】：2020-02-25 16:30:42
【问题描述】：

当我正常呈现表单时，我的代码将验证图像文件并将其发送出去。如果我手动呈现表单字段，则验证失败。

正规形式：

{{ form }}

手动渲染字段：

<div class="form-row">
    {{ form.username }}
</div>
<div class="form-row">
    {{ form.image }}
</div>

Jquery 处理图片：

      $("#id_image").change(function () {
        if (this.files && this.files[0]) {
            console.log(this.files[0]);
          var reader = new FileReader();
          reader.onload = function (e) {
            $("#image").attr("src", e.target.result);
            $("#modalCrop").modal("show");
          }
          reader.readAsDataURL(this.files[0]);
        }
      });

我尝试将this.files[0] 更改为this.files[6]，因为图像是表单中的第 7 项，但这不起作用。帮忙？

【问题讨论】：

#id_image input type="file" 吗？
哦，没关系。当表单由 Django 构建时，表单是input type=file，是的。
$("#id_image").change()，你听过type="file"输入的变化吗？另外，如果您没有这样的输入，您将如何上传？
这都是 Django 手动渲染的。您不必指定它。

标签： python jquery html django

【解决方案1】：

尝试从事件实例中获取文件

$("#id_image").change(function (e) {
    let files = e.target.files
    ...
});

【讨论】：