需求描述：

做一个简单的注册页面，使得用户在注册页上传头像。

解决办法：

以前用java写这个的时候，在action上面需要用IO接受文件，然后生成一个文件名，再将文件相对路径保存到user表的img字段中。

而在django的model层上，有一个叫做ImageField的字段（还有FileField，两者几乎一样），看了文档中对于这个字段的描述，大致意思就是自动将文件保存在media的文件夹里面，然后产生的文件路径保存到一个var char的字段中。如果一个model有ImageField字段，则在其对应表里面就会有一个var char字段，正是用于保存路径的。

1.设置setting中的MEDIA_ROOT：

如果使用django的快捷方法，那么所有用户上传的文件应该都会被保存到MEDIA_ROOT定义的文件夹中去。注意这里需要绝对路径。我的设置是：

# in settings.py

HERE = os.path.dirname(os.path.abspath(__file__))

MEDIA_ROOT = os.path.join(HERE,'media').replace('\\','/')+'/'

这样就能将MEDIA_ROOT设置为项目目录下的media目录。注意最后的斜杠，如果不加最后的斜杠，那么在保存的时候会出现奇怪的错误。

2.设置model：

为了方便，自己建了一个User的Model：

# in myapp1/models.py

class User(models.Model):

name = models.CharField(max_length=30)

password = models.CharField(max_length=30)

GENDER_CHOICE = (

(u'M', u'Male'),

(u'F', u'Female'),

)

gender = models.CharField(max_length=2,choices = GENDER_CHOICE)

birthday = models.DateField(null=True)

img = models.ImageField(upload_to='photo',null=True,blank=True)

phoneNum = models.CharField(max_length=13,null=True,blank=True)

email = models.EmailField(null=True,blank=True)

hobbies = models.CharField(max_length=100,null=True,blank=True)

regTime = models.DateTimeField(null=True,blank=True)

bio = models.TextField(null = True,blank=True)

def __unicode__(self):

return self.name

这里要注意的地方是null=True之后，要也要加上blank=True。其中null=True是针对数据库的，而blank=True是针对validation的。如果blank=True没加，那么在下面做form的时候，省略字段的话验证不会通过。

这里面有一个img字段，是ImageField类型的，这个在快速制作上传图片的表单里起了至关重要的作用。里面有一句upload_to='xxxxx'，是指文件保存在MEDIA_ROOT中的哪个子目录下。

3.设置forms from models：

django有一个form类，这个类抽象出了html的form。用在view里的话，就能在template里生成form的html。但是可以发现用户注册时，表单的字段和model的字段非常相似，所以可以通过model生成form类。

而model类里面并不是所有的内容都需要用户填写，比如regTime就不需要。这时候可以指定那些字段会成为form字段（使用fields=(xxxx)），或者可以指定哪些字段不会成为form字段（使用exclude=(xxx)）。这里，我们似乎只有一个regTime不需要显示。

另外，我们的model里面password字段是CharField，django不会聪明到通过变量名的意思来生成form，所以默认生成出来的会是input type="text"的表单，我们需要通过一种方法修改掉它。综上所述，最后的form代码是这样的：

# in myapp1/models.py

from django.db import models

from django.forms import ModelForm

from django import forms

class UserForm(ModelForm):

class Meta:

model = User #通过上面的User Model生成表单

exclude =('regTime')#将regTime字段排除在外

widgets = {

'password':forms.PasswordInput(),#将password字段的input type设为password

}

这样就能生成一个简单的form了。forms from models和普通的form类有一个区别，就是它有save()方法，这个方法在view中将会被使用。

4.在view里调用form

这里，假设注册页面为/reg/。如果使用get方法，则浏览器中给出注册表单，如果用post方法，则将表单内容保存到数据库。

如果使用forms from models，则在view上面将会非常的简单：

#in myapp1/views.py

def reg(request):

if request.method == 'POST':#提交表单

form = models.UserForm(request.POST,request.FILES)#如果表单中要传文件、图片，则需要传两个参数

if form.is_valid():#这个is_valid通过model的配置定义，这里显现出blank=True的意义了

form.save()#这一句save，不但保存了各个字段，而且自动将上传的文件保存到指定目录，并且生成文件路径，保存到user表的img字段中了。

else:#显示表单

form = models.UserForm()

return render_to_response('reg_form.html', {'form': form})

5.template中的使用：

<body>

<form enctype="multipart/form-data" action="/reg/" method="post">

{{ form.as_p }}

<input type="submit" value="Submit" />

</form>

</body>

这里和普通form是一样的。当然也可以手动设置格式，详见文档。

最后再配置一下urlpattern，就能在这个表单上传图片了。

不足：

单单这样做注册表单有个不足之处，就是没有confirm password这个字段。不过我们可以在UserForm类中增加一个表单字段，最后结果会是：

class UserForm(ModelForm):

confirm_password = forms.CharField(widget=forms.PasswordInput())

class Meta:

model = User

exclude('regTime')

widgets = {

'password':forms.PasswordInput(),

}

不过这样一来，template中生成的表单，会把confirm_password字段放在最下面。所以得手动设定格式。另外，form.is_valid()也不会监测password和它是不是一样，需要在后面手动加逻辑。

