{#    {% for u in teacher_d.keys %}#}

{#    {% for u in teacher_d.values %}#}

    {% for k,u in teacher_d.items %}

        <input type="text" value="{{ k }}">

        <input type="text" value="{{ u }}">

    {% endfor %}

　　

        user_dict = {

            "1":"sb1",

            "2":"sb2"

        }

        return render(request,"teacher.html",{"teacher_list":new_teacher_list,"teacher_d":user_dict})

　　

基于form上传文件，我们一般会把文件上传到指定的路径，然后在数据库中存储文件和对应的路径的地址

前端上传文件的代码

<body>

    <form method="post" action="/user_manager_app1/upload/" enctype="multipart/form-data">

{#        enctype="multipart/form-data"如果在form标签中加上这一个属性，则上传的问题就不在request.POST中了，而在request.FILES中#}

        <input type="text" name="name">

        <input type="file" name="file">

        <input type="submit" value="sum提交">

    </form>

    <h1>文件展示</h1>

    <table border="1">

        <caption>数据库中的文件</caption>

        <thead>

            <tr>

                <th>文件名称</th>

                <th>文件路径</th>

                <th>上传时间</th>

                <th>文件大小</th>

                <th>文件操作</th>

            </tr>

        </thead>

        <tbody>

            {% for file in file_data %}

                <tr>

                    <td>{{ file.file_name }}</td>

                    <td>{{ file.file_path }}</td>

                    <td>{{ file.file_time }}</td>

                    <td>{{ file.file_size }}</td>

                    <td>查看|删除</td>

                </tr>

            {% endfor %}

        </tbody>

    </table>

</body>

　　

后端处理的代码

def upload(reqeust):

    if reqeust.method.lower() == "get":

        file_all = models.file.objects.all()

        return render(reqeust,"upload.html",{"file_data":file_all})

    else:

        name = reqeust.POST.get("name")

        file = reqeust.POST.get("file")

        file_new = reqeust.FILES.get("file")

        print("上传的文件的名称",file_new.name,"文件的大小",file_new.size)

        file_path = os.path.join("static","upload",file_new.name)

        with open(file_path,"wb") as f:

            for chunk in file_new.chunks():

                f.write(chunk)

        models.file.objects.create(

            file_path = file_path,

            file_name =  file_new.name,

            file_time = time.ctime(),

            file_size = file_new.size

        )

        return redirect("/user_manager_app1/upload/")

　　

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

通过ajax上传文件

前端代码--html

    <h1>formData方式上传</h1>

    <div id="imgs">

    </div>

    <input type="file" id="upload_file">

    <input type="button" value="点击上传" id="upload_button">

    <span id="errors"></span>

　　

前端代码--jquery

<script src="/static/jq/jquery-3.3.1.js"></script>

    <script>

        $(function () {

            upload_file()

        })

        function upload_file() {

            $("#upload_button").bind("click",function () {

{#                $("#errors").html()#}

                var dict = new FormData()

                dict.append("file",document.getElementById("upload_file").files[0])

                $.ajax(

                    {

                        url:"/app1/upload_ajax/",

                        type:"POST",

                        data:dict,

                        success:function (data) {

                            data = JSON.parse(data)

                            if(data["state"] == "true"){

                                var img = document.createElement("img");

                                img.src = "/" + data["file_path"];

                                var father_ele = document.getElementById("imgs");

                                father_ele.appendChild(img);

{#                                window.location.reload()#}

                            }else {

                                $("#errors").html(data["error"])

                            }

                        },

                        processData:false,

                        contentType:false

                    }

                )

            })

        }

    </script>

　　

这里有三个点需要注意

a、这里需要个formdata的对象，把我们上传的文件通过append的方法添加到这个formdata对象中，然后通过ajax把这个formdata对象发送给后端就可以了

先找到上传文件的input的标签，这里我们通过id去定位到input的标签

b、通过ajax直接把这个数据发送给后端，这里要注意，我们的data就是上面我们创建的formdata对象中

c、如果ajax要向后端发送数据，则必须要还有设置两个类型

最后我们看下后端的代码，后端也是要在request.Files中获取文件对象，然后写到本地就可以了

def upload_ajax(request):

    import os

    import json

    method = request.method.lower()

    if method == "get":

        return render(request,"upload.html")

    else:

        res = {"state":"true","file_path":None,"error":""}

        file = request.FILES.get("file")

        print(file)

        file_path = os.path.join("static","file",file.name)

        try:

            with open(file_path,"wb") as f:

                for chunk in file.chunks():

                    f.write(chunk)

        except Exception as e:

            print(e)

            res["state"] = "false"

            res["error"] = "上传失败"

            return HttpResponse(json.dumps(res))

        else:

            res["file_path"] = file_path

            return HttpResponse(json.dumps(res))

　　

models渲染字典&form表单上传文件&ajax上传文件的更多相关文章

  1. 摒弃FORM表单上传图片，异步批量上传照片

    之前作图像处理一直在用form表单做图片数据传输, 个人感觉low到爆炸而且用户体验极差,现在介绍一个一部批量上传图片的小技巧,忘帮助他人的同时也警醒自己在代码的编写时不要只顾着方便,也要考虑代码的健 ...

  2. java如何区分是form表单请求，还是ajax请求

    requestType = request.getHeader("X-Requested-With");                 if(requestType==null) ...

  3. Checkbox框全选操作，form表单提交与jquery ajax提交两种处理方式

    //1.jquery ajax<script type="text/javascript"> $(function(){ var basePath = $(" ...

  4. 前后端交互技术之servlet与form表单提交请求及ajax提交请求

    1.先来个简单的form表单 login.jsp,建在webcontent目录下(url写相对路径就可以了) <!DOCTYPE html><html><head> ...

  5. 【文件上传】文件上传的form表单提交方式和ajax异步上传方式对比

    一.html 表单代码 …… <input type="file" class="file_one" name="offenderExcelFi ...

  6. form表单，submit，ajax提交

    尼玛... 一个简单的表单提交,竟然给我整的直郁闷. 本来就是个保存功能,几个前人都用的ajax提交,我也就没改成submit.然后坑爹的就来了. 我在表单里写了个<form></f ...

  7. Django的form表单之文件上传

    在生成input标签的时候可以指定input标签的类型为file类型 <!DOCTYPE html> <html lang="en"> <head&g ...

  8. form表单上传文件

    一.formData()直接获取form表单数据 例子:获取form表单的id给formData(),然后传给后台. 要求: 传入值的name值必须与后台接受的name相对应. form表单不能嵌套, ...

  9. Django之form表单组件

    Form介绍 我们之前在HTML页面中利用form表单向后端提交数据时,都会写一些获取用户输入的标签并且用form标签把它们包起来. 与此同时我们在好多场景下都需要对用户的输入做校验,比如校验用户是否 ...

随机推荐

  1. 3种方法轻松处理php开发中emoji表情的问题

    背景 做微信开发的时候就会发现,存储微信昵称必不可少. 可这万恶的微信支持emoji表情做昵称,这就有点蛋疼了 一般Mysql表设计时,都是用UTF8字符集的.把带有emoji的昵称字段往里面inse ...

  2. VMware仅主机模式访问外网

    原文转载至:https://blog.csdn.net/eussi/article/details/79054622 保证VMware Network Adapter VMnet1是启用状态  将可以 ...

  3. Spark学习笔记1：Spark概览

    Spark是一个用来实现快速而通用的集群计算的平台. Spark项目包含多个紧密集成的组件.Spark的核心是一个对由很多计算任务组成的,运行在多个工作机器或者是一个计算集群上的应用进行调度,分发以及 ...

  4. 运行inetmgr提示“找不到文件”无法打开IIS管理器的解决办法

    运行inetmgr提示“找不到文件”无法打开IIS管理器的解决办法 不知道什么时候开始运行inetmgr就提示找不到文件了,本以为是IIS坏了,这两天发现IIS服务还是可以运行的,只是运行inetmg ...

  5. C++多线程同步之Semaphore(信号量)

    一.线程间同步的几种方式 从上篇博文中可以发现,当多个线程对同一资源进行使用时,会产生“争夺”的情况,为了避免这种情况的产生,也就出现了线程间的同步这个技术.线程间的同步有多种方式,在接下来的博文中我 ...

  6. 序列化模块json--pickle--shelve

    什么是序列化? 将一组或多组数据结构转化成一个字符串的过程就叫做序列化 它的目的: 序列化的结构是字符串,准确的说是bytes类型,方便存储 方便于网络传输, 既然序列化是从数据类型到字符串的过程,那 ...

  7. 28. 表单css样式定义格式

    form>table>tbody>tr>td{padding:5px;font-size:14px;font-family:"Microsoft YaHei" ...

  8. 23. oralce11g导出dmp然后导入Oracle10g

    解决方法: 一.在11g服务器上,使用expdp命令备份数据 EXPDP USERID='fjgs/fjgs@orcl' schemas=fjgs directory=DATA_PUMP_DIR du ...

  9. 线程安全计算 AtomicLong

    一般如果我们自己写一个计数器方法,需要考虑线程安全问题,尤其高并发访问的时候. AtomicLong 已处理并发问题,直接使用.java.util.concurrent.atomic包提供多种线程安全 ...

  10. ABAP-反调JCO服务