0

我一直在处理我的网络应用程序的图像上传部分并使用 Django 开发它。我的图像上传功能工作得非常好。没问题。

但是在我的图片上传页面中,我在登录和注销后一次收到不必要的警报消息,例如“您已被登录”,“您已被注销” ,并且在输入我的后会出现此警报消息图片上传页面,这很奇怪!

是的,我在我的图像上传模板中设置了 django 消息标签,以在用户进行任何图像上传操作时显示警报消息。但我不想收到任何警报消息,例如“您已登录”或“您已签名”出“或在我的图像上传页面进入我的图像上传页面上传图像后与我的图像上传页面无关的东西。但不幸的是它发生了,经过大量的谷歌搜索和研究,我无法弄清楚。

提到我正在使用 django 表单和 django 消息框架。

这是我对图片上传的看法

def UserImageUpload(request):   
    if request.method == 'POST':
        form = DocumentForm(request.POST,request.FILES)
        if form.is_valid():         
            newdoc = Photo(photo = request.FILES['photo'],watermarked_image=request.FILES['photo'],user = request.user,name = request.POST['name'],description = request.POST['description'],keyword = request.POST['Image_Keyword'],uploaded_time=datetime.datetime.now(),Certified=request.POST['Certification'])
            newdoc.save()
            messages.success(request,'Your Image upload is waiting for Admin approval')
            form = DocumentForm         
        else:
            messages.error(request,'Please Complete All Fields or Only upload jpg file,because we are currently accepting only the jpg file!')          
    else:
        form = DocumentForm()
    uploaded_image = Photo.objects.all()    
    return render_to_response('myprofile/user_image_upload.html',{'uploaded_image':uploaded_image,'form':form},context_instance = RequestContext(request))

这是图片上传表单模板

{% extends 'base.html'%}

{% block title%}User Image Upload {% endblock %}

{%block content%}

<div id="messages"  style="margin-top:50px">
     {% if messages %}
      <!--<div class="row"> -->
       {% for message in messages %}
        <div class="alert alert-{{ message.tags }}">
            <!--<p{%if message.tags=="success"%} class="alert alert-success" {%endif%}>{{message}}</p> -->
            <button type="button" class="close" data-dismiss="alert"></button>
            {{ message }}
        </div>
       {% endfor %}
      <!--</div> -->
     {% endif %}
</div>   

<div class="container" style="margin-top:5%" ng-app="ImageUpload">
    <div class="col-md-4 col-md-offset-4" ng-controller="ImagePreviewCtrl">
        <div class="well" ng-show="show">
  <form action="" method="post" enctype="multipart/form-data">
        {% csrf_token %}            
        <p>{{ form.non_field_errors }}</p>
        <p>{{ form.photo.label_tag }} {{ form.photo.help_text }}</p>
        <ul class = 'unstyled'>             
            <li class = 'tust'>{{form.name.label}}{{ form.photo.errors }}</li>{{form.name}}<br/>
            <li class = 'tust'>{{form.description.label}}{{ form.photo.errors }}</li>{{form.description}}<br/>
            <li class = 'tust'>{{form.Image_Keyword.label}}{{ form.photo.errors }}</li>{{form.Image_Keyword}}<br/>
            <li class = 'tust'>{{form.Certification.label}}{{ form.photo.errors }}</li>{{form.Certification}}<br/>
            {{ form.photo }}                
        </ul>           
        <input type="submit" value="Upload" class="btn btn-success" />                   
     </form>
    </div>
  </div>
 </div>
{%endblock%} 

更新:

我的 base.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="assets/ico/favicon.png">

<title>{%block title%}Medical Art{%endblock%}</title>
<!-- TEST OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO -->

{%block css%}
<!-- Bootstrap core CSS -->
<link type = 'text/css' href="{{STATIC_URL}}photo/css/bootstrap.css" rel="stylesheet">

<!-- Custom styles for this template -->
<!--<link type = 'text/css' href="{{STATIC_URL}}photo/css/main.css" rel="stylesheet">-->

<link type = 'text/css' href="{{STATIC_URL}}photo/css/font-awesome.min.css" rel="stylesheet">
<link type = 'text/css' href="{{STATIC_URL}}photo/css/main-profile.css" rel="stylesheet">
<link type = 'text/css' href="{{STATIC_URL}}photo/css/car.css" rel="stylesheet">


<link  href='http://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic' rel='stylesheet' type='text/css'>
<link  href='http://fonts.googleapis.com/css?family=Raleway:400,300,700' rel='stylesheet' type='text/css'>
{%endblock%}



<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->


<script src="{{STATIC_URL}}photo/js/angular.min.js"></script>  
</head>

<body>
<div>

