上传图片或选择图片 - Html Django
Posted
技术标签:
【中文标题】上传图片或选择图片 - Html Django【英文标题】：upload image or select Image - Html Django 【发布时间】：2021-05-21 10:52:20 【问题描述】：我正在 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】：我用 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 %
我已经使用隐藏字段来检查用户是否正在尝试上传图像或选择该图像，并据此决定我应该做什么：
【讨论】：
以上是关于上传图片或选择图片 - Html Django的主要内容，如果未能解决你的问题，请参考以下文章