Django JQuery Ajax 文件上传

Question

我已经尝试上传一个简单的文本文件几个小时了，但我似乎仍然无法正常工作。

我不断收到无效的表单，说我缺少“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/')

Answer 1

这是我为使其正常工作而进行的更改。

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

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

Answer 2

这是我们如何使用 Ajax 向 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 => {
 })

Django 使用 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)

Answer 3

您不能使用 jQuery 异步上传文件。您的选择是：

1.“常规方式”提交表格。这当然会刷新页面。

2. 使用 XHR：https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest，但要注意 IE 8/9 不支持它。在这些浏览器上，您需要回退到 iframe 和向其发布的表单，以模拟异步上传。

3. 使用https://github.com/blueimp/jQuery-File-Upload 它完成了我在 2. 中描述的操作，但省去了所有配置。