20-1 django上傳文件和項目裏上傳頭像如何查看

時間 2019-11-29

原文原文鏈接

一普通上傳方式css

1 viewshtml

 1 def upload(request):
 2     if request.method == "POST":
 3         # print(request.POST)
 4         # print(request.FILES)
 5         # 從上傳的文件數據中拿到 avatar對應的文件對象
 6         file_obj = request.FILES.get("avatar")
 7         # 在服務端新建一個和上傳文件同名的新文件
 8         with open(file_obj.name, "wb") as f:
 9             # 從上傳文件對象中一點一點讀數據
10             for i in file_obj:
11                 # 寫入服務端新建的文件
12                 f.write(i)
13         return HttpResponse("OK")
14     return render(request, "upload.html")

2 htmljquery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="" method="post" enctype="multipart/form-data">
    {% csrf_token %}

        上傳頭像：
        <input type="file" name="avatar">
    </p>
    <input type="submit" value="提交">
</form>

</body>
</html>

二 ajax上傳方式ajax

1 views.py數據庫

# ajax_upload上傳
def ajax_upload(request):
    if request.method == "POST":
        # print(request.POST)
        # print(request.FILES)
        # 從上傳的文件數據中拿到 avatar對應的文件對象
        file_obj = request.FILES.get("avatar")
        # 在服務端新建一個和上傳文件同名的新文件
        with open(file_obj.name, "wb") as f:
            # 從上傳文件對象中一點一點讀數據
            for i in file_obj:
                # 寫入服務端新建的文件
                f.write(i)
        return HttpResponse("OK")
    return render(request, "ajax_upload.html")

2 html文件django

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax上傳文件</title>
</head>
<body>
<input type="file" name="avatar" id="i1">
<input type="button" value="上傳" id="b1">
{% csrf_token %}
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
    $("#b1").click(function () {
        // 先生成一個FormData對象
        // 將要提交的數據 append 到FormData對象中
        var fd = new FormData();
        fd.append("csrfmiddlewaretoken", $("[name='csrfmiddlewaretoken']").val());
        fd.append("avatar", $("#i1")[0].files[0]); // 獲取文件名字
        $.ajax({
            url: "/ajax_upload/",
            type: "post",
            data: fd,
            contentType: false,
            processData: false,
            success: function (res) {
                console.log(res)

            }


        })

    });


</script>

</body>
</html>

三如何註冊的時候上傳頭像並顯示bootstrap

1 urls配置：服務器

from django.views.static import serve  # 用戶上傳文件用的模塊
from django.conf import settings  # 一樣是上傳用的


url(r'^media/(?P<path>.*)', serve, {"document_root": settings.MEDIA_ROOT}),

2 setting.pyapp

# 告訴djanjo項目用戶上傳的文件保存在哪一個目錄下
MEDIA_ROOT = os.path.join(BASE_DIR, "upload")
# 告訴用戶用哪一個前綴來訪問剛纔的定義的那個目錄別名
MEDIA_URL = "/media/"

3 views配置：ide

 1 class RegisterView(views.View):
 2     '''
 3     若是是get請求，就返回註冊頁面，用的form寫的註冊頁面，先導入剛纔寫的forms模塊，而後調用RggisterForm
 4     若是是post請求（就是提交請求），form_obj獲取到用戶填的全部內容，而後去校驗數據格式是否正確，若是沒問題，就去
 5     數據庫裏面建立數據，建立以前，要先刪除re_password這個字段，由於數據庫裏沒有這個字段
 6     而後接受頭像文件，須要用request.FILES，去獲取
 7     最後去數據庫保存，須要把你的普通數據和頭像數據分開來存儲。
 8     註冊成功以後，就跳轉到登陸界面，不然就報報錯信息返回到頁面上面
 9     '''
10 
11     def get(self, request):
12         form_obj = forms.RegisterForm()
13         return render(request, "register.html", locals())
14 
15     def post(self, request):
16         res = {"code": 0}
17         form_obj = forms.RegisterForm(request.POST)
18         if form_obj.is_valid():
19             # 數據沒問題，去數據庫建立記錄
20             form_obj.cleaned_data.pop("re_password")
21             # 頭像數據，文件對象
22             avatar_obj = request.FILES.get("avatar")
23             # 頭像文件保存到數據庫,若是你的models裏面寫的這個字段FileField，就會自動寫在服務器上面
24             models.UserInfo.objects.create_user(**form_obj.cleaned_data, avatar=avatar_obj)
25             res["url"] = "/login/"
26         else:
27             # 數據有問題
28             res["code"] = 1
29             res["error"] = form_obj.errors
30         return JsonResponse(res)

