django - 启用media | 上传文件 | 显示文件 功能不齐全 | 加载要上传的图片 未上传

1.　　启用media urls 设置 

from app import views
from django.urls import path, re_path
from django.views.static import serve
from django.conf import settings

# 启动media
re_path(r'^media/(?P<path>.*)$', serve, {'document_root': settings.MEDIA_ROOT}, name='media'),

 

2. setting 设置 

import os

# 启用media
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'

 

---

 

 

3.  显示想要上传的图片 , 其实图片并没有上传到服务器   

enctype="multipart/form-data  上传文件必须 带

<form method="post" action="{% url 'home_book_add' %}" novalidate enctype="multipart/form-data">

<div class="form-group">
            <label for="">封面</label>
            <input type="file" class="form-control-file" name="img_url">
                <br>
                <img src="" class="read_img" style="height: 80px">
</div>
</form>



<script>
        // 创建一个对象 出发图片开始执行
        $('input[name=img_url]').change(function () {
            //  获取对象
            var file = this.files[0]
            // 创建对象
            var reader = new FileReader();
            // 读取对象
            reader.readAsDataURL(file);
            reader.onload=function (e) {
                $('.read_img').attr('src', this.result)
            }

        })
</script>

显示效果 

 

---

 

 

4.  简单上传图片 到服务器  数据暂时没有保存到 

　　4.1   img_url  name 字段     file_obj.name 文件名称   file_obj 是对象

def book_add(request):

    if request.method == 'GET':
        return render(request, 'books/book_add.html')
    file_obj = request.FILES.get('img_url')
    f = open(file_obj.name, mode='wb')
    for chunk in file_obj.chunks():
        f.write(chunk)
    f.close()

 

---