- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在使用 django-crispy-forms ( http://django-crispy-forms.readthedocs.org/ ) 并且我正在尝试使用 Jasny Bootstrap 文件上传 ( http://jasny.github.io/bootstrap/javascript.html#fileupload ) 使我的网页看起来更好。
据我所知,开箱即用的 Crispy 表单不支持 Jasny 文件上传。由于我不是很有经验,我尝试使用 Crispy 表单中可用的任何内容,而不是创建自己的布局对象。但是,我现在已经尝试了几天,它不起作用。
我知道这不是正确的方法,但到目前为止我的尝试是尝试在 forms.py 中使用 Crispy-form 的 Div 来使 django 生成类似于 Jasny 文件上传示例代码的内容。
Jasny 文件上传的代码:
<div class="fileupload fileupload-new" data-provides="fileupload">
<div class="fileupload-new thumbnail" style="width: 200px; height: 150px;"><img src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&text=no+image" /></div>
<div class="fileupload-preview fileupload-exists thumbnail" style="max-width: 200px; max-height: 150px; line-height: 20px;"></div>
<div>
<span class="btn btn-file"><span class="fileupload-new">Select image</span><span class="fileupload-exists">Change</span><input type="file" /></span>
<a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a>
</div>
</div>
Div(
HTML("""<div class="fileupload fileupload-new" data-provides="fileupload">
<div class="fileupload-new thumbnail" style="width: 200px; height: 150px;"><img src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&text=no+image" /></div>
<div class="fileupload-preview fileupload-exists thumbnail" style="max-width: 200px; max-height: 150px; line-height: 20px;"></div>
<div class"smalltest">
<span class="btn btn-file"><span class="fileupload-new">Select image</span><span class="fileupload-exists">Change</span>
"""),
Field('photo1'),
HTML("""</span><a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a></div></div>"""),
css_class = 'photofield'
),
最佳答案
我想我会根据其他一些 SO 答案分享我的解决方案。
首先,您不应该尝试使用 Crispy Forms 的 Layout,因为 Jasny 的 HTML 与默认的 Crispy Form 模板差别太大。首先,我们创建一个适用于 Jasny 的 Crispy Form 模板。这基本上只是使用 Jasny HTML 更新的 field.html 模板。
file_field.html :
{# Custom Crispy Forms template for rendering an image field. #}
{% load crispy_forms_field %}
{% if field.is_hidden %}
{{ field }}
{% else %}
{% if field|is_checkbox %}
<div class="form-group">
{% if label_class %}
<div class="controls col-{{ bootstrap_device_type }}-offset-{{ label_size }} {{ field_class }}">
{% endif %}
{% endif %}
<{% if tag %}{{ tag }}{% else %}div{% endif %} id="div_{{ field.auto_id }}" {% if not field|is_checkbox %}class="form-group{% else %}class="checkbox{% endif %}{% if wrapper_class %} {{ wrapper_class }}{% endif %}{% if form_show_errors%}{% if field.errors %} has-error{% endif %}{% endif %}{% if field.css_classes %} {{ field.css_classes }}{% endif %}">
{% if field.label and not field|is_checkbox and form_show_labels %}
<label for="{{ field.id_for_label }}" class="control-label {{ label_class }}{% if field.field.required %} requiredField{% endif %}">
{{ field.label|safe }}{% if field.field.required %}<span class="asteriskField">*</span>{% endif %}
</label>
{% endif %}
{% if field|is_checkboxselectmultiple %}
{% include 'bootstrap3/layout/checkboxselectmultiple.html' %}
{% endif %}
{% if field|is_radioselect %}
{% include 'bootstrap3/layout/radioselect.html' %}
{% endif %}
{% if not field|is_checkboxselectmultiple and not field|is_radioselect %}
{% if field|is_checkbox and form_show_labels %}
<label for="{{ field.id_for_label }}" class="{% if field.field.required %} requiredField{% endif %}">
{% crispy_field field %}
{{ field.label|safe }}
{% include 'bootstrap3/layout/help_text_and_errors.html' %}
</label>
{% else %}
<div class="controls {{ field_class }}">
<div class="fileinput fileinput-{% if field.value and field.value.url %}exists{% else %}new{% endif %}" data-provides="fileinput">
<div class="fileinput-new thumbnail" style="width: 200px; height: 150px;">
<img data-src="holder.js/100%x100%" alt="100%x100%" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOTAiIGhlaWdodD0iMTQwIj48cmVjdCB3aWR0aD0iMTkwIiBoZWlnaHQ9IjE0MCIgZmlsbD0iI2VlZSIvPjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9Ijk1IiB5PSI3MCIgc3R5bGU9ImZpbGw6I2FhYTtmb250LXdlaWdodDpib2xkO2ZvbnQtc2l6ZToxMnB4O2ZvbnQtZmFtaWx5OkFyaWFsLEhlbHZldGljYSxzYW5zLXNlcmlmO2RvbWluYW50LWJhc2VsaW5lOmNlbnRyYWwiPjE5MHgxNDA8L3RleHQ+PC9zdmc+" style="height: 100%; width: 100%; display: block;">
</div>
<div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px; line-height: 10px;">
{% if field.value and field.value.url %}
<img src="{{ field.value.url }}">
{% endif %}
</div>
{# imgfileinput, imgselect, imremove used for removing image #}
<div id="imgfileinput">
<span id="imgselect" class="btn btn-default btn-file">
<span class="fileinput-new">Select image</span>
<span class="fileinput-exists">Change</span>
<input id="imgfile" type="file" name="{{ field.name }}">
</span> 
<a id="imgremove" href="#" class="btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
</div>
</div>
{# removed {% crispy_field field %} #}
{% include 'bootstrap3/layout/help_text_and_errors.html' %}
</div>
{% endif %}
{% endif %}
</{% if tag %}{{ tag }}{% else %}div{% endif %}>
{% if field|is_checkbox %}
{% if label_class %}
</div>
{% endif %}
</div>
{% endif %}
{% endif %}
from crispy_forms.layout import Layout, Fieldset, Div, Submit, Reset, HTML, Field, Hidden
class UserForm(forms.ModelForm):
def __init__(self, *args, **kwargs):
super(UserForm, self).__init__(*args, **kwargs)
self.helper = FormHelper()
self.helper.layout = Layout(
Field('avatar', template='file_field.html'),
'username',
'first_name',
'last_name',
)
<script>
// Allow image to be deleted
$('#imgremove').on('click', function() {
field_name = $('#imgfile')[0].getAttribute('name');
$('#imgfileinput').append('<input id="imgclear" type="hidden" name="'+field_name+'-clear" value="on">');
})
$('#imgselect').on('click', function() {
$('#imgclear').remove();
})
</script>
关于用于 jasny 文件上传的 django-crispy-forms,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16224885/
如何将 jasny-bootstrap 导入到我的 ES6 类中? ES6: 'use strict'; import $ from 'jquery'; import jasny from 'jasn
我尝试使用 Jasny fileupload 将多个文件传递给表单内的 php,提交事件应该通过 ajax 发布的数据上传。但我无法让它工作。我无法将 jasny 上传附加到发布的数据。 如果有更好的
我正在使用Jasny Bootstrap我的asp.net项目中的文件上传控件。 看起来确实不错,但我无法将附件发送到服务器(.ASHX Web 服务) 我的布局代码如下所示 Select fi
我使用带有输入掩码的 jasny bootstrap 来验证输入。 http://jasny.github.io/bootstrap/ 具有以下代码。 如何清除输入字段的值?我尝试了以下方法: $(
我将 bootstrap 与 Jasny bootstrap ( http://www.jasny.net/bootstrap/ ) 一起使用。我正在尝试创建一个导航栏,关闭 Canvas 菜单,就像
我整合了Jasny Fileinput将小部件放入我现有的表单中。当我选择新文件时,它会显示两个按钮:更改和删除。我认为在这种情况下不需要更改按钮,所以我想完全删除此按钮。通过向元素添加 style=
这简直要了我的命。 Jasny 出色的文件上传插件在 Chrome 中运行良好,但在 Firefox 和 IE 中单击“选择文件”按钮根本不起作用。实际上,在 Firefox 中我收到一条 jquer
我正在使用 Jasny Bootstrap对于我的响应式网站。但是,子导航的链接在移动设备上不起作用。当我在我的桌面上测试它时,我可以点击链接。但是当我在手机上测试它时,它只会关闭导航栏。以下是我的代
当我使用 this example from jasny-bootstrap 时并在使用 navbar-toggle 和 navbar-collapse 以及两个使用 navbar- 的 navbar
我一直在寻找我的管理模板的侧边栏,我想使用 jasnybootstrap。我的目标是调整内容的大小并且不要翻译出屏幕。 类似的效果是这个http://startbootstrap.com/templa
我使用用于 bootstrap 3 的 jasny 上传图像预览插件但是当预览图像为空时这不起作用。我只需要显示 no+image 和 select image 按钮而不是 empty div 和 c
我将 Bootstrap 与 Jasny fork 一起使用.我正在处理用户可以上传图片的表单。我想隐藏表单的提交按钮,直到用户实际选择了图像。理想情况下,当用户从表单中删除文件时,提交按钮也应该消失
我正在使用带有 anchor 链接的 jasny bootstrap Canvas 外菜单,以便在单击时导航到 1 月部分。当我点击 anchor 链接时,我添加了一个 jquery 解决方案来关闭
我正在使用 Jasny Bootstrap 库 http://jasny.github.io/bootstrap/ 我正在使用文件输入字段。
我在我的一个网页中为 Offcanvas 推送菜单实现了 jasny bootstrap。每当我单击按钮时它都会打开。但是当我再次单击按钮或 Jasny Off-canvas 外部(主体)的任何地方时
提前感谢阅读。 使用 CDN,我将以下 API/库合并到我的元素中: 我还导入了 jquery 和 less 但没有使用 CDN 来这样做。 我在添加 Jasny Bootstrap(上图
当我试图找到类似 .row-link 的东西时,我才发现 Bootstrap 有一个扩展。所以当我在我的 table 上实现它时,我似乎无法在我点击每一行时调用模式。 boostrap 中的模态将不会
我正在阅读 this文章和作者指出以下内容: In app/app.js adjust the ApplicationView so that it doesn’t insert the wrappi
我正在尝试使用 jasny fileinput 控件实现图像缩略图预览。由于我的照片可能需要旋转,因此我添加了额外的旋转按钮。我遇到的问题是,当图像不是正方形并且旋转时,它会从缩略图空间中部分 cho
以下 HTML 使用 Jasny Bootstrap mod fileinput.js
我是一名优秀的程序员,十分优秀!