web-dev-qa-db-ja.com

Django JQuery Ajax File Upload

私は今まで何時間も単純なテキストファイルをアップロードしようとしていましたが、それでも動作するようには見えません。

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

POSTを受信するDjangoビュー：

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
22
arnm

これが動作するように変更したものです。

  1. FormDataを使用して、フォームからデータをパッケージ化しました

  2. Djangoビューでフォームのパラメーターに注意してください。以前は「ファイル」を指定していなかったため、「ファイルフィールドが必要です」エラーが発生しました。

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

ジャンゴビュー：

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

Ajax to Djangoを使用して、ファイルに加えてjsonデータを送信する方法は次のとおりです。

例：

フォームデータを使用したJS

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

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

Request.FILESとrequest.POSTを使用したDjango

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