Form -- 文件上传

时间 2019-11-08

标签 form 文件上传繁體版

原文原文链接

当咱们选中文件,点击上传时便可。css

而此按钮通常是一张图片覆盖了一个input标签而以。基于这个原理咱们能够定制本身喜欢的样式html

<div style="text-align: center; margin-top: -80px" _v-6d94aab5="">
    <div style="width: 120px; height: 120px; border-radius: 60px; overflow: hidden; margin: 0 auto" _v-6d94aab5=""><img
            class="newImg" width="100%" alt="" _v-6d94aab5=""
            src="//hcdn1.luffycity.com/static/frontend/head_portrait/logo@2x.png?t=1527068146.672148">
        <div class="camera-icon" _v-6d94aab5="" style="display: none;"></div>
    </div>
    <span class="user-name" _v-6d94aab5="">Ace</span> <span class="user-job" _v-6d94aab5="">石家庄市 | 实习生</span>
    <p class="user-word" _v-6d94aab5=""></p>
</div>

当咱们生成一个form表单时前端

要注明：python

<form action="/upload.html" method="POST" enctype="multipart/form-data">

而在后端获取上传的文件时：须要经过request.FILES.get("这里是前端发送时文件的值")jquery

例如：ajax

user = request.POST.get('user')
        img = request.FILES.get('img')
        # img是对象（文件大小，文件名称,文件内容。。。）
        print(img.name)
        print(img.size)
        f = open(img.name, 'wb')
        for line in img.chunks():
            f.write(line)
        f.close()

利用FormData　　后端

FormData是什么呢？浏览器

XMLHttpRequest Level 2添加了一个新的接口 FormData.利用 FormData对象,咱们能够经过JavaScript用一些键值对来模拟一系列表单控件,咱们还能够使用XMLHttpRequest的 send()方法来异步的提交这个"表单".比起普通的ajax,使用 FormData的最大优势就是咱们能够异步上传一个二进制文件.

全部主流浏览器的较新版本都已经支持这个对象了，好比Chrome 7+、Firefox 4+、IE 10+、Opera 12+、Safari 5+。

注意：下文中的几个须要解释的

$("#upload") 拿到的是一个集合
$("#upload")[0]  就是一个dom对象
$("#upload")[0].files   拿到的是一个filelist
$("#upload")[0].files[0]  拿到的是当前最近的文件对象

要是使用FormData必定要加上：cookie

必定要加上：app

　　contentType：false
　　processDate：false #不作预处理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width">
    <title>Title</title>
</head>
<body>
<p>姓名<input type="text" name="username"></p>
<p>头像<input type="file" id="upload"></p>
<p><button class="btnnn">提交</button><span class="tishi"></span></p>
<script src="/static/jquery-3.2.1.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>
<script>
    $(".btnnn").click(function () {
         var formData=new FormData();
        formData.append("username",$(":text").val());
        formData.append("file",$("#upload")[0].files[0]);
        $.ajax({
            url:"/get_upload/",
            type:"POST",
            headers:{"X-CSRFToken":$.cookie('csrftoken')},
            data:formData,
            contentType:false,
            processData:false,
            success:function (data) {
                $(".tishi").html("上传成功")
            }

        })
    })
</script>
</body>
</html>