models渲染字典&form表单上传文件&ajax上传文件

时间：2022-10-19 17:22:46
{#    {% 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的标签

models渲染字典&form表单上传文件&ajax上传文件

models渲染字典&form表单上传文件&ajax上传文件

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

models渲染字典&form表单上传文件&ajax上传文件

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

models渲染字典&form表单上传文件&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. 5 Django系列之通过list&lowbar;display展示多对多与外键内容在admin-web界面下

    list_display展示多对多关系的内容 表结构关系 表一 class Server(models.Model): asset = models.OneToOneField('Asset') cr ...

  2. 小记：目标数组的长度不够。请检查 destIndex 和长度以及数组的下限。

    异常:System.ArgumentException: 目标数组的长度不够.请检查 destIndex 和长度以及数组的下限.(不好意思忘记截图了) 发生异常的代码如下: var list = ne ...

  3. PHP Redis 全部操作方法

    Classes and methods Usage Class Redis Class RedisException Predefined constants Class Redis Descript ...

  4. Install MongoDB driver for PHP on XAMPP for Mac OSX

    试了不少方法,最后还是这个最有效. [转自:http://thatsimplecode.com/install-mongodb-driver-for-php-on-xampp-for-mac-osx] ...

  5. 学习记录 Eclipse常用快捷键及其演练

    Eclipse中10个最有用的快捷键组合 1. ctrl+shift+r:打开资源 这可能是所有快捷键组合中最省时间的了.这组快捷键可以让你打开你的工作区中任何一个文件,而你只需要按下文件名或mask ...

  6. 采访 Lua 发明人的一篇文章

    采访 Lua 发明人的一篇文章 来源 https://blog.codingnow.com/2010/06/masterminds_of_programming_7_lua.html <Mast ...

  7. vue2&period;0开发时导入组件时出错

    导入自定义组件时出现了如下错误 ERROR Failed to compile with 1 errors 12:35:41 This dependency was not found: * comp ...

  8. MySQL学习笔记&lowbar;3&lowbar;MySQL创建数据表（中）

    MySQL创建数据表(中) 三.数据字段属性 1.unsigned[无符号] 可以让空间增加一倍 比如可以让-128-127增加到0-255 注意:只能用在数值型字段 2.zerofill[前导零] ...

  9. centOS 及 ubuntu 下载地址记录

    CentOS下载地址:   http://isoredirect.centos.org/centos/7/isos/x86_64/CentOS-7-x86_64-DVD-1611.iso  : ubu ...

  10. Exp0 Kali安装 Week1

    20165214 2018-2019-2 <网络对抗技术>Exp0 Kali安装 Week1 任务要求 Kali的下载.安装.共享.软件源. 步骤 1.从Kali的官网下载镜像文件.(直接 ...

相关文章