Django：我们可以更改文件字段，以便在选择文件时立即上传

Question

我只是想知道：是否可以更改文件字段，以便在选择文件时立即上传，而无需额外的按钮？

假设我成功地从 .models、.forms、urls.py 等导入了所有内容，

models.py中的代码：

class data(models.Model):
    Datas = models.FileField(upload_to='datas/upload')

forms.py中的代码：

class form1(forms.ModelForm):
    class Meta:
        model = data
        fields = ('Datas',)

views.py中的代码：

def upload(request):
    if request.method == 'POST' and 'btnform1' in request.POST:
        newform1 = form1(request.POST, request.FILES)
        if newform1.is_valid():
            newform1.save()
            return redirect('list')

upload.html中的代码：

<h2>Data</h2>
     <form method="post" enctype="multipart/form-data"> {% csrf_token %}
     {{newform1.as_p}}
<!--        <button type="submit" class="btn btn-primary" name="btnform1">Upload Data</button>-->
     </form>

如果可能的话，谁能指导我并给出解决方案？谢谢。

Answer 1

为此，您无需在后端更改任何内容，而是使用 javascript sn-p 在文件字段按钮的更改事件上触发表单提交。 假设您的输入文件字段具有 id ="id_file" 和 form id="image-upload-form"。

如果你的 html 看起来像。

<form id="image-upload-form" method="POST" role="form" enctype="multipart/form-data">
    {% csrf_token %}
    <input name="id_Datas" type="file" id="id_datas">
    <button type="submit" class="btn btn-primary" name="btnform1">Upload</button>
</form>

那么 js 会是什么样子。

$("#id_datas").on("change", function(event){
  $("#image-upload-form").submit();
});

说明：

当你的html中有一个表单时，表单的作用是收集其中输入元素的数据，并将这些数据包装起来并采用表单中定义的必要方法，即“GET”，“POST”等定义的操作是像“/upload_file”这样的url

现在默认情况下，表单只会在用户单击表单中包含的提交类型的按钮元素时执行此操作。由于您不希望用户必须单击这种行为，因此您也可以通过 javascript 进行操作，如果您是上面定义的 html，那么为了测试该行为，您可以在文件上传选项中选择文件并转到开发者控制台并运行 这个

$("#image-upload-form").submit();

当您单击按钮时，您也会看到相同的行为。所以我们在change 事件上执行此操作，以便在用户选择文件时自动提交表单。

希望这会有所帮助，如果没有，请告诉我是哪一部分。