按钮点击查看问题

时间:2015-03-08 20:37:28

标签: django image twitter-bootstrap upload carousel

我正在尝试制作一个可以上传图片的旋转木马。但是,当我点击上传按钮时,它会切换到另一个页面,而不是仅仅将上传选择面板作为预期。谁能告诉我为什么会这样呢?

Views.py

from django.shortcuts import render
from django.shortcuts import render, redirect
from django.contrib.auth import authenticate, login
from webportal.views.authentication import LoginForm
from django.shortcuts import render_to_response
from django.template import RequestContext
from django.http import HttpResponseRedirect
from django.core.urlresolvers import reverse
from django.conf import settings
from webportal.forms.forms import DocumentForm
from webportal.models import Document
is_server = True
def list(request):
    # Handle file upload
    if request.method == 'POST':
        form = DocumentForm(request.POST, request.FILES)
        if form.is_valid():
            newdoc = Document(docfile = request.FILES['docfile'])
            newdoc.save()

            # Redirect to the document list after POST
            return HttpResponseRedirect(reverse('webportal.views.list'))
    else:
        form = DocumentForm() # A empty, unbound form

    # Load documents for the list page
    documents = Document.objects.all()
    #documents=DocumentForm().
    # Render list page with the documents and the form
    return render_to_response(
        'webportal/carousel.html',
        {'documents': documents, 'form': form,},
        context_instance=RequestContext(request)
    )

Carousel.html

{% load staticfiles %}
{% load filename %}
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div id="myCarousel" class="carousel slide" data-ride="carousel">
                <!-- Indicators -->
                <ol class="carousel-indicators">
                    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                    <li data-target="#myCarousel" data-slide-to="1"></li>
                    <li data-target="#myCarousel" data-slide-to="2"></li>
                </ol>
                <div class="carousel-inner" role="listbox">
                    {% for document in documents %}
 <div class="item {% if forloop.first %} active {% endif %}"> 
    <div class="row">
      <div class="col">
        <img src = "{{STATIC_URL}}img" >
      </div>
    </div>
  </div>
  {% endfor %}
                </div>
                <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
            <!-- /.carousel -->
        </div>
    </div>
<form action="{% url 'webportal:list' %}" method="post" enctype="multipart/form-data">
            {% csrf_token %}
            <p>{{ form.non_field_errors }}</p>
            <p>{{ form.docfile.label_tag }} {{ form.docfile.help_text }}</p>
            <p>
                {{ form.docfile.errors }}
                {{ form.docfile }}
            </p>
            <p><input type="submit" value="Upload" /></p>
        </form>
</div>

形式:

class DocumentForm(forms.Form):
    docfile = forms.ImageField(label='Select a file', help_text='max. 42 megabytes')

型号:

class Document(models.Model):
    docfile = models.ImageField(upload_to='webportal/static/img/')

1 个答案:

答案 0 :(得分:1)

我不确定你的意思是什么,只是将上传选择面板作为预期&#34;。

首先,如果提交的表单无效,我会看到一个返回空表单的问题,您应该返回现有表单并显示错误。

您的表单在点击上传按钮后会向您的服务器发送POST请求,您的视图会生成一个全新的HTML页面作为回复。 HTTP是无状态的,这意味着无论您的浏览器之前显示的内容基本上都不再相关。很自然,你会看到一个新的页面。