博客系统-文件上传问题

url配置

url(r'^uploadFile/$',views.uploadFile),

视图配置:

复制代码
def uploadFile(request):
    # 这里只有在串文件的时候才会显示
    file_obj = request.FILES.get("imgFile")           #获取到文件对象
    file_name = file_obj.name         #获取到文件名字
    from blogCMS import settings
    import os
    path = os.path.join(settings.MEDIA_ROOT,"article_uploads",file_name)        #文件上传的地址
    with open(path,"wb") as f:
        for i in file_obj.chunks():
            f.write(i)
    response = {
        "error":0,
        "url":"/media/article_uploads/"+file_name+"/"                   #文件的路径
    }
    import json
    return HttpResponse(json.dumps(response))
复制代码

前端页面

复制代码
{% extends "backendindex.html" %}

{% block manageCon %}
    <span class="success" style="color: red"></span>

    <form action="/blog/{{ request.user.username }}/backindex/addarticle/" method="post" novalidate>
        {% csrf_token %}
        <label for="title">文章标题</label>
        <p>{{ article_form.title }}</p>
        <label for="title">文章内容</label>
        <p>{{ article_form.content }}</p>
    <p>文章分类</p>
        {% for cate in cate_list %}
            <input type="radio" name="personal_cate" value="{{ cate.nid }}">{{ cate.title }}
        {% endfor %}
    <p>文章标签</p>
        {% for tag in tag_list %}
            <input type="checkbox" name="personal_tag" value="{{ tag.nid }}">{{ tag.title }}
        {% endfor %}
    </form>
    <button id="submit">提交</button>



{% endblock %}








{% block script %}
<script>

function foo() {
    $(".success").html("")
}


    KindEditor.ready(function(K) {
                window.editor = K.create('#editor_id',{
                        width:"800px",
                        height:"400px",
                        resizeType:0,
                        uploadJson:"/uploadFile/",
                        extraFileUploadParams:{
                           csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val(),
                       },
                });
     });
     $("#submit").click(function () {
         $.ajax({
             url:"/blog/{{ request.user.username }}/backindex/addarticle/",
             type:"POST",
             data:{
                 title:$("[name=title]").val(),
                 content:editor.html(),
                 tag:$("[name=personal_tag]").val(),
                 cate:$("[name=personal_cate]").val(),
                 csrfmiddlewaretoken: $("[name='csrfmiddlewaretoken']").val(),
             },
             success:function (data) {
                 editor.html(""),
                 $("[name=title]").val(""),
                 $(".success").html("添加成功"),
                     setTimeout(foo,3000)
             }
         })
     });

    </script>
{% endblock %}
复制代码

 

posted @   一石数字欠我15w!!!  阅读(282)  评论(0编辑  收藏  举报
编辑推荐:
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
阅读排行:
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 如何使用 Uni-app 实现视频聊天(源码,支持安卓、iOS)
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
点击右上角即可分享
微信分享提示