20-1 django上传文件和项目里上传头像如何查看

一普通上传方式

1 views

 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 html

<!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上传方式

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文件

<!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>

三如何注册的时候上传头像并显示

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.py

# 告诉djanjo项目用户上传的文件保存在哪个目录下
MEDIA_ROOT = os.path.join(BASE_DIR, "upload")
# 告诉用户用哪个前缀来访问刚才的定义的那个目录别名
MEDIA_URL = "/media/"

3 views配置：

 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