1.Django文件上传之Form方式
settings.py，
ALLOWED_HOSTS = ['*'] INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'app01',
] MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
# 'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
] STATICFILES_DIRS = (
os.path.join(BASE_DIR,'static')
)
urls.py，
url(r'^upload/', views.upload),
views.py，
import os def upload(request):
if request.method == 'POST':
username = request.POST.get('username',None)
img = request.FILES.get('img',None)
#图片不是字符串，所以用wb模式写入
f = open(os.path.join('static/img/',img.name),'wb')
for chun in img.chunks():
f.write(chun)
f.close()
print(username,img) return render(request,'upload.html')
upload.html，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form class="form-file" action="/upload/" method="post" enctype="multipart/form-data">
<input type="text" name="username" />
<input type="file" name="img" />
<input type="submit" value="submit" /> </form>
</body>
</html>
2. 原生Ajax
原生Ajax的作用，比如手机app，好多都是走的移动流量，那导入一个jquery.js文件就得1m，每次执行每次都导入每次都消耗1m流量，就不如用原生Ajax更合适了。
3.Django文件上传之原生Ajax方式
setting.py就是常规配置；
urls.py，
url(r'^upload/', views.upload),
views.py，
import os def upload(request):
if request.method == 'POST':
username = request.POST.get('user',None)
img = request.FILES.get('img',None)
f = open(os.path.join('static/img/',img.name),'wb')
for chun in img.chunks():
f.write(chun)
f.close()
print(username,img) return render(request,'upload.html')
upload.html，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.img{
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<input type="text" id="user" name="user" />
<input type="file" id="img" name="img" /> <a onclick="uploadFile1();" >XMLHttpRequet上传</a> <script src="/static/js/jquery-1.12.4.js"></script>
<script>
function uploadFile1(){
// 创建表单对象
var form = new FormData();
// 在表单对象中添加：user: 用户输入的用户名
form.append('user',document.getElementById('user').value);
// 在表单对象中添加：img: 文件对象
var fileObj = document.getElementById("img").files[0];
form.append("img", fileObj); var xhr = new XMLHttpRequest();
// 回调函数，当Ajax请求状态变化时，自动触发
xhr.onreadystatechange = function(){
// xhr.readyState=4 表示，客户端已经将服务器端响应的内容全部获取完毕
if(xhr.readyState == 4){
// xhr.responseText 获取服务器端响应的文本内容，即： views中 return HttpResponse中的内容
var data = xhr.responseText;
console.log(data);
}
};
// 创建异步连接
xhr.open("post", '/upload/', true);
// 发送请求，将form中的数据发送到服务器端
xhr.send(form);
} </script>
</body>
</html>
4.Django文件上传之jQuery Ajax方式
4.1 jQuery对象和dom对象转换
var i = document.getElementById('i1');
var j = $('#i1');
$(i) #dom转jquery
j[0] #jquery转dom
document.getElementById('img').files[0] 等价于 $('#img')[0].files[0]
4.2 jQuery方式上传文件
upload.html，
function uploadFile2(){
// jQuery对象和dom对象
var fileObj = $("#img")[0].files[0];
var form = new FormData();
form.append("img", fileObj);
form.append("user", 'alex');
$.ajax({
type:'POST',
url: '/upload/',
data: form,// # {'k1': ;'v1'} > send('k1=v1')
processData: false, // tell jQuery not to process the data
contentType: false, // tell jQuery not to set contentType
success: function(arg){
console.log(arg);
}
})
}
5. 文件上传之iframe方式
无论是原生ajax方式还是jquery方式上传文件，都需要“new FormData()”，而老的浏览器是不支持“new FormData()”，为了兼容性，就要用iframe方式上传文件，iframe方式支持任何版本的浏览器。
urls.py，
url(r'^upload/', views.upload),
views.py，
from django.shortcuts import render,HttpResponse,redirect # Create your views here. import os,json def upload(request):
if request.method == 'POST':
try:
ret = {'status':False,'data':'','error':''}
username = request.POST.get('user',None)
img = request.FILES.get('img',None)
file_path = os.path.join('static/img/',img.name)
f = open(file_path,'wb')
for chun in img.chunks():
f.write(chun)
f.close()
ret['status'] = True
ret['data'] = file_path
except Exception as e:
ret['error'] = e print(username,img)
return HttpResponse(json.dumps(ret))
# return HttpResponse('ok')
return render(request,'upload.html')
upload.html，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.img{
width: 300px;
height: 300px;
}
</style>
</head>
<body>
#定义一个iframe，它仅仅作为一个通道，不用显示出来，所以display:none。
<iframe id="my_iframe" name="my_iframe" style="display: none" src=""></iframe> <form id="fo" method="POST" action="/upload/" enctype="multipart/form-data">
<input type="text" id="user" name="user" /> #onchange，当检测到这个input变化（文件从无到有、更换文件）后，就自动执行函数。
<input type="file" id="img" name="img" onchange="uploadFile3();" />
<input type="submit" />
</form> <div id="filesee"> </div>
<a onclick="uploadFile3();" >测试Iframe</a> <script src="/static/js/jquery-1.12.4.js"></script>
<script>
function uploadFile3(){
#先移除旧图片，不然会依次显示所有图片
$('#filesee').find('img').remove(); #找到一个元素.onload等价于“onload=function()”。
document.getElementById('my_iframe').onload = callback; #target后面的'my_iframe'是上面iframe的name值，而不是id值；将数据以iframe为通道提交，因为iframe可以实现只刷新自己的框，不影响页面的其他元素，给用户的视觉效应就是网页没刷新。
document.getElementById('fo').target = 'my_iframe';
document.getElementById('fo').submit();
}
function callback(){ #iframe其实是一个完整的、单独的html代码，所以需要加一个“contents()”
var text = $('#my_iframe').contents().find('body').text()
var text = JSON.parse(text) #如果返回true，就显示图片，否则报警。
if(text.status) {
var file_path = '/' + text.data
var tag = document.createElement('img');
tag.src = file_path;
$('#filesee').append(tag);
}
else{
alert(text.error);
}
} </script>
</body>
</html>
6. Django文件上传注意事项
用户上传文件后，文件存在硬盘里，当点击发布时，将图片的路径和描述内容保存到数据库。
img对象里有一个“size”参数，可以用此来限制图片大小。
7. Django图片验证码
下面的代码去掉了一些代码，所以运行可能有点问题，根据情况修改。
如果只是文本验证码，那很不安全，避免不了暴力破解。
import requests
r1 = requests.get('www.sfbest.com')
print(r1.text)#这里的r1.text就是www.sfbest.com的源代码，从源代码里就能获取到“文本验证码”，然后requests.post('www.sfbest.com','{useranme:123,pwd:345,check_code:345ig}')，这样就轻松无限访问网站（比如抢票）。
urls.py，
url(r'^get_check_code/', views.get_check_code),
url(r'^loginauth/', views.loginauth),
check_code.py（放在app同级目录的backend下），
#!/usr/bin/env python
#coding:utf-8 import random
from PIL import Image, ImageDraw, ImageFont, ImageFilter _letter_cases = "abcdefghjkmnpqrstuvwxy" # 小写字母，去除可能干扰的i，l，o，z
_upper_cases = _letter_cases.upper() # 大写字母
_numbers = ''.join(map(str, range(3, 10))) # 数字
init_chars = ''.join((_letter_cases, _upper_cases, _numbers)) def create_validate_code(size=(120, 30),
chars=init_chars,
img_type="GIF",
mode="RGB",
bg_color=(255, 255, 255),
fg_color=(0, 0, 255),
font_size=18,
font_type="Monaco.ttf", #字体，放到app同级目录
length=4,
draw_lines=True,
n_line=(1, 2),
draw_points=True,
point_chance = 2):
'''
@todo: 生成验证码图片
@param size: 图片的大小，格式（宽，高），默认为(120, 30)
@param chars: 允许的字符集合，格式字符串
@param img_type: 图片保存的格式，默认为GIF，可选的为GIF，JPEG，TIFF，PNG
@param mode: 图片模式，默认为RGB
@param bg_color: 背景颜色，默认为白色
@param fg_color: 前景色，验证码字符颜色，默认为蓝色#0000FF
@param font_size: 验证码字体大小
@param font_type: 验证码字体，默认为 ae_AlArabiya.ttf
@param length: 验证码字符个数
@param draw_lines: 是否划干扰线
@param n_lines: 干扰线的条数范围，格式元组，默认为(1, 2)，只有draw_lines为True时有效
@param draw_points: 是否画干扰点
@param point_chance: 干扰点出现的概率，大小范围[0, 100]
@return: [0]: PIL Image实例
@return: [1]: 验证码图片中的字符串
''' width, height = size # 宽， 高
img = Image.new(mode, size, bg_color) # 创建图形
draw = ImageDraw.Draw(img) # 创建画笔 def get_chars():
'''生成给定长度的字符串，返回列表格式'''
return random.sample(chars, length) def create_lines():
'''绘制干扰线'''
line_num = random.randint(*n_line) # 干扰线条数 for i in range(line_num):
# 起始点
begin = (random.randint(0, size[0]), random.randint(0, size[1]))
#结束点
end = (random.randint(0, size[0]), random.randint(0, size[1]))
draw.line([begin, end], fill=(0, 0, 0)) def create_points():
'''绘制干扰点'''
chance = min(100, max(0, int(point_chance))) # 大小限制在[0, 100] for w in range(width):
for h in range(height):
tmp = random.randint(0, 100)
if tmp > 100 - chance:
draw.point((w, h), fill=(0, 0, 0)) def create_strs():
'''绘制验证码字符'''
c_chars = get_chars()
strs = ' %s ' % ' '.join(c_chars) # 每个字符前后以空格隔开 font = ImageFont.truetype(font_type, font_size)
font_width, font_height = font.getsize(strs) draw.text(((width - font_width) / 3, (height - font_height) / 3),
strs, font=font, fill=fg_color) return ''.join(c_chars) if draw_lines:
create_lines()
if draw_points:
create_points()
strs = create_strs() # 图形扭曲参数
params = [1 - float(random.randint(1, 2)) / 100,
0,
0,
0,
1 - float(random.randint(1, 10)) / 100,
float(random.randint(1, 2)) / 500,
0.001,
float(random.randint(1, 2)) / 500
]
img = img.transform(size, Image.PERSPECTIVE, params) # 创建扭曲 img = img.filter(ImageFilter.EDGE_ENHANCE_MORE) # 滤镜，边界加强（阈值更大） return img, strs
loginauth.html，
<div class="checkcode hide">
<img src="/get_check_code/" onclick="playcheckcode(this);"/>
<input type="text" name="checkcodevalue" placeholder="验证码" />
</div>
<script>
function playcheckcode(ths){
#每次在src后加一个问号，url变了就会重新提交一次请求，这样就实现了点击图片换验证码的功能。
var new_src = $(ths).attr('src') + '?';
$(ths).attr('src',new_src)
}
</script>
views.py，
def get_check_code(request):
#导入check_code.py
from backend import check_code as CheckCode
import io stream = io.BytesIO()
img, code = CheckCode.create_validate_code()
img.save(stream, "png")
#将验证码的内容值保存到session里，然后读取这个值，跟用户输入的比较，如果错误就反馈验证码错误。
request.session["CheckCode"] = code
return HttpResponse(stream.getvalue()) def loginauth(request):
#此处代码验证用户输入的账号、密码、验证码可用性。
8. 抽屉示例：需求分析以及数据库设计
models.py，
from django.db import models # Create your models here. #发送注册信息的临时表（将验证码发给用户邮箱或者用户手机）
class SendMsg(models.Model): nid = models.AutoField(primary_key=True) #自增id
code = models.CharField(max_length=6) #验证码内容
email = models.CharField(max_length=32, db_index=True) #邮箱或手机号
times = models.IntegerField(default=0) #发送的次数
ctime = models.DateTimeField() #创建时间（用以比较用户输入验证码时该验证码是否已过期） #用户信息表
class UserInfo(models.Model):
nid = models.AutoField(primary_key=True) #自增id
username = models.CharField(max_length=32, unique=True) #用户名
password = models.CharField(max_length=32) #密码
email = models.CharField(max_length=32, unique=True) #邮箱
ctime = models.DateTimeField() #创建时间 #新闻类型表
class NewsType(models.Model):
nid = models.AutoField(primary_key=True) #自增id caption = models.CharField(max_length=32) #新闻类型
# 1 42区
# 2 段子
# 3 兔皮纳
# 4 挨踢
# 5 你问我答 #新闻表
class News(models.Model):
nid = models.AutoField(primary_key=True) #自增id
user_info = models.ForeignKey('UserInfo') #将用户表与新闻表关联，哪个用户发表的该新闻
news_type = models.ForeignKey('NewsType') #将新闻类型表与新闻表关联，该新闻属于哪个类型
title = models.CharField(max_length=32, db_index=True) #新闻标题
url = models.CharField(max_length=128) #新闻的url或者图片的本地地址
content = models.CharField(max_length=50) #摘要
favor_count = models.IntegerField(default=0) #点赞个数
comment_count = models.IntegerField(default=0) #评论个数
ctime = models.DateTimeField() #创建时间 #点赞表
class Favor(models.Model):
nid = models.AutoField(primary_key=True) #自增id
user_info = models.ForeignKey('UserInfo') #与用户表关联，哪个用户点的赞，同一用户，第一次点赞是加1，第二次点赞就是减1了，不能无限点赞
news = models.ForeignKey('News') #与新闻表关联，给哪条新闻点赞的
ctime = models.DateTimeField() #创建时间 class Meta:
unique_together = (("user_info", "news"),) #评论表
class Comment(models.Model):
nid = models.AutoField(primary_key=True) #自增id user_info = models.ForeignKey('UserInfo') #与用户表关联
news = models.ForeignKey('News') #与新闻表关联 up = models.IntegerField(default=0) #顶
down = models.IntegerField(default=0) #踩
ctime = models.DateTimeField() #创建时间 device = models.CharField(max_length=16) #设备（手机、pad、chrome、firefox等）
content = models.CharField(max_length=150) #评论的内容 reply_id = models.ForeignKey('Comment', related_name='b', null=True, blank=True) #为了实现评论树的字段