Блог

Главная - Вопросы по программированию - загрузить изображение или выбрать изображение — Html Django

загрузить изображение или выбрать изображение — Html Django

#javascript #html #css #forms #django-templates

#javascript #HTML #css #формы #django-шаблоны

Вопрос:

Я работаю над проектом в 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 %}

Это код, с которым я пытаюсь работать.

Ответ №1:

Я немного изменил свой html-шаблон с помощью jquery и немного изменил представления, и теперь он работает у меня.

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 %}

Я использовал скрытое поле, чтобы проверить, пытается ли пользователь загрузить изображение или выбрать это изображение, и в соответствии с этим я принимаю решение, что мне делать: