How to save an image to a database?
Question
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...
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 answers
solution1
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.
solution2
0 2019-12-30 02:34:51
by using 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
- convert png to svg
- load svg to icomoon
- generate the fonts and ...
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to save image into sqlite database?
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?
how to save image path in the database in mysql for php
Laravel : How to save multiple image file to database
How to save an image in CodeIgniter root folder and database?
How to save an image to the database with a path file
Related Tags