{%block navi%}
  <!-- Fixed navbar -->
    <nav class="navbar navbar-default  navbar-fixed-top" role="navigation">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="{% url 'home'%}"><strong>Medical Art</strong></a>
      </div>

      <!-- Collect the nav links, forms, and other content for toggling -->
        {% if user.is_authenticated %}
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
          <li><a href="{% url 'showphoto'%}">Photo</a></li>
          <li><a href="{% url 'upload'%}">Upload</a></li>


        </ul>

        <div class="col-sm-3 col-md-3">
            <!--<form  class="navbar-form navbar-left" action='/search/search_result/' method='post' role="search">-->
            <form  class="navbar-form" action='/search/search_result/' method='post' role="search">

                <div class="input-group">
                    {% csrf_token %}
                        <input type="text" class="form-control" placeholder="Search" name="search" id='search_item'>

                    <div class="input-group-btn">
                        <button type="submit" class="btn btn-default" ><span class="glyphicon glyphicon-search"></span></button>
                    </div>
                </div>

            </form>
       </div> 

        <ul class="nav navbar-nav navbar-right">
          <li><a href="{% url 'userena_profile_detail' user.username%}"><span style = "color:red; padding-left:5px;"> {{user.username}}!</span></a></li>
           <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Picture Management<b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li>
                <a href="{% url 'userena_profile_detail' user.username%}">Buyer</a>
                    <li class="divider"></li>
                    <li><a href="{% url 'purchased_picture' %}">&gt; My Purchased Picture</a></li>
                    <li class="divider"></li>
              </li>
              <li><a href="{% url 'userena_profile_edit' user.username%}">Contributor</a>
                    <li class="divider"></li>
                    <li><a href="{% url 'pending_images'%}">&gt; My Pending Pictures</a></li>
                    <li class="divider"></li>
                    <li><a href="{% url 'approved_images'%}">&gt; My Approved Pictures</a></li>
                    <li class="divider"></li>
                    <li><a href="#">&gt; My earnings</a></li>

              </li>



              <li class="divider"></li>
              <li><a href="{% url 'userena_signout'%}">Log-Out</a></li>
            </ul>
          </li>

          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Account Mangement<b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="{% url 'userena_profile_detail' user.username%}">My Profile</a></li>
              <li><a href="{% url 'userena_profile_edit' user.username%}">Edit profile</a></li>
              <li><a href="{% url 'userena_password_change' user.username%}">Change password</a></li>
              <li><a href="{% url 'userena_email_change' user.username%}">Change email</a></li>


              <li class="divider"></li>
              <li><a href="{% url 'userena_signout'%}">Log-Out</a></li>
            </ul>
          </li>
        </ul>
      </div>
       {%else%}
       <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">


        </ul>
        <div class="col-sm-3 col-md-3">

        </div>
        <ul class="nav navbar-nav navbar-right">
          <li><a href="{% url 'userena_signin'%}">Sign In</a></li>
          <li><a href="{% url 'userena_signup'%}">Sign Up</span></a></li>

        </ul>
      </div>
       {% endif %}<!-- /.navbar-collapse -->
    </nav>


{%endblock%}

</div>
<div>{% block content%}

        <div class="endless_page_template">

          {% include 'photo/endless.html' %}

        </div>
    {% endblock%}
</div>
<br>

 {%block footer%}
 <div class="footer navbar-fixed-bottom" style="background-color:black; text-align:center">
    <h4 style = "color:#ffffff">Powered by- <a href="#">Medical Art</a> - Copyright 2014</h4>

</div>

    {%block js%}
 <script src="{{STATIC_URL}}photo/js/modernizr.custom.js"></script>
 <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
 <script src="{{STATIC_URL}}photo/js/bootstrap.min.js"></script>
 <script src="{{STATIC_URL}}photo/js/main.js"></script>
 <script src="{{STATIC_URL}}photo/js/masonry.pkgd.min.js"></script>
 <script src="{{STATIC_URL}}photo/js/imagesloaded.js"></script>
 <script src="{{STATIC_URL}}photo/js/imageupload.js"></script>
 <script src="{{STATIC_URL}}photo/js/classie.js"></script>
 <script src="{{STATIC_URL}}photo/js/AnimOnScroll.js"></script>
 <script src="{{STATIC_URL}}photo/js/jquery.cookie.js"></script>

 <script src="{{STATIC_URL}}photo/js/endless.js" type="text/javascript" charset="utf-8"> </script> 
 <script>$.endlessPaginate({paginateOnScroll: true,paginateOnScrollMargin: 20});</script>


 <script>
    new AnimOnScroll( document.getElementById( 'grid' ), {
        minDuration : 0.4,
        maxDuration : 0.7,
        viewportFactor : 0.2
    } );
 </script>
 <script>
$(document).ready(function() {    
    //Events that reset and restart the timer animation when the slides change
    $("#transition-timer-carousel").on("slide.bs.carousel", function(event) {
        //The animate class gets removed so that it jumps straight back to 0%
        $(".transition-timer-carousel-progress-bar", this)
            .removeClass("animate").css("width", "0%");
    }).on("slid.bs.carousel", function(event) {
        //The slide transition finished, so re-add the animate class so that
        //the timer bar takes time to fill up
        $(".transition-timer-carousel-progress-bar", this)
            .addClass("animate").css("width", "100%");
    });

    //Kick off the initial slide animation when the document is ready
    $(".transition-timer-carousel-progress-bar", "#transition-timer-carousel")
        .css("width", "100%");
});
</script>

{%endblock%}


{%endblock%}

</body>
</html>
4

1 回答 1

0

我的猜测是,在您进入上传页面之前,您的消息会堆积如山。然后它们一次全部显示出来。

messages代码移动到您base.html应该可以解决这个问题。

编辑

如果您将在content块之前放置消息,它将解决问题。

{% if messages %}
    <div id="messages"  style="margin-top:50px">
        {% for message in messages %}
            <div class="alert alert-{{ message.tags }}">
                <button type="button" class="close" data-dismiss="alert"></button>
                {{ message }}
            </div>
        {% endfor %}
    </div>  
{% endif %}

<div id="content">
    {% block content%}
        <div class="endless_page_template">
            {% include 'photo/endless.html' %}
        </div>
    {% endblock%}
</div>
于 2014-12-14T07:14:16.477 回答