Загрузка файла Django JQuery Ajax

Я пытаюсь загрузить простой текстовый файл часами, но я все еще не могу заставить его работать.

Я продолжаю получать недопустимые формы, говоря, что мне не хватает "file_source" .

Почему "file_source" не отправляется?

Я также получил его, чтобы отправить "file_source" , но он все еще говорит, что он отсутствует. Какой тип элемента должен быть присвоен файлу Django FileFiled?

Форма Django:

class FileUploadForm(forms.Form):
    file_source = forms.FileField()

Шаблон Django (отображает форму):

<form action="/upload/" method="post" id="file-upload-form" enctype="multipart/form-data"> {% csrf_token %}
    {{ form }}
    <button type="submit" class="btn btn-primary" id='upload-btn'>Upload</button>
</form>

Загрузка JQuery/Ajax:

function uploadFile() {
$.ajax({
    data: $(this).serialize(),
    type: $(this).attr('method'),
    url: $(this).attr('action')
});
return false;
}

$(function() {
     $('#file-upload-form').submit(uploadFile);
});

Просмотр Django, который получает POST:

def upload_view(request):
if request.is_ajax():
    form = FileUploadForm(request.POST)
    if form.is_valid():
        print 'valid form'
    else:
        print 'invalid form'
        print form.errors
return HttpResponseRedirect('/ingest/')

Ответы

Ответ 1

Вот что я изменил, чтобы заставить его работать.

  • Я использовал FormData для упаковки данных из формы

  • Обратите внимание на параметры формы в представлении Django. Я не указывал "файлы" раньше и что вызвало ошибку "file field required".

JavaScript:

function upload(event) {
event.preventDefault();
var data = new FormData($('form').get(0));

$.ajax({
    url: $(this).attr('action'),
    type: $(this).attr('method'),
    data: data,
    cache: false,
    processData: false,
    contentType: false,
    success: function(data) {
        alert('success');
    }
});
return false;
}

$(function() {
    $('form').submit(upload);
});

Просмотр Django:

def upload_view(request):
    if request.method == 'POST':
        form = FileUploadForm(data=request.POST, files=request.FILES)
        if form.is_valid():
            print 'valid form'
        else:
            print 'invalid form'
            print form.errors
    return HttpResponseRedirect('/ingest/')

Ответ 2

Вы не можете использовать jQuery для загрузки файлов асинхронно. Возможны следующие варианты:

1.Показать форму "обычным способом". Это, конечно, обновит страницу.

2.Используйте XHR: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest, но будьте осторожны, чтобы он не поддерживался в IE 8/9. В этих браузерах вам нужно будет вернуться к iframe и форме, которая отправляется на него, чтобы имитировать асинхронную загрузку.

3.Use https://github.com/blueimp/jQuery-File-Upload Он выполняет то, что я описал в 2. но сохраняет все настройки.