{#    {% 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. USB接口程序编写

    copy from http://blog.csdn.net/luckywang1103/article/details/12393889# HID是Human Interface Devices的缩 ...

  2. sqoop导入导出对mysql再带数据库test能跑通用户自己建立的数据库则不行

    sqoop对hdfs导入导出怎么操作这里我就不多说了 现在说下sqoop导入导出时针对mysql后面用户手动创建的数据库导入到处遇到的问题 首先我这里搭建的是3节点集群 master slave1 s ...

  3. 学大伟业Day1解题报告

    学大伟业Day1解题报告 张炳琪 一.   时间分配 T1:30分钟  T2: 60分钟  T3:100分钟 二．答题情况及错因 T1:100         T2:55             T3 ...

  4. re模块 ,random模块

    # 在python中使用正则表达式 # 转义符 : 在正则中的转义符 \ 在python中的转义符# 正则表达式中的转义 :# '\(' 表示匹配小括号# [()+*?/$.] 在字符组中一些特殊的字 ...

  5. JPA注解@SecondaryTables 实现一个实体映射多张数据库表

    参考:http://jingpin.jikexueyuan.com/article/46978.html Annotation Type SecondaryTables(参考:https://docs ...

  6. jquery formValidator 表单验证插件, ajax无法传值到后台问题的解决

    今天使用jquery   formValidator-4.0.1 这个插件做表单验证,  前台验证已写好, 准备写ajax验证, 结果无法把值传到后台 .ajaxValidator({ url : & ...

  7. Maven的几个常用plugin

    出自:https://www.cnblogs.com/zhangxh20/p/6298062.html maven-compiler-plugin 编译Java源码,一般只需设置编译的jdk版本 &l ...

  8. 前端-CSS-8-浮动与清楚浮动（重点）

    <!-- 浮动是css里面布局最多的一个属性 效果: 两个元素并排了,并且两个元素都能够设置宽度和高度 浮动想学好:一定要知道它的四个特性: 1.浮动的元素脱标 2.浮动的元素互相贴靠 3.浮动 ...

  9. import 语句用于导入从外部模块，另一个脚本等导出的函数，对象或原语。

    import 语句用于导入从外部模块,另一个脚本等导出的函数,对象或原语. 注意:此功能目前无法在任何浏览器中实现.它在许多转换器中实现,例如 Traceur Compiler , Babel , R ...

  10. MySql PartionBy

    SELECT tableOld.*, if(@channelName = tableOld.channelName, @rank := @rank + 1, @rank := 1) AS rank, ...