for

forDance/settings.py

@@ -49,6 +49,7 @@
     'django.contrib.auth.middleware.AuthenticationMiddleware',
     'django.contrib.messages.middleware.MessageMiddleware',
     'django.middleware.clickjacking.XFrameOptionsMiddleware',
+    # 'django.middleware.csrf.CsrfResponseMiddleware',
 ]
 
 ROOT_URLCONF = 'forDance.urls'
@@ -142,3 +143,7 @@
 STATICFILES_DIRS = (
     os.path.join(BASE_DIR,'static'),
 )
+
+
+MEDIA_ROOT = os.path.join(BASE_DIR, 'media').replace('\\', '/')
+MEDIA_URL = '/media/'

forDance/urls.py

@@ -16,15 +16,19 @@
 from django.conf.urls import url
 from django.contrib import admin
 from freeStyle import views as dance_views
+from django.conf.urls.static import static
+from django.conf import settings
 
 urlpatterns = [
     url(r'^admin/', admin.site.urls),
 
-
+    url(r'^$', dance_views.toDance),
     url(r'^toDance/', dance_views.toDance),
     url(r'^getDance/', dance_views.getDance),
     url(r'^success/', dance_views.successPage),
     url(r'^record/', dance_views.recordPage),
-    url(r'^team/', dance_views.showTeam),
+    url(r'^upload/', dance_views.uploadImg),
 
-]
+    url(r'^upload', dance_views.uploadImg),
+    url(r'^show', dance_views.showImg),
+] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

freeStyle/migrations/0002_storeimg.py

@@ -0,0 +1,23 @@
+# -*- coding: utf-8 -*-
+# Generated by Django 1.11.7 on 2017-11-14 02:58
+from __future__ import unicode_literals
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('freeStyle', '0001_initial'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='storeImg',
+            fields=[
+                ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('img', models.ImageField(upload_to='img')),
+                ('name', models.CharField(max_length=20)),
+            ],
+        ),
+    ]

freeStyle/models.py

@@ -10,4 +10,8 @@ class danceRecord(models.Model):
     name = models.CharField(max_length=30)
     day = models.CharField(max_length=20)
     hour = models.CharField(max_length=20)
-    place = models.CharField(max_length=30)
+    place = models.CharField(max_length=30)
+
+class storeImg(models.Model):
+    img = models.ImageField(upload_to='img')
+    name = models.CharField(max_length=20)

freeStyle/views.py

@@ -2,11 +2,14 @@
 from __future__ import unicode_literals
 
 from django.http import HttpResponse
+
 from django.shortcuts import render
 
 # Create your views here.
 from pandas import json
 from models import danceRecord as dr
+from models import storeImg as si
+from PIL import Image
 
 
 def toDance(request):
@@ -77,4 +80,33 @@ def recordPage(request):
 
 def showTeam(request):
 
-    return render(request, "team.html")
+    return render(request, "team.html")
+
+def uploadImg(request):
+
+    print 'uploadImg'
+    return render(request, "success.html")
+
+def uploadImg(request):
+
+    if request.method == 'POST':
+        new_img = si(
+            img=request.FILES.get('img'),
+            name = request.FILES.get('img').name
+        )
+        new_img.save()
+
+    # img = Image.open('/home/siudong/myGit/forDance/media/img/timg.jpeg')
+    # img.show()
+    return render(request, 'uploading.html')
+
+def showImg(request):
+    imgs = si.objects.all()
+    content = {
+        'imgs':imgs,
+    }
+    for i in imgs:
+        # i.img.url = '/home/siudong/myGit/forDance' + i.img.url
+        print i.img.url
+
+    return render(request, 'showing.html', content)

static/js/upload.js

