Django中static & media的简单配置及图片上传实践
static & media
在Django应用的文件夹下，经常会发现这两个文件夹：static, media; static称为静态文件夹，用于存放CSS, JavaScript, 网站logo等不变的文件；相对的，把media称为媒体文件夹，用于存放用户上传的图片。
static 配置和使用
- 配置项目的settings.py:
STATIC_URL = '/static/' # 静态文件别名（相对路径） 和 绝对路径
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'app01/static'),
)
# STATIC_ROOT 配置部署的时候才用- 使用：
{% load static %}
"{% static 'img/default.jpg' %}" alt="default_photo"/>media 配置和使用
如果需要保存用户上传的图片或文件，需要作如下配置：
- 配置项目的settings.py:
MEDIA_URL = "/media/" # 媒体文件别名(相对路径) 和 绝对路径
MEDIA_ROOT = (
os.path.join(BASE_DIR, 'app01/media')
)- 配置路由：
from django.conf.urls import url
from django.views.static import serve
from . import settings
urlpatterns = [
# ... the rest of your URLconf goes here ...
url(r'^media/(?P.*)$' , serve, {'document_root': settings.MEDIA_ROOT})
]- models.py中设置上传图片/文件字段：
from django.db import models
class UserInfo(models.Model):
username = models.CharField(verbose_name='用户名', max_length=32)
avatar = models.FileField(verbose_name='头像', upload_to='upload/avatar/')
upload_to相当于上传到app01/media/upload/avatar/目录下。
注意：
FileField或ImageField字段适用于存储文件/图片，出于性能考虑，文件并不直接保存到数据库，而是保存在文件系统里，因此该字段只是记录一个路径而已。
这个路径是相对于MEDIA_ROOT的，要想得到文件/图片的绝对路径，需要用.url方法。比如，要在页面中显示用户user_obj的头像，那么在模板中可以这样写：
"{{ user_obj.avatar.url }}" alt="user_avatar">其它参考：
http://blog.csdn.net/java2king/article/details/5334303
http://blog.csdn.net/junli_chen/article/details/47335919
用户上传头像实践
准备工作
- 新建一个项目，创建应用app01，如上配置好static和media，配置路由如下：
from django.conf.urls import url
from app01 import views
from django.views.static import serve
from . import settings
urlpatterns = [
url(r'^register/$', views.register),
url(r'^upload/$', views.upload),
url(r'^media/(?P.*)$' , serve, {'document_root': settings.MEDIA_ROOT}),
]- 定义register视图函数，处理用户注册请求：
def register(request):
if request.method == 'GET':
return render(request, 'register.html')- register.html如下：
{% load static %}
<style>
div.custom-avatar {
position: relative;
width: 60px;
height: 60px;
}
.sol {
position: absolute;
top: 0;
left: 50px;
width: 60px;
height: 60px;
}
div.custom-avatar input {
opacity: 0;
}
style>
<form>
<p><label for="username">用户名：label>p>
<p><input type="text" id="username" name="username">p>
<div class="custom-avatar">
<label for="avatar">头像：label>
<img src="{% static 'img/default.jpg' %}" id="avatar" class="sol">
<input type="file" id="file-choose" class="sol">
div>
<p><button>提交button>p>
form>说明：
这里通过
从server请求一张默认头像；
定义CSS，令选择文件按钮和默认头像重合；
浏览器访问
http://127.0.0.1:8000/register/，页面如下：
说明：浏览器查看默认头像地址为：http://127.0.0.1:8000/static/img/default.jpg；如果在调试过程中无法显示来自server的图像，可以通过在浏览器中查看图像地址是否正确。
图像预览
要求：用户每次选择一张图片，页面中即时显示该图片的预览
要点：JS onchange事件，每次用户选择了新图片，生成新的预览；FileReader文件阅读器，将文件对象转化为路径对象