Django的JQuery的Ajax的文件上载

问题描述

我一直在努力，现在上传了几个小时一个简单的文本文件，但我似乎仍不能得到它的工作。

我不断收到无效的形式说我失踪了file_source。

为什么file_source没有得到张贴？

我也得到它的实际发送file_source，但它仍然表示，它缺少。什么类型的元素应该给予一个Django FileFiled？

Django的形式：

 类FileUploadForm（forms.Form）：
    file_source = forms.FileField（）
 

Django的模板（呈现形式）：

 ＆LT;形式的行动=/上传/方法=后ID =文件上传表单ENCTYPE =的multipart / form-data的＆GT; {％csrf_token％}
    {{ 形成 }}
    ＆LT;按钮类型=提交级=BTN BTN-主ID ='上传-BTN'＆GT;上传＆LT; /按钮＆GT;
＆LT; /形式GT;
 

JQuery的/阿贾克斯上传：

 函数uploadFile（）{
$阿贾克斯（{
    数据：$（本）.serialize（）
    类型：$（本）.attr（方法），
    网址：$（本）.attr（行动）
}）;
返回false;
}

$（函数（）{
     $（'＃文件上传格式）提交（uploadFile）;
}）;
 

Django的查看临危POST：

 高清upload_view（要求）：
如果request.is_ajax（）：
    表= FileUploadForm（request.POST）
    如果form.is_valid（）：
        打印'的有效形式
    其他：
        打印'无效的表单
        打印form.errors
返回的Htt presponseRedirect（'/采集/'）
 

解决方案

下面是我改得到它的工作。

1. 我用FORMDATA打包从表格数据

2. 注意在Django的视图形式的参数。以前我是不指定文件，这是什么原因造成的错误所需的文件场。

JavaScript的：

 函数上传（事件）{
。事件preventDefault（）;
VAR数据=新FORMDATA（$（'表'）得到（0））;

$阿贾克斯（{
    网址：$（本）.attr（行动），
    类型：$（本）.attr（方法），
    数据：数据，
    缓存：假的，
    过程数据：假的，
    的contentType：假的，
    成功：功能（数据）{
        警报（成功）;
    }
}）;
返回false;
}

$（函数（）{
    $（形式）提交（上传）;
}）;
 

Django的观点：

 高清upload_view（要求）：
    如果request.method =='POST'：
        表= FileUploadForm（数据= request.POST，文件= request.FILES）
        如果form.is_valid（）：
            打印'的有效形式
        其他：
            打印'无效的表单
            打印form.errors
    返回的Htt presponseRedirect（'/采集/'）
 

I've been trying to upload a simple text file for hours now but I still can't seem to get it working.

I keep getting invalid forms saying I'm missing the "file_source".

Why is "file_source" not getting posted?

I've also got it to actually send "file_source" but it still says it is missing. What type of element should be given to a Django FileFiled?

Django Form:

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

Django Template (renders form):

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

解决方案

Here is what I changed to get it working.

1. I used FormData to package up data from form

2. Notice the parameters of the form in the Django view. I was not specifying "files" before and that's what caused the " file field required" error.

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

这篇关于Django的JQuery的Ajax的文件上载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！