Приложение Django с формой с отдельными кнопками SUBMIT и UPLOAD - PullRequest
Новая
       15

Приложение Django с формой с отдельными кнопками SUBMIT и UPLOAD

0 голосов
/ 01 июня 2018

Мой файл index.html содержит одну большую форму, которая получает тонны пользовательского ввода.В конце формы я хочу дать пользователю возможность загрузить файл с помощью кнопки.Но это не должно вызывать отправку формы, потому что они могут захотеть продолжить ввод данных в другие части формы.Вот основной обзор HTML: 

((some other stuff))
<form id="outer_form">
    ((other HTML stuff))
    <form enctype="multipart/form-data" method="post" action="{% url 'my_app:upload_file' %}" id="file-upload-form">
        {% csrf_token %}
        <input type="file" name="file" style="display: none">
        <button type="button" class="btn btn-primary" id="btn-upload-file">Upload file</button>
    </form>
    ((more other stuff))
    ((submit button for the outer form))
</form>
((other stuff))

Конечно, это не будет работать, потому что я вложил элементы FORM, что является недопустимым.Как я могу объединить эти две идеи, сохраняя маркер CSFR и используя правильное действие django для кнопки загрузки?Спасибо!

Ответы [ 2 ]

0 голосов
/ 02 июня 2018

Если нет смысла знать файл на серверной стороне перед отправкой формы (то есть, анализ файла не изменит форму каким-либо образом или не даст вам преимущества), вы можете «просто» сохранить этот файл с остальнымиполя формы и отправьте его только тогда, когда кнопка фактической отправки будет нажата для всей формы, и удалите отдельную кнопку загрузки.

Если вам нужно сохранить это, сначала нужно , вам нужно будет иметьбэкэнд-функциональность django для принятия загрузки файла (обычно отдельно от POSTed для просмотра, если только вы не проверите все в одном представлении и в HTML, вам нужно будет подключить кнопку Upload к вызову AJAX.

[EDIT] Есть несколько тем, которые обрабатывают вызовы AJAX для Django, одна из которых Django JQuery Ajax File Upload Но я немного растерялся в текущих делах CSRF при вызове AJAX.

jQuery сделает вашу жизнь проще, но даже с ванильным Javascript вы можете сделать это, используя некоторые сведенияИон предоставляется в вызове Javascript AJAX , игнорируйте сторону PHP.

Вы можете добавить ссылку на событие onlick либо в самой кнопке 

<button type="button" class="btn btn-primary" id="btn-upload-file" onclick="uploadImage()">Upload file</button>

, либо присоединить ее«позже» в javascript 

document.getElementById('btn-upload-file').onclick(uploadImage())

Вам нужно будет работать с файлом так же, как в связанном вопросе, путем доступа к файлу с помощью тега id, в противном случае будет сложнее получить содержимое, например, 

<input type="file" name="file" id="upload-file" style="display: none">

Пожалуйста, прокомментируйте, если у вас есть проблемы со стороной Django, не зная, есть ли у вас модель за ней, труднее предложить правильную вещь.

0 голосов
/ 01 июня 2018

Вам понадобится функция JavaScript, чтобы делать то, что вы хотите.Для начала сделайте что-то вроде: 

function submitForm(action) {
  var form = document.getElementById('form1');
  form.action = action;
  form.submit();
}

Затем для ваших кнопок дайте им onclick = submitForm('{% url 'urlyourusing' %}')"

Ваш CSFR должен быть перенесен.Если этого не произойдет, вам нужно будет определить его в вызове ajax.

Вам также нужно обязательно включить javascript в ваш html.Как в следующем примере. 

<script src= "{% static '/search/buttonsubmit.js' %}" type="text/javascript"></script>
...