一、课上内容
1、文件上传
a. Html Form表单提交
b. Ajax提交
原生XMLHttpRequest
http://www.cnblogs.com/wupeiqi/articles/5703697.html
XmlHttpReqeust() 类
xhr = XmlHttpReqeust()
xhr.send("k1=v1;k2=v2")
jQuery Ajax
$.ajax({}) 内部调用XmlHttpReqeust来发送的Ajax
$.ajax({
data: {'k1': 'v1', 'k2': 'v2'}
})
2、验证码 + session
抽屉：
需求分析
数据库设计
- 用户表
- 短信、邮件临时表
- 新闻类型表：
1 42区
2 段子
3 兔皮纳
4 挨踢
5 你问我答
- 新闻表：
标题，摘要，url，赞数1
http://dajia.qq.com/original/oldtimes/csc20160925.html
图片路径(url)，摘要
/detail/1
标题：asdf
摘要：asdfasd
URL：http://dajia.qq.com/original/oldtimes/csc20160925.html
类型：1
标题：
摘要：asdfasd
URL：http://dajia.qq.com/original/oldtimes/csc20160925.html
类型：2
- 点赞表
新闻ID 用户ID
1 1
- 评论表
新闻ID 用户ID 评论内容 评论事件 顶 踩
二、实例
目录结构
1.上传文件
urls.py
from django.conf.urls import url
from django.contrib import admin
from app01 import views
urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^upload/', views.upload),
url(r'^ajax/', views.ajax),
url(r'^xhr_ajax', views.xhr_ajax),
]
upload.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<iframe id="my_iframe" name="my_iframe" style="display: none" src=""></iframe>
<form method="POST" action="/upload/" enctype="multipart/form-data">
<input type="text" id="user" name="user" />
<input type="file" id="img" name="img" onchange="uploadfile3();" />
<input type="submit" />
</form>
<div id="container">
</div>
{# <a onclick="uploadfile();">XMLHttpRequset上传</a>#}
<a onclick="uploadfile2();">Jquery_XMLHttpRequset上传</a>
<script src="/static/jquery-1.9.1.min.js"></script>
<script>
function uploadfile(){
var form = new FormData();
form.append('user',document.getElementById('user').value);
var fileobj = document.getElementById('img').files[0];
form.append('img', fileobj);
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
var data = xhr.responseText;
console.log(data);
}
};
xhr.open('post','/upload/', true);
xhr.send(form);
}
function uploadfile2(){
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,
processData: false,
contentType: false,
success: function(arg){
console.log(arg);
}
})
}
function uploadfile3(){
$("#container").find('img').remove();
//绑定事件callback
document.getElementById('my_iframe').onload = callback;
document.getElementById('fo').target = 'my_iframe';
document.getElementById('fo').submit();
}
function callback(){
var text = $('#my_iframe').contents().find('body').text();
//反序列化
var json_data = JSON.parse(text);
console.log(json_data);
if(json_data.status){
var tag = document.createElement('img');
tag.src = "/" + json_data.data;
tag.className = 'img';
$('#container').append(tag);
}else{
alert(json_data.error);
}
}
</script>
</body>
</html>
views.py
from django.shortcuts import render,HttpResponse
import os
import json
def upload(request):
if request.method == 'POST':
ret = {'status': False, 'data':None,'error':None}
try:
user = request.POST.get('user')
#这里获取的是文件名不是文件
# img = request.POST.get('img')
#这里获取的是文件 对象类型
img = request.FILES.get('img')
file_path = os.path.join('static',img.name)
f = open(file_path,'wb')
print(img.name,type(img))
for chunk in img.chunks():
f.write(chunk)
f.close()
ret['status'] = True
ret['data'] = file_path
except Exception as e:
ret['error'] = str(e)
return HttpResponse(json.dumps(ret))
return render(request,'upload.html')
效果
