如何将图像保存到数据库？
[英]How to save an image to a database?
问题描述
我希望用户从预定义的一组图标中选择一个图像，然后在提交表单后将图像保存在数据库中。 （我还想知道在将其保存在数据库中时将使用的最佳数据类型是什么）。
我想这样做，因为我不希望用户上传图片。
另外，我还是 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="eg 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 个解决方案
解决方案1
0 2019-12-14 03:03:19
如果它是一个预定义的图标列表，您可能只想存储所选图标的唯一标识符（可以是名称或数字），只要它允许您根据该标识符显示正确的图像。
在您的情况下，看起来文件名可以用于该目的（例如“垃圾图标”或“接收器徽标”）。 或者，如果您在某处定义了所有图标文件名的有序列表，您也可以在该列表中存储数字索引。
解决方案2
0 2019-12-30 02:34:51
通过使用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
- 生成字体和...
如何将图像保存到 sqlite 数据库中？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.