{#    {% 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. java-appium-527 WebDriver协议&针对控件的操作

    1.WebDriver协议 https://www.w3.org/TR/webdriver/#list-of-endpoints 1.1查看当前所有的session情况 http://127.0.0. ...

  2. Unreal Engine 4（虚幻UE4）GameplayAbilities 插件入门教程（六）GameplayEffect的级别设置

    本节的内容不难,权当是复习.如果没有完成前面的教程,请前往学习. 第一步:用一个csv文件表示级别数据,下图中的Hurt随级别1~7表示其损伤值在1~7级别时分别是-7,-14,-20等.写好之后关闭 ...

  3. Rest架构以及什么是Restful

    关于Rest的内容,在网上开了好多文章~ 下面我就把一些关于Rest经典的链接发出来,大家可以参考一下~ 1.什么是Rest和Restful? 怎样用通俗的语言解释什么叫 REST,以及什么是 RES ...

  4. python protobuf序列化repeated运用

    下面是proto描述文件的定义 message Person { required string name = 1; required int32 id = 2; optional string em ...

  5. Hadoop 2.7.3 分布式集群安装

    1. 集群规划: 192.168.1.252 palo252 Namenode+Datanode 192.168.1.253 palo253 YarnManager+Datanode+Secondar ...

  6. web.py尝试性学习！

    首先导入web.py模块! import web 没有的话就: pip install web web.py的URL结构: urls = ( '/', "index" ) 第一部分 ...

  7. face，Pool

    .a 在使用Python进行系统管理时,特别是同时操作多个文件目录或者远程控制多台主机,并行操作可以节约大量的时间.如果操作的对象数目不大时,还可以直接使用Process类动态的生成多个进程 ,十几个 ...

  8. GD库简介和使用

    简介 php并不仅限于创建html输出,它也可以创建和处理包括GIF,PNG,jpef,wbmp以及xpm在内的多种格式的图像.更加方便的是,php可以直接将图像数据库输出到浏览器.要想在php中使用 ...

  9. HTML5 Canvas ( 图片绘制 转化为base64 ) drawImage,toDataURL

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  10. VBA 编写类

    一.初识类 现在,请打开你的VBE,主菜单-插入-类模块. 插入了一个类模块,也就建立了一个类.类模块的名字就是类的名字.你现在看到的,她的名字叫“类1”,这是VBA按她姐妹排行给她取的的,是的,VB ...