day21

一、课上内容

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')

效果

day21

一、课上内容

二、实例

推荐阅读