View Code

4 html配置;

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>註冊</title>
 6     <link rel="stylesheet" href="/static/plugins/bootstrap-3.3.7/css/bootstrap.min.css">
 7 </head>
 8 <body>
 9  <div class="container">
10     <div class="row">
11         <div class="col-md-6 col-md-offset-3">
12             <form class="register-form">
13                 {% csrf_token %}
14                 {% for field in form_obj %}
15                 <div class="form-group">
16                         <label for="{{ field.id_for_label }}">{{ field.label }}</label>
17                          {{ field }}
18                          <span class="help-block"></span>
19 
20 
21                 </div>
22                 {% endfor %}
23                 <div class="form-group">
24                     <label for="id_avatar">頭像
25                         <img src="/static/images/default.png" id="avatar-img" style="width: 60px">
26                     </label>
27                     <input type="file" id="id_avatar" accept="image/*" class="form-control" style="display: none">
28 
29                 </div>
30                 <div style="text-align: center">
31                      <button style="width: 100px" type="button" class="btn btn-success" id="submit-btn">提交</button>
32 
33                 </div>
34 
35             </form>
36         </div>
37     </div>
38 
39 </div>
40  <script src="/static/plugins/jquery-3.3.1.min.js"></script>
41  <script src="/static/plugins/bootstrap-3.3.7/js/bootstrap.min.js"></script>
42  <script src="/static/js/register.js"></script>
43 
44 </body>
45 </html>

View Code

js配置：

 1 // 設置錯誤提示
 2 $("#submit-btn").click(function () {
 3     // 由於註冊功能有頭像文件 數據，因此要用FormData對象提交數據
 4     var fd = new FormData();
 5     fd.append("username", $("#id_username").val());
 6     fd.append("password", $("#id_password").val());
 7     fd.append("re_password", $("#id_re_password").val());
 8     fd.append("phone", $("#id_phone").val());
 9     fd.append("email", $("#id_email").val());
10     fd.append("csrfmiddlewaretoken", $("[name='csrfmiddlewaretoken']").val());
11     // avatar頭像
12     fd.append("avatar", $("#id_avatar")[0].files[0]);
13     $.ajax({
14         url: "/register/",
15         type: "post",
16         data: fd,
17         contentType: false,
18         processData: false,
19         success: function (res) {
20             if (res.code === 1) {
21                 $.each(res.error, function (k, v) {
22                     console.log(k, v[0]);
23                     {
24                         // #先找到input標籤，下面的那個標籤，而後設置錯誤信息，再找到顯示錯誤標籤的父標籤，設置has - error
25 
26                     }
27                     $("#id_" + k).next().text(v[0]).parent().addClass("has-error");
28                 })
29             } else {
30                 location.href = res.url
31             }
32 
33         }
34     })
35 
36 });
37 
38 // 給input標籤綁定獲取焦點就刪除錯誤提示的動做
39 $(".register-form input").focus(function () {
40     $(this).next().text("").parent().removeClass("has-error");
41 });
42 
43 //頭像預覽功能
44 //值發生變化了
45 $("#id_avatar").change(function () {
46     // 取到用戶選中的頭像文件
47     var fileObj = this.files[0]; //路徑
48     // 新建一個FileReader對象，從本地磁盤加載文件數據
49     var fr = new FileReader();
50     fr.readAsDataURL(fileObj);
51     // 讀取文件是須要時間的
52     fr.onload = function () {
53         // 找到頭像預覽的img標籤，把它的src屬性設置成我讀取的用戶選中的圖片
54         $("#avatar-img").attr("src", fr.result)  //結果
55     }
56 
57 });

View Code

index.html首頁導航條圖像顯示

 <li><img style="height: 40px;width: 40px;border-radius: 50%" src="/media/{{ request.user.avatar }}"></li>

相關標籤/搜索

每日一句

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