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{ 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{ 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) #为了实现评论树的字段