web-dev-qa-db-fra.com

Django JQuery Ajax Upload de fichier

Cela fait des heures que j'essaie de télécharger un simple fichier texte, mais je n'arrive toujours pas à le faire fonctionner.

Je continue à recevoir des formulaires non valides disant qu'il me manque la "source_fichier".

Pourquoi "file_source" n'est-il pas posté?

Je l'ai également envoyé réellement "file_source" mais il indique toujours qu'il manque. Quel type d'élément doit être attribué à un Django FileFiled?

Forme Django:

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

Modèle Django (rend le formulaire):

<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);
});

Voir Django qui reçoit le 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/')
jqueryajaxdjangodjango-forms
19
arnm

Voici ce que j'ai changé pour le faire fonctionner. 

  1. J'ai utilisé FormData pour emballer les données du formulaire

  2. Notez les paramètres du formulaire dans la vue Django. Je ne spécifiais pas "fichiers" auparavant et c'est ce qui a provoqué l'erreur "fichier requis".

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

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

Voici comment nous pouvons envoyer des données JSON en plus des fichiers utilisant Ajax à Django.

Exemple:

JS utilisant des données de formulaire

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

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

Django utilisant 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)
0
Abdallah Okasha