Django JQuery Ajax-Datei-Upload

Ich versuche seit Stunden, eine einfache Textdatei hochzuladen, aber ich kann es immer noch nicht zum Laufen bringen.

Ich erhalte immer wieder ungültige Formulare, die besagen, dass mir “file_source” fehlt.

Warum wird “file_source” nicht gepostet?

Ich habe es auch dazu gebracht, tatsächlich “file_source” zu senden, aber es sagt immer noch, dass es fehlt. Welche Art von Element sollte einem Django FileFiled gegeben werden?

Django-Formular:

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

Django-Vorlage (Rendering-Formular):

<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-Upload:

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

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

Django View, das POST erhält:

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/')

Hier ist, was ich geändert habe, damit es funktioniert.

1. Ich habe FormData verwendet, um Daten aus dem Formular zu verpacken

2. Beachten Sie die Parameter des Formulars in der Django-Ansicht. Ich habe vorher keine “Dateien” angegeben und das hat den Fehler “Dateifeld erforderlich” verursacht.

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-Ansicht:

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/')

So können wir JSON-Daten zusätzlich zu Dateien mit Ajax an Django senden.

Beispiel:

JS mit Formulardaten

var formData = new FormData();
formData.append('file1', myFile); 
const data_ = JSON.stringify(data)
formData.append('data', data_);

doPost(url, formData)
.then(result => {
 })

Django mit request.FILES & request.POST

data = json.loads(request.POST.get('data'))
 files = request.FILES
 attached_file1 = files.get('file1', None)
 attr1 = data.get('attr1', None)

Sie können jQuery nicht verwenden, um Dateien asynchron hochzuladen. Ihre Optionen sind:

1. Senden Sie das Formular “auf dem üblichen Weg” ab. Dadurch wird die Seite natürlich aktualisiert.

2. Verwenden Sie XHR: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest Beachten Sie jedoch, dass es von IE 8/9 nicht unterstützt wird. In diesen Browsern müssten Sie auf einen Iframe und ein Formular zurückgreifen, das darauf postet, um einen asynchronen Upload nachzuahmen.

3. Verwenden https://github.com/blueimp/jQuery-File-Upload Es tut, was ich in 2. beschrieben habe, erspart Ihnen aber die gesamte Konfiguration.