• 博客系统-文件上传问题


    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',{
                            "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 %}
  • 相关阅读:
    时间选择器组件之table避坑指南
    ⼯⼚模式
    外观模式
    中介者模式+装饰器模式
    代理模式
    策略模式
    设计模式--------单例模式
    设计模式--------订阅/发布模式 (观察者)
    对ts的研究
    对react的研究20200724
  • 原文地址:https://www.cnblogs.com/52-qq/p/8669595.html
Copyright © 2020-2023  润新知