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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。