当wtforms中发生另一个验证错误时,文件字段无法保存文件

时间:2016-06-06 09:45:20

标签: python jinja2 wtforms flask-wtforms

我正在尝试验证表单中的电子邮件和电话号码。这样做但是当发生此验证错误时,文件字段无法保存上载的文件。我的表格如下。

forms.py

from wtforms import Form ,SelectField,StringField, validators  , IntegerField , DateField , SelectMultipleField , FileField ,widgets

from wtforms.validators import StopValidation, ValidationError

def customvalidatorForAdImage(form, field):
                allowed_file = ['jpg','jpeg','png','gif']
                if form.image.data:
                    if form.image.data.split('.',1)[1] not in allowed_file:
                        raise ValidationError("Please enter a valid image file")    
class CreateAdForm(Form):
            ad_name = StringField("Ad Name", [validators.DataRequired("Ad name is required")])
            advertiser_name =SelectField("Advertiser Name" , coerce=int)
            ad_type = SelectField("Ad Type" ,  choices =zip( ad_type_categories , ad_type_cat_lebels))
            image = FileField("Image" , [customvalidatorForAdImage, validators.DataRequired("Image is required")])
            url = StringField("URL" , [validators.DataRequired("URL is required")])
            contact_name = StringField("Contact Name" , [validators.DataRequired("Contact Name is required")])
            contact_email = StringField("Contact Email" , [validators.DataRequired("Contact Email is required"), validators.Email("Please enter a valid email")])
            contact_phone = StringField("Contact Phone" , [validators.DataRequired("Contact Phone is required"), validators.Regexp("^(\+\d{1,3}[- ]?)?\d{10}$", message="Please enter a valid phone number")])
            status = SelectField("Status" , choices = zip(status_categories , status_cat_lebles))      

我的ad.html文件如下:

ad.html

{% extends "base.html" %}
{% set title = "Admin Manage Advertisers" %}
{% block head_css %}

{% endblock %}
{% block main_body %}
<div class="container">
    <div class="row">
        <div class="col-sm-8 col-sm-offset-2">
            {% if err_msg %}
             <div class="alert alert-danger alert-msg-with-icon" role="alert"> 
             <i class="icon-exclamation-sign" style="font-size:60px;color:#B94A48;"></i> 
             <p>{{err_msg}}<br> If you believe this message is in error, please reach out to <a href='mailto:webmaster@tunneltalk.com' class="alert-link">webmaster@tunneltalk.com</a></p>
             </div>
            {% endif %}
            <h1 class="text-center"><strong>Create a New Ad</strong></h1>
            <form action="/create-ad" enctype="multipart/form-data" method="POST">
              <div class="form-group">
                {{ ad_form.ad_name.label }}
                {{ ad_form.ad_name(class_="form-control", **{"data-parsley-required":"true", 
                                                          "data-parsley-required-message":"Ad name is required"}) }}

                <span class="help-block"></span>
              </div>
             <div class="row">
                <div class="col-md-5">
               <div class="form-group" >
                {{ ad_form.advertiser_name.label }}
                {{ ad_form.advertiser_name(class_="form-control" , **{"data-parsley-required":"true", 
                                                          "data-parsley-required-message":"Advertiser name is required"}) }}


                <span class="help-block"></span>
              </div>
              </div>
               <div class="col-md-5 col-md-offset-2">
              <div class="form-group" >
                {{ ad_form.ad_type.label }}
                {{ ad_form.ad_type(class_="form-control", **{"data-parsley-required":"true", 
                                                          "data-parsley-required-message":"Ad type is required"
                                                          }) }}
                <span class="help-block"></span>
              </div>
              </div>
              </div>
              <div class="row">
                <div class="col-md-5">
              <div class="form-group {{ 'has-error' if ad_form.image.errors}}">
                {{ ad_form.image.label }}
                {{ ad_form.image( **{"data-parsley-required":"true", 
                                                          "data-parsley-required-message":"Image is required",

                                                          }) }}
                <span class="help-block">{{ ad_form.image.errors[0] if ad_form.image.errors }}</span>
              </div>
              </div>
             <div class="col-md-5 col-md-offset-2">
                <div class="form-group" >
                {{ ad_form.status.label }}
                {{ ad_form.status(class_="form-control", **{"data-parsley-required":"true", 
                                                          "data-parsley-required-message":"Status is required"
                                                          }) }}
                <span class="help-block"></span>
              </div>
              </div>
              </div>
              <div class="form-group" >
                {{ ad_form.url.label }}
                {{ ad_form.url(class_="form-control", **{"data-parsley-required":"true", 
                                                          "data-parsley-required-message":"URL is required"
                                                          }) }}
                <span class="help-block"></span>
              </div>
              <div class="form-group">
                {{ ad_form.contact_name.label }}
                {{ ad_form.contact_name(class_="form-control", **{"data-parsley-required":"true", 
                                                          "data-parsley-required-message":"Contact Name is required"
                                                          }) }}
                <span class="help-block"></span>
              </div>
              <div class="form-group {{ 'has-error' if ad_form.contact_email.errors}}" >
                {{ ad_form.contact_email.label }}
                {{ ad_form.contact_email(class_="form-control", **{"data-parsley-required":"true", 
                                                          "data-parsley-required-message":"Contact Email is required"
                                                          }) }}
                <span class="help-block">{{ ad_form.contact_email.errors[0] if ad_form.contact_email.errors }}</span>
              </div>
              <div class="form-group {{ 'has-error' if ad_form.contact_phone.errors}}" >
                {{ ad_form.contact_phone.label }}
                {{ ad_form.contact_phone(class_="form-control", **{"data-parsley-required":"true", 
                                                          "data-parsley-required-message":"Contact Phone is required"
                                                          }) }}
                <span class="help-block">{{ ad_form.contact_phone.errors[0] if ad_form.contact_phone.errors }}</span>
              </div>

              <button type="submit" class="btn btn-primary btn-block">SUBMIT</button>
            </form>
        </div>
    </div>
</div>
{% endblock %}
{% block contact_us_block %}
{% endblock %}
{% block js_block %}
{{super()}}

<script>
$(document).ready(function(){

    $("div.container form").parsley({
        successClass: "",
        errorClass: "has-error",
        classHandler: function(el) {
            return el.$element.closest(".form-group");
        },
        errorsWrapper: "<span class='help-block'></span>",
        errorTemplate: "<span></span>"
    });

})
</script>
{% endblock %} 

在表单提交之前看到屏幕截图。这里我选择了一个图像文件和无效的电子邮件。enter image description here

但是当我点击提交按钮时,它会显示电子邮件验证错误,但无法保留所选的图像文件。我该如何解决这个问题?提交后看屏幕截图。它显示&#34;没有选择文件&#34;在文件字段中,但我已经选择了该文件。感谢。enter image description here

1 个答案:

答案 0 :(得分:1)

这是HTML的一项功能,您无法轻松解决它。如果服务器可以向客户端发送一个html页面,并附上一些额外信息,说明“嘿,你试图上传REALLY_SECRET_FILE,请自动再次附上,请”你可以轻松将它用于恶意目的(特别是因为你可以用CSS隐藏文件字段)。

所以,你还有两个剩下的选项 - 你说表单没有验证,但你可以选择先验证文件字段,然后将其存储在服务器上,然后 if 其余表单验证失败,您可以从发送回客户端的预先填充的表单字段中删除表单字段,并将其替换为已上载文件的缩略图。

另一种选择是在流程的客户端更加努力 - 进行更多的客户端验证,以减少提交表单的机会,但验证失败,但当然,仍然在服务器上验证 - 一边抓住奇怪或顽皮的情况。