Django 在 Django 表单中修改 FileField 输入按钮和标签

Question

我正在尝试摆脱 Django 表单集中默认的常规文件上传视图，我的方法是现在隐藏输入文件，然后使用标签并使该标签可点击以上传文件，但是，现在单击我的标签后，无法上传任何内容，并且没有弹出选择文件窗口，我正在使用纯 CSS，目前我的 html 模板是：

HTML 表单

<form method="POST" data-url="{% url 'home:post-create' %}" class="post-create-form">
    {% csrf_token %}
        <div class="modal-header">
            <h5 class="modal-title" >Create a Post</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
    <div class="modal-body" style="overflow-y: auto;">
        {{ form|crispy }}
        <button type="button" id="show-image-upload-inputs" class="btn btn-sm mr-auto btn-primary pb-1">
            <span><i class="fas fa-camera"></i></span>
        </button>
        <div id="image-upload-div" class="mt-1 mx-1" style="display: none;">

                <div class="d-flex justify-content-center">
                    {% for a_form in formset %}
                    <div class="pl-1">
                        <label for="file"><i class="mt-2 fas fa-plus fa-5x"></i></label>
                        {{ a_form }}
                    </div>
                    {% endfor %}
                </div>


        </div>
    </div>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-primary">Post</button>
    </div>
</form>


<style>
input[type='file'] {
    display: none;
}
label[for='file'] {
    padding-left: 2px;
    cursor: pointer;
    background-color: rgb(212, 231, 238);
    border: 1em;
    border-radius: 10px;
    width: 6em;
    height: 6em;
    text-align: center;
    opacity: 0.5;
    color:lightblue;
}
</style>

Django 视图

@login_required
def post_create(request):
    data = dict()
    ImageFormset = modelformset_factory(Images,form=ImageForm,extra=4)
    if request.method == 'POST':
        form = PostForm(request.POST)
        formset = ImageFormset(request.POST or None, request.FILES or None)
        if form.is_valid():    
            post = form.save(False)
            post.author = request.user
            #post.likes = None
            post.save()
            for f in formset:
                try:
                    i = Images(posts=post, image=f.cleaned_data['image'])
                    i.save()
                except Exception as e:
                    break
            data['form_is_valid'] = True
            posts = Post.objects.all()
            posts = Post.objects.order_by('-last_edited')
            data['posts'] = render_to_string('home/posts/home_post.html',{'posts':posts},request=request)
        else:
            data['form_is_valid'] = False
    else:
        form = PostForm  
        formset = ImageFormset(queryset=Images.objects.none())     
    context = {
    'form':form,
    'formset':formset,
    }
    data['html_form'] = render_to_string('home/posts/post_create.html',context,request=request)
    return JsonResponse(data) 

我想知道如何在 Django 表单中更改 FIleField？我想使用我当前的方法并覆盖由 Django 表单创建的标签，但是我不知道这是否是正确的选择。

Answer 1

当文件字段设置为display: none 或visibility: hidden 时，浏览器通常会阻止触发，尽管有一些技巧可以使用position: fixed/absolute; left:-10000px 将文件字段移到视口之外并使用JS 触发文件字段。

如果你想完全不使用 JS，你可以使用以下仅使用 HTML/CSS 的技巧：

form {
    position: relative;
    width: 100px;
    height: 30px;
}
input {
    position: absolute;
    height: 100%;
    width: 100%;
    opacity: 0;
    z-index: 1;
}

label {
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 0;

    /* Your styling here */
    border-radius: 10px;
    line-height: 30px;
    text-align: center;
    color: white;
    background-color: #0095ff;
}

input:hover + label {
    background-color: #0065ad;
}

<form>
    <input type='file' />
    <label>Upload File</label>
</form>

基本上你用文件字段覆盖你的自定义标签，并使文件字段透明。