{#    {% 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. 正则捕获的细节及replace分析

    1.var reg=/./与var reg=/\./的区别? 前者代表任意一个字符, 后者代表这个字符串中得有一个点 2.?的使用 如果单独的一个字符后面带? 代表1个或0个这个字符的出现: 列如: ...

  2. [UE4]使机器人受伤

  3. CORS跨域的概念与TP5的解决方案

    namespace app\api\behavior; use think\Response; class CORS{ public function appInit(&$params) { ...

  4. phpstorm使用教程

    phpstorm包含了webstorm的全部功能,更能够支持php代码.PhpStorm是一个轻量级且便捷的PHP IDE,其旨在提供用户效率,可深刻理解用户的编码,提供智能代码补全,快速导航以及即时 ...

  5. IP地址与子网掩码

    IP地址 众所周知,为了确保通信时能相互识别,在internet上的每台主机都必须有一个唯一的标识,即主机的IP地址.IP协议就是根据IP地址来实现信息传递的. IP地址由32位(4字节)二进制数组成 ...

  6. php中的释放语句unset和释放函数mysql_free_result()

    首先要强调的一点是unset在php中已经不再是一个函数了,既然不是函数,那么就没有了返回值,所以用的时候不能够用unset的返回值来做判断. 其次,在函数中,unset只能销毁局部变量,并不能销毁全 ...

  7. 《Linux内核精髓：精通Linux内核必会的75个绝技》一HACK #19　ext4的调整

    HACK #19 ext4的调整 本节介绍可以从用户空间执行的ext4调整.ext4在sysfs中有一些关于调整的特殊文件(见表3-6).使用这些特殊文件,就不用进行内核编译.重启,直接从用户空间确认 ...

  8. Jenkins邮件扩展（Email Extension插件 Windows环境）

    1.Jenkins ver. 2.107.3版本自带Email Extension插件启动后即可看到系统设置里的 Extended E-mail Notification ,如果没有请安装 2.安装过 ...

  9. Github入门 - Github基本使用及Github桌面版使用

    知识内容: 1.版本控制 2.Git介绍 3.Github介绍及基本使用 4.Github桌面版介绍及安装 5.Github桌面版基础使用 6.Github桌面版进阶使用 参考: http://www ...

  10. Python序列化和反序列化vsJSON

    # -*- coding: utf-8 -* """没有嵌套类的类 author: Jill usage: """ import json ...