上面的方法不一定是最好的，不过也提供了一些思路。另外，即便是不使用forms from models，也可以方便的使用ImageField保存图片：

碰到的问题：

和MEDIA_ROOT对应有一个MEDIA_URL。按照道理说，MEDIA_ROOT是一个public的文件夹，不需要通过urlpatterns映射就能直接访问里面的文件（至少django 1.3里面STATIC_ROOT加上STATIC_URL可以做到这点），但是我测试了好几次，都还是经过了url映射才可以。目前暂时不知道怎么解决。

注意：

通过阅读文档，对MEDIA_URL的问题有了进一步的了解：django不会自动开放这个目录作为静态文件目录。在开发阶段，要使用urlpatterns映射。
但是这样仅限于开发阶段（static files也一样），按照django官方的说法，用urlpatterns映射静态文件的方法是“效率非常低”，进入使用阶段后，需要将media_root和static_root发布到“真正的静态文件服务器”。这也是为什么django本身提供static文件扫描，却又提供了python manage.py collectstatic这个命令来汇集各个app的static文件到static_root文件夹。

使用django的ImageField和from制作上传图片页面的更多相关文章

  1. 利用Bootstrap框架制作查询页面的界面

    UI设计实战篇——利用Bootstrap框架制作查询页面的界面   Bootstrap框架是一个前端UI设计的框架,它提供了统一的UI界面,简化了设计界面UI的过程(缺点是定制了界面,调整的余地不是太 ...

  2. web基础，用html元素制作web页面

    用div,form制作登录页面,尽可能做得漂亮. 练习使用下拉列表选择框,无序列表,有序列表,定义列表. 观察常用网页的HTML元素,在实际的应用场景中,用已学的标签模仿制作. <!DOCTYP ...

  3. django之创建第11个项目-页面整合

    目的:将如下众多html页面整合到一个index.html页面中. 百度云盘:django之创建第11个项目-页面整合 用下面的方式实现: <!DOCTYPE html> <head ...

  4. jQuery - 制作非缘勿扰页面特效

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. stelller插件与background-attachment配合使用，制作滚动页面

    stelller插件与background-attachment:fixed配合使用,制作滚动页面

  6. 制作登录页面，点击键盘的 Enter 键或者单击“登录”按钮，验证用户输入的邮箱和密码是否正确

    查看本章节 查看作业目录 需求说明: 制作登录页面 点击键盘的 Enter 键或者单击"登录"按钮,验证用户输入的邮箱和密码是否正确 实现思路: 准备登录的静态页面 在页面中嵌入脚 ...

  7. Django中ImageField的使用

    http://blog.csdn.net/u013690521/article/details/38777213 from django.db import models from django.co ...

  8. Django内置form表单和ajax制作注册页面

    settings.py import os # Build paths inside the project like this: os.path.join(BASE_DIR, ...) BASE_D ...

  9. Jquer + Ajax 制作上传图片文件

    没什么 说的  直接 上代码 //选择图片并上传 function selectImg(node){ var f = node.value; var file = node.files[0]; if( ...

随机推荐

  1. eclipse下部署web工程的两种方式

    习惯了Eclipse 的开发,就觉得不想那么懒去用MyEclipse傻瓜式的部署工程. 第一种,手动部署工程. 情况一:如果工程目录在tomcat目录的webapp目录下,这种情况就不需要有工程部署的 ...

  2. Java基础之一组有用的类——使用公历日历（TryCalendar）

    控制台程序. 公历是西方使用的日历,用GregorianCalendar类的对象来表示.GregorianCalendar对象封装了时区信息.日期和时间数据.GregorianCalendar对象有7 ...

  3. stucts2 基础程序

    参考<Struts2+Hibernate+Spring> index.jsp

  4. 【Origin】 偶题 之 抒意

    作词抒胸臆, 辞赋九万里: 从南盖到北, 句句表挚期. -作于二零一五年七月十五日

  5. 数据库 CRUD

    1.删除表 drop  table +表名 2.修改表 alter  table+表名+ add(添加)+列名+ int(类型) alter  table+表名+ drop(删除)+column(列) ...

  6. C++之路进阶——hdu2222（Keywords Search）

    /*Keywords Search Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Others) ...

  7. HDU 3686 Traffic Real Time Query System（双连通分量缩点+LCA）（2010 Asia Hangzhou Regional Contest）

    Problem Description City C is really a nightmare of all drivers for its traffic jams. To solve the t ...

  8. Openssl生成根证书、服务器证书并签核证书

    1.修改Openssl配置文件CA目录: cat /etc/pki/tls/openssl.cnf dir = /etc/pki/CA 2.生成根证书及私钥: #http://www.haiyun.m ...

  9. Session的工作机制详解和安全性问题（PHP实例讲解）

    我们先简单的了解一些http的知识,从而理解该协议的无状态特性.然后,学习一些关于cookie的基本操作.最后,我会一步步阐述如何使用一些简单,高效的方法来提高你的php应用程序的安全性以及稳定行. ...

  10. 3D语音天气球（源码分享）——在Unity中使用Android语音服务

    转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990),谢谢支持! 开篇废话: 这个项目准备分四部分介绍: 一:创建可旋转的"3D球":3 ...