带有 bootstrap4 的 Django-crispy-forms 未在浏览文件字段中显示选定的结果
Django-crispy-forms with bootstrap4 not showing selected result in browse file field
正在尝试将 bootstrap4 与 django 一起用于表单。安装的脆皮表格和一切似乎都按我预期的方式工作，除了浏览文件按钮选择功能。当出现文件选择 window 并且从资源管理器中选择文件时，它不会在字段中显示为已选择。但是，当提交表单时，一切都按预期工作并上传了文件。我是否缺少助手 class 设置？我找不到一个看起来可以解决这个问题的。
感谢任何帮助，详情如下。
rendered html
环境：
- Windows10
- bootstrap 4.3.1
- Python 3.7.4
- Django 2.2.5
- Django 脆皮表格 1.8.0
Models.py
from django.db import models
# Create your models here.
class Csvfile_model(models.Model):
name = models.CharField(max_length=50)
csv_file_name = models.FileField(upload_to='csv_file/')
forms.py
from django import forms
from crispy_forms.helper import FormHelper
from .models import *
class CsvForm(forms.ModelForm):
helper = FormHelper()
class Meta:
model = Csvfile_model
fields = ['name', 'csv_file_name']
views.py
from django.shortcuts import render,redirect
from django.http import HttpResponse
from .forms import *
# Create your views here.
def csv_upload(request):
if request.method == "POST":
form = CsvForm(request.POST, request.FILES)
if form.is_valid():
form.save()
return redirect('sucess')
else:
form = CsvForm()
return render(request, 'csv_upload.html', {'form' : form})
def sucess(request):
return HttpResponse('sucessfully uploaded')
csv_upload.html
<!-- templates/home.html -->
{% extends 'base.html' %}
{% load crispy_forms_tags %}
{% crispy form form.helper %}
{% block title %}Home{% endblock %}
{%block subject%} <h1>Pandas Profiler Home</h1> {% endblock %}
{% block content %}
<div class="container">
<div class="row">
<div class="col-12">
<h2> CSV Upload</h2>
<div class="row">
<form method = "post" enctype="multipart/form-data">
{% csrf_token %}
<div class="input-group">
{% crispy form %}
<span class="input-group-btn">
<button class="btn btn-default" type="submit"> Upload </button>
</span>
</div>
</form>
</div>
</div class="col-12">
</div class="row">
</div class="container">
{% endblock %}
base.html
<!-- templates/base.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>{% block title %}Django Auth Tutorial{% endblock %}</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
.fakeimg {
height: 200px;
background: #aaa;
}
</style>
</head>
<body>
<div class="jumbotron text-center" style="margin-bottom:0">
<subject>{% block subject %} <h1> Django Auth Tutorial </h1>{% endblock %}</subject>
<p>Quick and dirt responsive website to do eploratory data analysis (EDA) </p>
</div>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<a class="navbar-brand" href="#">Menu</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
</ul>
</div>
</nav>
<div class="container" style="margin-top:30px">
<div class="row">
<div class="col-sm-12">
{% block content %}
{% endblock %}
</div>
</div>
</div>
<div class="jumbotron text-center" style="margin-bottom:0">
<p>Pandas Profiler is an experiment using django, bootstrap to upload a file to a website, process that file and display the results back to the user withouth having to know python or pandas. It's also great for lazy data scientests</p>
</div>
</body>
</html>
settings.py
import os
# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/2.2/howto/deployment/checklist/
# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = 'y(9-(8p)v+s8!i#f0&4_@#zd#lw3qq9^fj@$e7vt(#&%7kih_o'
# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True
ALLOWED_HOSTS = []
# Application definition
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages', 'django.contrib.staticfiles', 'csvfile.apps.CsvfileConfig',
'crispy_forms',
]
...
# Internationalization
# https://docs.djangoproject.com/en/2.2/topics/i18n/
LANGUAGE_CODE = 'en-us'
TIME_ZONE = 'UTC'
USE_I18N = True
USE_L10N = True
USE_TZ = True
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/2.2/howto/static-files/
STATIC_URL = '/static/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'
CRISPY_TEMPLATE_PACK = 'bootstrap4'
这是bootstrap4 functionality而且不脆。要更正此问题，您需要添加一些 javascript 以与表单按钮和文件名字段进行交互。将其插入 html 文件的底部，它应该可以工作。
<script type="application/javascript">
$('input[type="file"]').change(function(e){
var fileName = e.target.files[0].name;
$('.custom-file-label').html(fileName);
});
</script>
正在尝试将 bootstrap4 与 django 一起用于表单。安装的脆皮表格和一切似乎都按我预期的方式工作，除了浏览文件按钮选择功能。当出现文件选择 window 并且从资源管理器中选择文件时，它不会在字段中显示为已选择。但是，当提交表单时，一切都按预期工作并上传了文件。我是否缺少助手 class 设置？我找不到一个看起来可以解决这个问题的。
感谢任何帮助，详情如下。
rendered html
环境：
- Windows10
- bootstrap 4.3.1
- Python 3.7.4
- Django 2.2.5
- Django 脆皮表格 1.8.0
Models.py
from django.db import models
# Create your models here.
class Csvfile_model(models.Model):
name = models.CharField(max_length=50)
csv_file_name = models.FileField(upload_to='csv_file/')
forms.py
from django import forms
from crispy_forms.helper import FormHelper
from .models import *
class CsvForm(forms.ModelForm):
helper = FormHelper()
class Meta:
model = Csvfile_model
fields = ['name', 'csv_file_name']
views.py
from django.shortcuts import render,redirect
from django.http import HttpResponse
from .forms import *
# Create your views here.
def csv_upload(request):
if request.method == "POST":
form = CsvForm(request.POST, request.FILES)
if form.is_valid():
form.save()
return redirect('sucess')
else:
form = CsvForm()
return render(request, 'csv_upload.html', {'form' : form})
def sucess(request):
return HttpResponse('sucessfully uploaded')
csv_upload.html
<!-- templates/home.html -->
{% extends 'base.html' %}
{% load crispy_forms_tags %}
{% crispy form form.helper %}
{% block title %}Home{% endblock %}
{%block subject%} <h1>Pandas Profiler Home</h1> {% endblock %}
{% block content %}
<div class="container">
<div class="row">
<div class="col-12">
<h2> CSV Upload</h2>
<div class="row">
<form method = "post" enctype="multipart/form-data">
{% csrf_token %}
<div class="input-group">
{% crispy form %}
<span class="input-group-btn">
<button class="btn btn-default" type="submit"> Upload </button>
</span>
</div>
</form>
</div>
</div class="col-12">
</div class="row">
</div class="container">
{% endblock %}
base.html
<!-- templates/base.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>{% block title %}Django Auth Tutorial{% endblock %}</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
.fakeimg {
height: 200px;
background: #aaa;
}
</style>
</head>
<body>
<div class="jumbotron text-center" style="margin-bottom:0">
<subject>{% block subject %} <h1> Django Auth Tutorial </h1>{% endblock %}</subject>
<p>Quick and dirt responsive website to do eploratory data analysis (EDA) </p>
</div>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<a class="navbar-brand" href="#">Menu</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
</ul>
</div>
</nav>
<div class="container" style="margin-top:30px">
<div class="row">
<div class="col-sm-12">
{% block content %}
{% endblock %}
</div>
</div>
</div>
<div class="jumbotron text-center" style="margin-bottom:0">
<p>Pandas Profiler is an experiment using django, bootstrap to upload a file to a website, process that file and display the results back to the user withouth having to know python or pandas. It's also great for lazy data scientests</p>
</div>
</body>
</html>
settings.py
import os
# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/2.2/howto/deployment/checklist/
# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = 'y(9-(8p)v+s8!i#f0&4_@#zd#lw3qq9^fj@$e7vt(#&%7kih_o'
# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True
ALLOWED_HOSTS = []
# Application definition
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages', 'django.contrib.staticfiles', 'csvfile.apps.CsvfileConfig',
'crispy_forms',
]
...
# Internationalization
# https://docs.djangoproject.com/en/2.2/topics/i18n/
LANGUAGE_CODE = 'en-us'
TIME_ZONE = 'UTC'
USE_I18N = True
USE_L10N = True
USE_TZ = True
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/2.2/howto/static-files/
STATIC_URL = '/static/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'
CRISPY_TEMPLATE_PACK = 'bootstrap4'
这是bootstrap4 functionality而且不脆。要更正此问题，您需要添加一些 javascript 以与表单按钮和文件名字段进行交互。将其插入 html 文件的底部，它应该可以工作。
<script type="application/javascript">
$('input[type="file"]').change(function(e){
var fileName = e.target.files[0].name;
$('.custom-file-label').html(fileName);
});
</script>