上传图片或选择图片 - Html Django

Question

我正在 Django 中处理一个项目，在订单页面上，我想为用户提供一个功能，他可以上传新图像或从现有图像中进行选择，并将其存储在数据库中。

我已经使用了一些 css 和 javascript 来实现这一点，它有点工作，但我仍然无法获得如何做到这一点的全部功能。

html

{% extends 'user/layout/userMaster.html' %}
{% block title %}Order{% endblock %}

{% block css %}
form
{
position:relative;
}
.tasksInput
{
margin-right:150px;
}
label
{
vertical-align: top;
}

.t {
display: none;
}

img:hover {
opacity:0.8;
cursor: pointer;
}

img:active {
opacity:0.5;
cursor: pointer;
}

input[type=radio]:checked + label > img {
border: 20px solid rgb(228, 207, 94);
}

{% endblock %}

{% block header %}
{% endblock %}
{% block main %}
<div class="container">
    <div>
        <div class="row rounded mx-auto d-block d-flex justify-content-center">
            <button class="btn btn-secondary my-2 mr-1">Custom</button>
            <button class="btn btn-secondary my-2 ml-1">Package</button>
        </div>
        <div class="row">
            <div class="col-4">
                <div class="card border border-secondary">
                    <div class="card body mx-2 mt-4 mb-2">
                        {% for product in products %}
                        <a id="{{ product.prod_ID }}" class="card-header" style="font-size:5vw;color:black;"
                           href="{% url 'user-order' product.prod_ID  %}">
                            <h5 class="h5">{{ product.prod_ID }}. {{ product.prod_Name }}</h5></a>
                        <div class="dropdown-divider"></div>
                        {% endfor %}
                    </div>
                </div>
            </div>
            <div class="col-8">
                <form method="POST" enctype="multipart/form-data">
                    {% csrf_token %}
                            <div class="form-group">
                                <div class="form-group row mx-2">
                                    <label for="ImageTemplateProductsList"
                                           class="form-control-label font-weight-bold card-header col-4 ml-4"
                                           style="background-color:#e3e4e6"><h5>Image Template : </h5></label>
                                    <div id="ImageTemplateProductsList" class="mx-2">
                                        <input id="Upload" type="radio" name="ImageSelection" value="Upload"/> Upload an
                                        Image
                                        <div class="type">
                                            <input type="file" name="image" class='btn btn-outline-secondary my-2'>
                                        </div>
                                        <br>
                                        <input type="radio" id="Select" name="ImageSelection" value="Select"/> Select
                                        From Templates
                                        <div class="type">
                                            
                                            <input class="t" type="radio" name="image" id="alpine-vista-brochure.png"
                                                   value="alpine-vista-brochure.png"/>
                                            <label for="alpine-vista-brochure.png">
                                                <img src="/media/alpine-vista-brochure.png" style="width: 20vw;
                                                                             height: 20vw;
                                                                             padding: 2vw;"/>
                                            </label>
                                            <br>
                                            
                                            <input class="t" type="radio" name="image" id="4bb4d31f-b215-4ed4-a62a-820d332a4f4e.jpeg"
                                                   value="4bb4d31f-b215-4ed4-a62a-820d332a4f4e.jpeg"/>
                                            <label for="4bb4d31f-b215-4ed4-a62a-820d332a4f4e.jpeg">
                                                <img src="/media/4bb4d31f-b215-4ed4-a62a-820d332a4f4e.jpeg" style="width: 20vw;
                                                                             height: 20vw;
                                                                             padding: 2vw;"/>
                                            </label>
                                            <br>
                                            
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                    <div class="row rounded mx-auto d-block d-flex justify-content-center">
                        <button type="submit" class="btn btn-success my-2">Place Order</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block js %}
$("document").ready(function(){
$(".type").hide();
$("input:radio").change(function() {
$(".type").hide();
$(this).next("div").show();
});
});
{% endblock %}

这是我正在尝试使用的代码。

Answer 1

我用 jquery 稍微修改了我的 html 模板并稍微改变了视图，现在它对我有用。

order.html

{% extends 'user/layout/userMaster.html' %}
{% block title %}Order{% endblock %}

{% block css %}
.t {
display: none;
}

img:hover {
opacity:0.8;
cursor: pointer;
}

img:active {
opacity:0.5;
cursor: pointer;
}

input[type=radio]:checked + label > img {
border: 20px solid rgb(228, 207, 94);
}

#dropdown{
height: 50px;
width: 50%;
font-size: 20px;
margin-left: 10px;
margin-top: 3px;
}

{% endblock %}

{% block header %}
{% endblock %}
{% block main %}
<div class="container">
    <div>
        <div class="row rounded mx-auto d-block d-flex justify-content-center">
            <button class="btn btn-secondary my-2 mr-1">Custom</button>
            <button class="btn btn-secondary my-2 ml-1">Package</button>
        </div>
        <div class="row">
            <div class="col-4">
                <div class="card border border-secondary">
                    <div class="card body mx-2 mt-4 mb-2">
                        {% for product in products %}
                        <a id="{{ product.prod_ID }}" class="card-header" style="font-size:5vw;color:black;"
                           href="{% url 'user-order' product.prod_ID  %}">
                            <h5 class="h5">{{ product.prod_ID }}. {{ product.prod_Name }}</h5></a>
                        <div class="dropdown-divider"></div>
                        {% endfor %}
                    </div>
                </div>
            </div>
            <div class="col-8">
                <form method="POST" enctype="multipart/form-data">
                    <input type="hidden" id="templateValue" name="templateValue" value=""/>
                    {% csrf_token %}
                             <div class="form-group">
                                <div class="form-group row mx-2">
                                    <label for="ImageTemplateProductsList"
                                           class="form-control-label font-weight-bold card-header col-4 ml-4"
                                           style="background-color:#e3e4e6"><h5>Image Template : </h5></label>
                                    <div id="ImageTemplateProductsList" class="mx-2">
                                        <input id="Upload" type="radio" name="ImageSelection"
                                               class="templateSelection"/> Upload an
                                        Image
                                        <div class="type">
                                            <input type="file" name="image"
                                                   class='btn btn-outline-secondary my-2 SelectedImage'>
                                        </div>
                                        <br>
                                        <input type="radio" id="Select" name="ImageSelection" class="templateSelection"
                                        /> Select
                                        From Templates
                                        <div class="type">
                                            {% for IT in ImageTemplateProductsList %}
                                            <input type="radio" name="image2" id="{{IT}}"
                                                   value="{{IT}}" class="SelectedImage t"/>
                                            <label for="{{IT}}">
                                                <img src="{{IT.url}}" style="width: 20vw;
                                                                             height: 20vw;
                                                                             padding: 2vw;"/>
                                            </label>
                                            <br>
                                            {% endfor %}
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                    <div class="row rounded mx-auto d-block d-flex justify-content-center">
                        <button type="submit" class="btn btn-success my-2">Place Order</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block js %}

$("document").ready(function(){
$(".type").hide();
$("input:radio").on('change', function() {
$(".type").hide();
$(this).next("div").show();
});
$("#templateValue").val('');
$(".templateSelection").on('change', function(){
$("#templateValue").val('');
$("#templateValue").val($(this).attr('id'));
console.log($("#templateValue").val());
});
});


{% endblock %}

我已经使用隐藏字段来检查用户是否正在尝试上传图像或选择该图像，并据此决定我应该做什么：