如何使用 ajax 和 django 上传文件？答案

【问题标题】：How do I upload a file using ajax with django?如何使用 ajax 和 django 上传文件？
【发布时间】：2020-01-04 18:12:21
【问题描述】：

我是新手。你能告诉我如何使用 ajax 将文件发送到服务器吗？我可以向我的服务器提交一个字符串，但我不知道 ajax 将如何处理文件？

upload_stuff.js

$(document).on('submit', '#CustomerRequest', function(e){
e.preventDefault();
$.ajax({
    type:'POST',
    url:'/create_request',
    data:{
        ajax_file1:$('#html_file1').val(),
        ajax_file2:$('#html_file2').val(),
        ajax_file2:$('#html_file3').val(),               
                    ...

view.py

def create_request (request):
    if request.method == "POST":
            server_file1 = request.FILES('ajax_files1')
            server_file2 = request.FILES('ajax_file2')
            server_file3 = request.FILES('ajax_file3')

我的 html 表单上有 csrf_token 和 enctype="multipart/form-data"

【问题讨论】：

标签： javascript django ajax file upload

【解决方案1】：

我试过了，效果很好，希望对你也有用。

首先在您的 forms.py 文件中创建一个相关的表单，如下所示：

from django import forms

class FileForm(forms.Form):
   file = forms.FileField(required=True)

在您的 html 文件中，它看起来像：

    <div>
        <form id="file_form" action="/application/new_file/" method="POST" enctype="multipart/form-data">
            {% csrf_token %}
            <label class="btn btn-info btn-xs" for="subgroup_file" style="background-color: #042d63;border-color: #dddddd;border-width: 2px;color: white;padding: 5px 21px;" id="send_file" data-toggle="tooltip" data-placement="auto top" title="Choose The File">
                <input id="the_file" name="file" type="file" style="display:none;">
                <span class="glyphicon glyphicon-paperclip"></span>
            </label>
            <input type="submit" id="file_form_submit" class="my-small-btn" value="Submit" data-toggle="tooltip" data-placement="auto top" title="Submit File">
        </form>   
    </div>

那么id=file_form 可以触发这个：

    $('#file_form').submit(function(event){
        event.preventDefault();
        var formData = new FormData(this); //get data of form elements for submission
        formData.append('sg_id', '{{ sg_id }}'); //add additional data to form's data

        $.ajax({
            url: "/application/new_file/",
            type: "POST",
            enctype: 'multipart/form-data',
            data: formData,
            processData: false,
            contentType: false,
            cache: false,
            success: function (data) {
                if(! data.created){
                    location.reload();
                } else if(! data.valid_extension){
                    swal({
                        title: 'You can only submit PDF files',
                        text: '',
                        icon: 'error',
                        timer: 5000,
                    });
                }
            }
        });
    });

在这里我还添加了一个sweet alert，通知用户他/她只能上传PDF文件。该 URL 最终将您从 urls.py 带到 views.py 中名为 saveFile 的函数，类似于：

def saveFile(request):
    if(request.user != AnonymousUser()):
        try:
            if request.method == 'POST':
                file_form = FileForm(request.POST, request.FILES)
                sg_id = request.POST.get("sg_id")
                subgroup = SubGroup.objects.get(pk=sg_id)
                if(file_form.is_valid()):
                    file = file_form.cleaned_data["file"]
                    name = str(file)
                    f, extension = os.path.splitext(name)
                    if(extension in valid_extensions):
                        obj = Files.objects.create(
                            file = file,
                            subgroup = subgroup,
                            creator = request.user,
                            created_at = datetime.datetime.now(),
                            name = name
                        )
.......
.......
.......

SubGroup 和Files 是在models.py 中定义的对象，它们将您连接到数据库。

【讨论】：

有没有办法提交其他信息，而不仅仅是文件？
它可以是你想要的任何东西。你有什么想法？

【解决方案2】：

我不知道这是否有用，但在 JQuery 中 $('#fileinput').val() 不返回“Ajax 友好”文件数据，请尝试使用 document.getElementById('fileinput').files[0]; 使用原始 javascript 获取文件数据并尝试在 ajax 请求中添加这些选项 contentType: false, processData: false,

【讨论】：