@@ -0,0 +1,95 @@
+//下面用于图片上传预览功能
+function setImagePreview(avalue) {
+　　var docObj=document.getElementById("doc");
+
+　　var imgObjPreview=document.getElementById("preview");
+　　if(docObj.files &&docObj.files[0])
+　　{
+　　　　//火狐下，直接设img属性
+　　　　imgObjPreview.style.display = 'block';
+　　　　imgObjPreview.style.width = '150px';
+　　　　imgObjPreview.style.height = '180px';
+
+　　　　//火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式
+　　　　imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
+　　}
+　　else
+　　{
+　　　　//IE下，使用滤镜
+　　　　docObj.select();
+　　　　var imgSrc = document.selection.createRange().text;
+　　　　var localImagId = document.getElementById("localImag");
+　　　　//必须设置初始大小
+　　　　localImagId.style.width = "150px";
+　　　　localImagId.style.height = "180px";
+　　　　//图片异常的捕捉，防止用户修改后缀来伪造图片
+　　　　try{
+　　　　　　localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
+　　　　　　localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
+　　　　}
+　　　　catch(e)
+　　　　{
+　　　　　　alert("您上传的图片格式不正确，请重新选择!");
+　　　　　　return false;
+　　　　}
+　　　　imgObjPreview.style.display = 'none';
+　　　　document.selection.empty();
+　　}
+　　return true;
+}
+
+function FW(event){
+    alert('hah');
+    var input = document.getElementById('doc');
+    var reader = new FileReader();
+    var csrf = document.getElementsByTagName('input')[0].value;
+    console.log(csrf);
+//    var dataAF = {};
+//    dataAF.img = reader.result;
+//        data.csrfmiddlewaretoken = csrf;
+    reader.onload = function(){
+        var dataAF = {};
+        dataAF.img = reader.result;
+        dataAF.csrfmiddlewaretoken = csrf;
+
+        httpHelper({
+            type:'post',
+            async:'true',
+            data:dataAF,
+            url:'/upload/',
+            success:function(){
+                //上传成功
+            },
+            error:function(){
+                //上传失败
+            }
+        });
+    };
+    reader.readAsBinaryString(input.files[0]);
+};
+function httpHelper(params) {
+    var request;
+    if(XMLHttpRequest)
+        request=new XMLHttpRequest();
+    else
+        request=new ActiveXObject("Microsoft.XMLHTTP");
+    request.onreadystatechange = function () {
+        if (request.readyState == 4) {
+            if (request.status == 200) {
+                if (params.success)
+                    params.success(request.responseText);
+            }
+            else if (parseInt(request.status / 100) == 4) {
+                if (params.error)
+                    params.error(request.responseText);
+            }
+        }
+    }
+    request.open(params.type, params.url, params.async);
+    try {
+        request.send(params.data||null);
+    } catch (e) {
+        if (params.error)
+            params.error(request.responseText);
+    }
+}

templates/showing.html

@@ -0,0 +1,3 @@
+{% for img in imgs %}
+<img src="{{ img.img.url }}" />
+{% endfor %}

templates/success.html

@@ -1,13 +1,54 @@
+<!--<!DOCTYPE html>-->
+<!--<html lang="en">-->
+<!--<head>-->
+    <!--<meta charset="UTF-8">-->
+    <!--<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0,  user-scalable=0" name="viewport" />-->
+
+    <!--<title>Success</title>-->
+<!--</head>-->
+<!--<body>-->
+    <!--<h1>Good boy(girl)<br/>-->
+        <!--See you later.</h1>-->
+<!--</body>-->
+<!--</html>-->
+
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0,  user-scalable=0" name="viewport" />
 
-    <title>Success</title>
+    <title>uploadImg</title>
+     {% load staticfiles %}
+    <script src="{% static "js/vendor/jquery-1.12.0.min.js" %}"></script>
+    <script src="{% static "js/upload.js" %}"></script>
 </head>
 <body>
-    <h1>Good boy(girl)<br/>
-        See you later.</h1>
+    <div>
+        {% csrf_token %}
+    　　<table width="100%" border="0" cellspacing="0" cellpadding="0">
+    　　　　<tbody>
+    　　　　　　<tr>
+    　　　　　　　　<td height="101" align="center">
+    　　　　　　　　　　<div id="localImag">
+
+    　　　　　　　　　　　　<img id="preview" src="" width="150" height="180" alt="placeholder"
+                     style="display: block; width: 150px; height: 180px;">
+
+    　　　　　　　　　　</div>
+    　　　　　　　　</td>
+    　　　　　　</tr>
+    　　　　　　<tr>
+    　　　　　　　　<td align="center" style="padding-top:10px;">
+
+    　　　　　　　　　　<input type="file" name="file" id="doc" style="width:150px;" onchange="setImagePreview()">
+
+    　　　　　　　　</td>
+    　　　　　　</tr>
+    　　　　</tbody>
+    　　</table>
+        <input type="button" value="upload" onclick="FW()"/>
+    </div>
+
 </body>
 </html>

templates/uploadImg.html

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0,  user-scalable=0" name="viewport" />
+
+    <title>uploadImg</title>
+     {% load staticfiles %}
+    <script src="{% static "js/vendor/jquery-1.12.0.min.js" %}"></script>
+    <script src="{% static "js/upload.js" %}"></script>
+</head>
+<body>
+　　<table width="100%" border="0" cellspacing="0" cellpadding="0">
+　　　　<tbody>
+　　　　　　<tr>
+　　　　　　　　<td height="101" align="center">
+　　　　　　　　　　<div id="localImag">
+
+　　　　　　　　　　　　<img id="preview" src="http://pic.cnblogs.com/face/1023040/20160923152523.png" width="150" height="180" style="display: block; width: 150px; height: 180px;">
+
+　　　　　　　　　　</div>
+　　　　　　　　</td>
+　　　　　　</tr>
+　　　　　　<tr>
+　　　　　　　　<td align="center" style="padding-top:10px;">
+
+　　　　　　　　　　<input type="file" name="file" id="doc" style="width:150px;" onchange="setImagePreview();">
+
+　　　　　　　　</td>
+　　　　　　</tr>
+　　　　</tbody>
+　　</table>
+</body>
+</html>

templates/uploading.html

@@ -0,0 +1,5 @@
+<form method="POST" enctype="multipart/form-data">
+{% csrf_token %}
+<input type="file" name="img">
+<button type="submit">上传</button>
+</form>