Django：文件上传和保存使用 Ajax

Question

I'm not sure if somehow the directory is wrong or there's just some kind of common mistake in my code, but I just am not able to save my uploaded file to a folder, or more specifically, the media folder as demonstrated in a lot of examples.我不确定目录是否有问题，或者我的代码中是否存在某种常见错误，但我无法将上传的文件保存到文件夹，或者更具体地说，无法将媒体文件夹保存到很多地方的例子。

I'm just taking a text field and the file and saving it in the DB using Ajax, and it works too, except that whatever file I'm selecting, it's not getting saved in the media folder even if I create one manually nor is it creating one on its own either.我只是获取一个文本字段和文件并使用 Ajax 将其保存在数据库中，它也可以工作，除了我选择的任何文件，即使我手动创建一个也不会保存在媒体文件夹中，也不是它也可以自己创建一个。 I can get this to work without Ajax but not with it.我可以在没有 Ajax 但没有它的情况下让它工作。 Maybe it's something related to how I'm sending and handling data over Ajax, but I've gone through tons of forums to try and fix it but no results so far.也许这与我如何通过 Ajax 发送和处理数据有关，但我已经通过大量论坛尝试修复它，但到目前为止没有结果。 I've double checked everything else such as the settings.py config and the libraries that I've imported, everything looks to be in order.我已经仔细检查了其他所有内容，例如 settings.py 配置和我导入的库，一切看起来都井井有条。 I'm sharing the code below.我在下面分享代码。

index.html索引.html

<body>
<div class="container-fluid">
    <div class="col-md-4">
        <form id="data" enctype="multipart/form-data">
            <label for="docn">
                <input type="text" id="docn" placeholder="Please enter document name">
            </label>

            <label for="docc">
                <input type="file" id="doc" name="docu">
            </label>

            <button type="button" onclick="enterdata()">Submit</button>

        </form>
    </div>
</div>
<script>
    function enterdata() {
        var token = '{{ csrf_token }}';
        alert('csrf generated');

        $.ajax({
            type: 'POST',
            url: '/user',
            data: {
                dcn: $('#docn').val(),
                dc: $('#doc').val(),
            },
            headers: {'X-CSRFToken': token},
            success: function () {
                alert("Added");
            }
        })

    }
</script>
</body>

views.py视图.py

from django.shortcuts import render
from django.http import HttpResponse
from fileup.models import *
from django.core.files.storage import FileSystemStorage

def insert(request):
    return render(request, 'index.html')

def testing_data(request):
    if request.method == 'POST':
        dcn1 = request.POST['dcn']
        dc = request.POST['dc']

        request_file = request.FILES['docu'] if 'docu' in request.FILES else None
        if request_file:
            fs = FileSystemStorage()
            file = fs.save(request_file.name, request_file)
            fileurl = fs.url(file)

        FileDB.objects.create(
            docname=dcn1,
            doc=dc,
        )

        return HttpResponse('')

urls.py网址.py

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', insert),
    path('user', testing_data),
]
if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL, document_root = settings.MEDIA_ROOT)

models.py模型.py

from django.db import models

class FileDB(models.Model):
    docname = models.CharField(max_length=255)
    doc = models.FileField()

settings.py config settings.py 配置

MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'

That's the complete project.这就是完整的项目。 The end goal is to save the path and filename in the DB with the selected file uploaded in the media folder.最终目标是将路径和文件名保存在数据库中，并将所选文件上传到媒体文件夹中。 The former is being done but with no positive results from the latter.前者正在完成，但后者没有积极成果。

Thank you.谢谢你。

Answer 1

You say everything works correctly except the storage location of the file.您说除了文件的存储位置外一切正常。 The following code will store uploaded files under /media/photos regardless of what your MEDIA_ROOT setting is:无论您的 MEDIA_ROOT 设置是什么，以下代码都会将上传的文件存储在 /media/photos 下：

from django.core.files.storage import FileSystemStorage
from django.db import models

fs = FileSystemStorage(location='/media/photos')

class Car(models.Model):
    ...
    photo = models.ImageField(storage=fs)

Hope this helps you.希望这可以帮助你。 Courtesy of Django Doc: https://docs.djangoproject.com/en/3.1/topics/files/由 Django 提供文档： https://docs.djangoproject.com/en/3.1/topics/files/

Answer 2

You are not doing it a right way, you should supply FormData in your Ajax call.您的做法不对，您应该在 Ajax 调用中提供 FormData。 see below:见下文：

function upload(event) {
event.preventDefault();
var data = new FormData($('form').get(0));

$.ajax({
    url: 'user/',
    type: 'POST,
    data: data,
    cache: false,
    processData: false,
    contentType: false,
    success: function(data) {
        alert('success');
    }
});
return false;
}

$(function() {
    $('form').submit(upload);
});

and in your view you should get the file from request.FILE like below:在您看来，您应该从 request.FILE 获取文件，如下所示：

def testing_data(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('/')

Answer 3

I've managed to make it work, finally.我终于成功了。 Sharing the code here for anyone else who's stuck with this issue.在此处为遇到此问题的其他人共享代码。

index.html索引.html

<body>
<div class="container-fluid">
    <div class="col-md-4">
        <form id="data">
            <label for="docn">
                <input type="text" id="docn" placeholder="Please enter document name">
            </label>

            <label for="docc">
                <input type="file" id="doc" name="docu">
            </label>

            <button type="button" onclick="enterdata()">Submit</button>

        </form>
    </div>
</div>
<script>
    function enterdata() {

        var data1 = new FormData()
        data1.append('dcn', $('#docn').val())
        data1.append('dc', $('#doc').val())
        data1.append('docf', $('#doc')[0].files[0])

        var token = '{{ csrf_token }}';
        alert('csrf generated');

        $.ajax({
            type: 'POST',
            url: '/user',
            data: data1,
            processData: false,
            contentType: false,
            headers: {'X-CSRFToken': token},
            success: function () {
                alert("Added");
            }
        })

    }
</script>
</body>

views.py视图.py

from django.shortcuts import render
from django.http import HttpResponse, HttpResponseRedirect
from fileup.models import *
from django.core.files.storage import FileSystemStorage


def insert(request):
    return render(request, 'index.html')


def testing_data(request):
    if request.method == 'POST':
        dcn1 = request.POST['dcn']
        dc = request.POST['dc']

        upload_file = request.FILES['docf']
        fs = FileSystemStorage()
        fs.save(upload_file.name, upload_file)


        FileDB.objects.create(
            docname=dcn1,
            doc=dc,
        )

        return HttpResponse('')

urls.py网址.py

from django.contrib import admin
from django.urls import path
from fileup.views import *
from django.conf.urls.static import static
from django.conf import settings

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', insert),
    path('user', testing_data),
]
if settings.DEBUG:
    urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

settings.py config settings.py 配置

MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'

Now, the media directory is being created upon file upload and files are being saved inside it.现在，媒体目录在文件上传时创建，文件被保存在其中。

Django：文件上传和保存使用 Ajax

问题描述

3 个解决方案

解决方案1
1 2020-12-02 14:40:12

解决方案2
0 2020-12-02 09:39:03

解决方案3
0 已采纳 2020-12-04 06:36:26

Django：文件上传和保存使用 Ajax

问题描述

3 个解决方案

解决方案1 1 2020-12-02 14:40:12

解决方案2 0 2020-12-02 09:39:03

解决方案3 0 已采纳 2020-12-04 06:36:26

解决方案1
1 2020-12-02 14:40:12

解决方案2
0 2020-12-02 09:39:03

解决方案3
0 已采纳 2020-12-04 06:36:26