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, чтобы инициировать отправку формы при изменении события кнопки поля файла.Предполагая, что у вашего поля входного файла есть id = "id_file" и форма 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" и т. д. для определенного действия, которое является URL-адресом типа "/ upload_file"

Теперь по умолчанию форма будет делать это только тогда, когда пользователь нажимает на элемент кнопки с типом submitсодержится в форме.Поскольку вам не нужно такое поведение, когда пользователю придется нажимать, вы также можете сделать это с помощью javascript, если вы указали HTML, как указано выше, чтобы проверить поведение, вы можете выбрать файл в опции загрузки файла и перейти кконсоль разработчика и запустите эту команду

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

Вы увидите, что такое же поведение происходит и при нажатии на кнопку.Поэтому мы делаем это для события change, чтобы автоматически отправлять форму, когда пользователь выбирает файл.

Надеюсь, это поможет, если нет, то дайте мне знать, какая часть.