如何将图像保存到数据库？
[英]How to save an image to a database?
问题描述
I want the user to choose one image from the predefined set of icons and then the image will be saved in the database after submitting the form.
我希望用户从预定义的一组图标中选择一个图像，然后在提交表单后将图像保存在数据库中。 (I also want to know what is the best data type I'll be using in saving it in the database). （我还想知道在将其保存在数据库中时将使用的最佳数据类型是什么）。
I want to do it this way cause I don't want the user to upload images.我想这样做，因为我不希望用户上传图片。
Also, I'm still new to php and jQuery so I kind of needed help in that too...另外，我还是 php 和 jQuery 的新手，所以我也需要帮助......
CODE:代码：
/*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
If it's a predefined list of icons, you probably want to store only a unique identifier of the selected icon - which could be a name or a number - as long as it allows you to display the correct image based on that identifier.如果它是一个预定义的图标列表，您可能只想存储所选图标的唯一标识符（可以是名称或数字），只要它允许您根据该标识符显示正确的图像。
In your case, it looks like the filename could serve that purpose (eg. 'trash-icon' or 'sink-logo').在您的情况下，看起来文件名可以用于该目的（例如“垃圾图标”或“接收器徽标”）。 Or if you have an ordered list of all the icon filenames somewhere defined, you could also store the numeric index within that list.或者，如果您在某处定义了所有图标文件名的有序列表，您也可以在该列表中存储数字索引。
解决方案2
0 2019-12-30 02:34:51
by using base64_encode通过使用base64_encode
$img = addslashes(base64_encode(file_get_contents('THE_IMAGE_PATH')));
save to database保存到数据库
INSERT INTO `table` (`emp_image`) VALUES ('$img'); //datatype => LONGTEXT
load the images from database:从数据库加载图像：
$saved_img = $results['emp_image'];
<img src="data:image/jpeg;base64,<?=$saved_img;?>"/>
but the better way is to convert the images into icons from Icomoon但更好的方法是将图像从Icomoon转换为图标
- convert png to svg
- load svg to icomoon
- generate the fonts and ...
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何将图像保存到 sqlite 数据库中？ - How to save image into sqlite database?
如何将图像保存到MySQL数据库？ - How to save an image to a MySQL database?
如何在我的数据库中保存图像？ - How to save image in my database?
如何将上传的图像保存在数据库中 - How to save uploaded image in database
如何将图像从文件夹保存到数据库 - how to save image from folder to database
如何上传图像并保存到数据库的路径？ - How to upload image and save path to database?
如何在MySQL中为PHP在数据库中保存图像路径 - how to save image path in the database in mysql for php
Laravel：如何将多个图像文件保存到数据库 - Laravel : How to save multiple image file to database
如何将图像保存在 CodeIgniter 根文件夹和数据库中？ - How to save an image in CodeIgniter root folder and database?
如何使用路径文件将图像保存到数据库 - How to save an image to the database with a path file
相关标签