如何将图像保存到数据库？
我希望用户从预定义的图标集中选择一个图像，然后在提交表单后将图像保存在数据库中。 （我还想知道将其保存到数据库中时将使用的最佳数据类型是什么。
我想这样做，因为我不想用户上传图像。
此外，我还是php和jQuery的新手，所以我在这方面也需要帮助...
代码：
/*add new task button*/
.add-btn-dark
{
color:black;
/*float:right;*/
display:inline-block;
vertical-align:middle;
border:1px solid black;
margin-right:0;
}
.add-btn-dark i, .add-btn-dark span
{
display:inline-block;
vertical-align:middle;
}
.add-btn-dark:hover
{
cursor:pointer !important;
color:white;
background-color:black;
}
.add-btn-dark:focus
{
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
/*Icon Set*/
.iconSet
{
margin-left:2%;
display: inline-block;
vertical-align: middle;
border:1px solid black;
padding:5px;
width:60%;
}
.iconSet img
{
padding:5px;
margin-left:5px;
margin-right:5px;
display:inline-block;
vertical-align: middle;
}
.iconSet img:hover
{
cursor:pointer !important;
/*padding:5px;*/
border:0.5px solid black;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}<html>
<head>
<title>Sample Task Page</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <!-- Change these to the lastest -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style type="text/css">
/*add new task button*/
.add-btn-dark
{
color:black;
/*float:right;*/
display:inline-block;
vertical-align:middle;
border:1px solid black;
margin-right:0;
}
.add-btn-dark i, .add-btn-dark span
{
display:inline-block;
vertical-align:middle;
}
.add-btn-dark:hover
{
cursor:pointer !important;
color:white;
background-color:black;
}
.add-btn-dark:focus
{
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
/*Icon Set*/
.iconSet
{
margin-left:2%;
display: inline-block;
vertical-align: middle;
border:1px solid black;
padding:5px;
width:60%;
}
.iconSet img
{
padding:5px;
margin-left:5px;
margin-right:5px;
display:inline-block;
vertical-align: middle;
}
.iconSet img:hover
{
cursor:pointer !important;
/*padding:5px;*/
border:0.5px solid black;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
</style>
</head>
<body>
<button href="#" title="Add New Task" id="add" class="add-btn-dark btn" style="margin-left:45%;margin-top:10%;display: inline-block;vertical-align: middle;" data-toggle="modal" data-target="#addNewTaskModal"><i class="material-icons icon_dark" style="display: inline-block;vertical-align: middle;">assignment</i> Add New Task</button>
</body>
<!-- ADD NEW TASK Modal -->
<div id="addNewTaskModal" class="modal fade" style="margin-top:0%;">
<div class="modal-dialog modalcreateUser modal-xl">
<div class="modal-content">
<div class="modal-header">
<div class="avatar">
<img src="https://image.flaticon.com/icons/png/512/839/839986.png" style="width:25px;height:25px;display: inline-block;vertical-align: middle;" alt="Avatar">
</div>
<h4 class="modal-title" style="display: inline-block;vertical-align: middle;">Add New Task</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<h6 style="font-size:14px;color:red;margin-top:1%;text-align: center;margin-bottom:0;padding-bottom:0;">* required fields</h6>
<div id="">
<form method="post" class="needs-validation" novalidate>
<br>
<div class="form-group">
<div class="input-group" >
<label><small style="font-size:15px;color:red;">*</small> Task Name: <small>/ No more than 50 characters /</small></label>
<div class="input-group">
<input type="text" id="taskNameField" class="form-control" maxlength="50" name="" placeholder="e.g. Mop, Trash, Broom, etc." required>
</div>
</div>
<div class="invalid-feedback">
Empty field!
</div>
<small style="font-weight:normal;color:black;font-style: italic;float:right;"><span class="name-char-count" style="font-weight:bold;">50</span> characters remaining</small>
</div>
<div class="form-group">
<!-- <div class="" > -->
<label style="display: inline-block;vertical-align: middle;margin-right:2%;"><small style="font-size:15px;color:red;">*</small> Task Location:</label>
<!-- </div> -->
<!-- <div class="input-group">
<select class="custom-select" name="" id="" required>
<option value="">-Select One-</option>
<option value="MainTask">Main</option>
<option value="RooftopTask">Rooftop</option>
</select>
</div> -->
<div class="custom-control custom-radio custom-control-inline" style="display: inline-block;vertical-align: middle;margin-right:2%;">
<input class="custom-control-input" type="radio" name="taskLocation" id="inlineCheckbox1" value="option1" checked>
<label class="custom-control-label" for="inlineCheckbox1">Main</label>
</div>
<div class="custom-control custom-radio custom-control-inline" style="display: inline-block;vertical-align: middle;">
<input class="custom-control-input" type="radio" name="taskLocation" id="inlineCheckbox2" value="option2">
<label class="custom-control-label" for="inlineCheckbox2">Rooftop</label>
</div>
<div class="invalid-feedback">
Empty field!
</div>
</div>
<div class="form-group">
<label><small style="font-size:15px;color:red;">*</small> Task Description: <small>/ No more than 800 characters /</small></label>
<textarea class="form-control taskDescArea" name="" maxlength="800" placeholder="Enter detailed description here..." required></textarea>
<div class="invalid-feedback">
Empty field!
</div>
<small style="font-weight:normal;color:black;font-style: italic;float:right;"><span class="char-count" style="font-weight:bold;">800</span> characters remaining</small>
<!-- <div id="wct_embed_result"></div>
<div id="wct_powered_by"></div> -->
</div>
<div class="form-group">
<label style="display: inline-block;vertical-align: middle;"><small style="font-size:15px;color:red;">*</small> Task Icon:</label>
<!-- <input type="text" class="form-control" name="" placeholder="" required>
<div class="invalid-feedback">
Empty field!
</div> -->
<!-- <div class="iconSet" style="">
<img class="img-responsive" src="..\images\chore-icons\mop-logo.png" style="color:#cc0000;height:50px;width:50px;">
<img class="img-responsive" src="..\images\chore-icons\toilet-logo.png" style="color:#cc0000;height:50px;width:50px;">
<img class="img-responsive" src="..\images\chore-icons\pc-logo.png" style="color:#cc0000;height:50px;width:50px;">
<img class="img-responsive" src="..\images\chore-icons\broom-logo.png" style="color:#cc0000;height:50px;width:50px;">
<img class="img-responsive" src="..\images\chore-icons\trash-logo.png" style="color:#cc0000;height:50px;width:50px;">
<img class="img-responsive" src="..\images\chore-icons\water-dispenser-logo.png" style="color:#cc0000;height:50px;width:50px;">
<img class="img-responsive" src="..\images\chore-icons\air-conditioner-logo.png" style="color:#cc0000;height:50px;width:50px;">
<img class="img-responsive" src="..\images\chore-icons\rag2-logo.png" style="color:#cc0000;height:50px;width:50px;">
<img class="img-responsive" src="..\images\chore-icons\sink-logo.png" style="color:#cc0000;height:50px;width:50px;">
</div> -->
<div class="iconSet" style="">
<!-- <select class="custom-select" name="emp-type" id="emp-type" required>
<option value="">-SelectOne-</option>
<option value="1"><img class="img-responsive" src="..\images\chore-icons\mop-logo.png" style="color:#cc0000;height:50px;width:50px;"></option>
<option value="2"><img class="img-responsive" src="..\images\chore-icons\toilet-logo.png" style="color:#cc0000;height:50px;width:50px;"></option>
<option value="3"><img class="img-responsive" src="..\images\chore-icons\pc-logo.png" style="color:#cc0000;height:50px;width:50px;"></option>
</select> -->
<!-- <input type="radio" id="broom" name="icon" value="broom"> <label for="broom"><img src="broom.png"></label> -->
<img class="img-responsive" src="https://image.flaticon.com/icons/png/512/79/79492.png" style="color:#cc0000;height:50px;width:50px;">
<img class="img-responsive" src="https://image.flaticon.com/icons/png/512/64/64022.png" style="color:#cc0000;height:50px;width:50px;">
<img class="img-responsive" src="https://image.flaticon.com/icons/png/512/1284/1284231.png" style="color:#cc0000;height:50px;width:50px;">
<img class="img-responsive" src="https://image.flaticon.com/icons/png/512/261/261277.png" style="color:#cc0000;height:50px;width:50px;">
<img class="img-responsive" src="https://image.flaticon.com/icons/png/512/1059/1059269.png" style="color:#cc0000;height:50px;width:50px;">
<img class="img-responsive" src="https://image.flaticon.com/icons/png/512/15/15222.png" style="color:#cc0000;height:50px;width:50px;">
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-lg btn-block add-btn-dark" name="">Add Task</button>
<button type="button" class="btn btn-lg btn-block add-btn-dark" data-dismiss="modal" >Cancel</button>
</div>
</form>
</div>
</div> <!-- end of modal body -->
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script>
// CHARACTER COUNT AND LIMIT TO TASK DESCRIPTION OR TEXT AREA
$(".taskDescArea").keyup(function(){
var maxLength = 800;
var length = $(this).val().length;
length = maxLength-length;
$(".char-count").text(length);
});
// CHARACTER COUNT AND LIMIT TO TASK NAME
$("#taskNameField").keyup(function(){
var maxLength = 50;
var length = $(this).val().length;
length = maxLength-length;
$(".name-char-count").text(length);
});
</script>
<!-- END OF ADD NEW TASK Modal -->
</html>
2 个答案:
答案 0 :(得分：0)
如果它是图标的预定义列表，则您可能只想存储所选图标的唯一标识符（可以是名称或数字），只要它允许您显示基于该标识符的正确图像。
在您的情况下，文件名似乎可以达到该目的（例如，“ trash-icon”或“ sink-logo”）。或者，如果您在某个位置定义了所有图标文件名的有序列表，则也可以将数字索引存储在该列表中。
答案 1 :(得分：0)
通过使用base64_encode
$img = addslashes(base64_encode(file_get_contents('THE_IMAGE_PATH')));
保存到数据库
INSERT INTO `table` (`emp_image`) VALUES ('$img'); //datatype => LONGTEXT
从数据库加载图像：
$saved_img = $results['emp_image'];
<img src="data:image/jpeg;base64,<?=$saved_img;?>"/>
但是更好的方法是将图像从Icomoon转换为图标
- 将png转换为svg
- 将svg加载到icomoon
- 生成字体并...
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？