I work in javascript basically I want to show the image when the user pick the image from the device the image must change the code that I use in the javascript file is
function changeProfile(){
var location = document.getElementById("profileLocation");
alert(location.value);
var image = document.getElementById("profileAAImage");
image.src(location.value);
}
and the code that I wrote in html file is
<div class="row">
<div class="col-md-3 form-group" style="padding-left: 7%;">
<img id="profileImage" style="border-radius: 200px;" src="images/interne/areab%20suhaib.jpg" class="img-thumbnail" width="100" height="100" >
</div>
<div class="col-md-9 form-group mt-3 mt-md-0" style="padding-top: 5%;">
<input type="file" name="file" class="form-control" id="profileLocation" onclick="changeProfile()" onkeyup="changeProfile()" placeholder="select profile image"
required>
</div>
</div>
what I do to do the required task.
Change location.value to location.files[0] to get the selected file.
function changeProfile() {
var location = document.getElementById("profileLocation");
var image = document.getElementById("profileImage");
image.src = window.URL.createObjectURL(location.files[0]);
}
<div class="row">
<div class="col-md-3 form-group" style="padding-left: 7%;">
<img id="profileImage" style="border-radius: 200px;" src="images/interne/areab%20suhaib.jpg" class="img-thumbnail" width="100" height="100">
</div>
<div class="col-md-9 form-group mt-3 mt-md-0" style="padding-top: 5%;">
<input type="file" name="file" class="form-control" id="profileLocation" onchange="changeProfile()" placeholder="select profile image" required>
</div>
</div>
Related
I am creating a dynamic resume form in which I have created dynamic add remove field with the help of java script but I am not getting any idea to store the input values of this dynamic form in database I am giving some code below -
dynamic add Remove script code resume.js
$(document).ready(function(){
var maxField = 5; //Input fields increment limitation
var addButton = $('.add_button'); //Add button selector
var wrapper = $('.field_wrapper'); //Input field wrapper
var fieldHTML =
'<div class="field_wrapper"><div class="mb-3"><input type="text" name="skills[]" value=""class="form-control" /><img class="my-2" src="images/remove.png"/ width="32" height="32" style="float: right;" title="Delete"/></div>'; //New input field html
var x = 1; //Initial field counter is 1
//Once add button is clicked
$(addButton).click(function(){
//Check maximum number of input fields
if(x < maxField){
x++; //Increment field counter
$(wrapper).append(fieldHTML); //Add field html
}
});
//Once remove button is clicked
$(wrapper).on('click', '.remove_button', function(e){
e.preventDefault();
$(this).parent('div').remove(); //Remove field html
x--; //Decrement field counter
});
});
// *************** Hobby******************
$(document).ready( function(){
var maxhobby = 4;
var addHobby = $('.add_hobby');
var hobby_wrapper = $('.hobby_wrapper');
var hobbyHTML = '<div class="hobby_wrapper"><div class="mt-sm-0"><input type="text" name="myhobby[]" value=""class="form-control" /><img class="my-2" src="images/remove.png"/ width="32" height="32" style="float: right;" title="Delete"/></div>';
var x = 1;
$(addHobby).click( function(){
if (x < maxhobby) {
x++
$(hobby_wrapper).append(hobbyHTML);
}
});
// Once Remove Button Click
$(hobby_wrapper).on('click', '.remove_hobby', function(e){
e.preventDefault();
$(this).parent('div').remove();
x--;
});
});
// *************** Job Objective******************
$(document).ready( function(){
var maxjob = 4;
var addjob = $('.add_job');
var job_wrapper = $('.job_wrapper');
var jobHTML = '<div class="job_wrapper"><div class="mt-sm-0"><input type="text" name="myjob[]" value=""class="form-control" /><img class="my-2" src="images/remove.png"/ width="32" height="32" style="float: right;" title="Delete"/></div>';
var x = 1;
$(addjob).click( function(){
if (x < maxjob) {
x++
$(job_wrapper).append(jobHTML);
}
});
// Once Remove Button Click
$(job_wrapper).on('click', '.remove_job', function(e){
e.preventDefault();
$(this).parent('div').remove();
x--;
});
});
// *************** Education ******************
$(document).ready( function(){
var maxedu = 10;
var addEdu = $('.add_edu');
var edu_wrapper = $('.edu_wrapper');
var eduHTML = '<div class="edu_wrapper"><hr><div class="d-flex justify-content-between mb-lg-3"><div class="col-md-6"><label class="form-label">School/University</label><input type="text" name="school_name[]" class="form-control" required></div><div class="col-md-6 ms-2"><label class="form-label">Degree/Course</label><input type="text" name="degree[]" class="form-control" required></div></div><div class="col-md-12"><label for="exampleInputEmail1" class="form-label">Marks/Grade/CGPA</label><input type="text" name="mark[]" value="" class="form-control"/></div><div class="d-flex justify-content-between"><div class="col-md-6"><label class="form-label">Start Date</label><input type="text" name="start_date[]" class="form-control" required></div><div class="col-md-6 ms-2"><label class="form-label">End Date</label><input type="text" name="end_date[]" class="form-control" required></div></div><img class="my-2" src="images/remove.png"/ width="32" height="32" style="float: right;" title="Delete"/></div>';
var x = 1;
$(addEdu).click( function(){
if (x < maxedu) {
x++
$(edu_wrapper).append(eduHTML);
}
});
// Once Remove Button Click
$(edu_wrapper).on('click', '.remove_edu', function(e){
e.preventDefault();
$(this).parent('div').remove();
x--;
});
and this is my form code for resume form.php
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="create-resumecv" method="post" enctype="multipart/form-data" name="add_name" id="add_name">
<!-- Start Education -->
<div class="card bg-light p-3 mb-3">
<h4 class="text-warning">Education & Qualification</h4>
<div class="edu_wrapper">
<div class="d-flex justify-content-between mb-lg-3">
<div class="col-md-6">
<label class="form-label">School/University</label>
<input type="text" name="schoolname[]" class="form-control" >
</div>
<div class="col-md-6 ms-2">
<label class="form-label">Degree/Course</label>
<input type="text" name="degree[]" class="form-control" >
</div>
</div>
<div class="col-md-12">
<label for="exampleInputEmail1" class="form-label">Marks/Grade/CGPA</label>
<input type="text" name="mark[]" value="" class="form-control"/>
</div>
<div class="d-flex justify-content-between mt-3">
<div class="col-md-6">
<label class="form-label">Start Date</label>
<input type="date" name="startdate[]" class="form-control" >
</div>
<div class="col-md-6">
<label class="form-label">End Date</label>
<input type="date" name="enddate[]" class="form-control" >
</div>
</div>
</div>
<div class="mt-3" align="center">
<a href="javascript:void(0);" class="add_edu" title="Add More Eduction"><img src="images/add.png"/ width="28" height="28"/></a >
</div>
</div>
<!-- End Education -->
<!-- About Me -->
<div class="card bg-light' p-3 mb-3">
<h4 class="text-warning">About Me</h4>
<div class="form-floating">
<textarea class="form-control" id="editor" name="aboutme"></textarea>
</div>
</div>
<!-- End -->
<!-- Start My Skill -->
<div class="card bg-light p-3 mb-3">
<h4 class="text-warning ">Skills</h4>
<p class="text-muted">Add More Skill Max:5 and don't press enter button</p>
<div class="mb-auto">
<div class="field_wrapper">
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Enter Skill</label>
<input type="text" name="skills[]" value="" class="form-control"/>
</div>
</div>
<div class="mb-3" align="center">
<a href="javascript:void(0);" class="add_button" title="Add Skill"><img class="mb-2" src="images/add.png"/ width="28" height="28"/></a >
</div>
</div>
</div>
<!--End My Skill -->
<!-- Start My Skill -->
<div class="card bg-light p-3 mb-3">
<h4 class="text-warning ">Job-Objective</h4>
<p class="text-muted">Add More Job Objective Max:5 and don't press enter button</p>
<div class="mb-auto">
<div class="job_wrapper">
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Job Objective</label>
<input type="text" name="myjob[]" value="" class="form-control"/>
</div>
</div>
<div class="mb-3" align="center">
<a href="javascript:void(0);" class="add_job" title="Add Skill"><img class="mb-2" src="images/add.png"/ width="28" height="28"/></a >
</div>
</div>
</div>
<!--End My Skill -->
<!-- My Hobbies -->
<div class="card bg-light' p-3 mb-3">
<h4 class="text-warning">Hobbies</h4>
<div class="mb-3">
<div class="hobby_wrapper">
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Enter Hobby</label>
<input type="text" name="myhobby[]" value="" class="form-control"/>
</div>
</div>
<div class="mt-3" align="center">
<a href="javascript:void(0);" class="add_hobby" title="Add hobby"><img class="mb-2" src="images/add.png"/ width="28" height="28"/></a >
</div>
</div>
</div>
<!-- end My Hobbies -->
<!--Start Experience -->
<div class="card bg-light' p-3 mb-3">
<h4 class="text-warning">Experience</h4>
<div class="expe_wrapper">
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Title</label>
<input type="text" name="experience_title" class="form-control">
</div>
<div class="mb-3">
<div class="form-floating">
<label for="exampleInputEmail1" class="form-label">Description</label>
<textarea class="form-control" name="experience_des" id="editor2"></textarea>
</div>
</div>
</div>
</div>
<!-- end Experience -->
<div class="text-center">
<button type="submit" title="Submit your form for generate Resume" class="btn btn-success mb-5" name="create-resume" id="submit"> <img src="<?php echo BASE_URL . 'reg-users/images/resume.png' ?>" style="width: 20px; height: 20px;"> Create Resume</button>
</div>
</form>
there are no any issue to add or remove dynamic input field its work correctly, but don't have an idea to store dynamic add field form values in mysqli database.
please tell me how can i store dynamic input field values in database using PHP.
At last I found the solution, so I am posting the answer.
See, when we want to store the input values of the form in the form of an array in the database, then we simply define a string to array, it is a simple thing.
I have used the implode and explode function of php in this solution, then I got the perfect solution. You can also use this function if you want.
implode(",", $array); // defined or predefined.
The implode() function returns a string from the elements of an array.
explode(",", $array); // you want break array to string.
The explode() function breaks a string into an array.
I have dropdown option to get image and on selecting option image shows up. I want to get same image in next page. How can I achieve that?
index.php
<div class="col-md-2" style="color: #000; font-family:Titillium Web">
<span style="color: #fff"> Pickup Location * </span>
<select class='selectpicker1' id='colorselector' name='pickup_loc'>
<option value=''></option>
<option value='Building1'>Building1</option>
<option value='Building2'>Building2</option>
</select>
</div>
<div class="col-md-2 text-center">
<br> <input type="text" id="pwr1" class="required p-control" name="pickup_ward" />
</div>
<div class="col-md-2" style="color: #000; font-family:Titillium Web ">
<span style="color: #fff"> Drop Location *</span>
<select class='selectpicker2' id='dropselector' name='drop_loc'>
<option value=''></option>
<option value='Floor1'>Floor1</option>
<option value='Floor2'>Floor2</option>
</select>
</div>
<div class="container colorselector show-image output">
<div id="Building1" class="colors Building2">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQWb3sciAdSaUG1Up0xz9facEB2bWr_OPZG6jNzHaQKcmwDBTB2iA" style="width: 100%" class="img-responsive" />
</div>
<div id="Building2" class="colors Building2">
<img src="https://cdn.vox-cdn.com/thumbor/MJguYcgKkDes6NzbE8Y0OgdyF64=/0x0:1500x974/1200x800/filters:focal(630x367:870x607)/cdn.vox-cdn.com/uploads/chorus_image/image/56258041/2401_Third_Ave.0.jpg" style="width: 100%" class="img-responsive" />
</div>
</div>
<div class="container dropselector show-image output">
<div id="Floor1" class="colors Floor1">
<img src="https://images.mydoorsign.com/img/lg/S/1-floor-number-braille-sign-se-6089.png" style="width: 100%" class="img-responsive" />
</div>
<div id="Floor2" class="colors Floor2">
<img src="https://images.mydoorsign.com/img/lg/S/2-floor-number-braille-sign-se-6090.png" style="width: 100%" class="img-responsive" />
</div>
</div>
$('#colorselector, #dropselector').change(function() {
var select = $(this);
$('.' + select.attr("id") + ' .colors').hide();
$('#' + select.val()).show();
});
I want to get the selected image in the next page.
In JavaScript, you can use session storage to achieve this.
On first page set the image URL with a desired unique key.
sessionStorage.setItem("myImage", "some url");
Then on the next page, retrieve the image:
sessionStorage.getItem("myImage");
I want to access element of this dynamically created div. This is the html
<div id="uploader">
<div class="row uploadDoc">
<div class="col-sm-3">
<div class="docErr">Please upload valid file</div>
<!--error-->
<div class="fileUpload btn btn-orange">
<img src="https://image.flaticon.com/icons/svg/136/136549.svg" class="icon">
<span class="upl" id="upload">Upload document</span>
<input type="file" class="upload up" id="up" onchange="readURL(this);">
</div>
<!-- btn-orange -->
</div>
<!-- col-3 -->
<div class="col-sm-8">
<input type="text" class="form-control" name="" id="document_name" placeholder="Document Name">
</div>
<!--col-8-->
<div class="col-sm-1"><a class="btn-check"><i class="fa fa-times"></i></a></div>
<!-- col-1 -->
this is the part that is dynamically created
<div class="row uploadDoc">
<div class="col-sm-3">
<div class="docErr">Please upload valid file</div>
<!--error-->
<div class="fileUpload btn btn-orange"> <img src="https://image.flaticon.com/icons/svg/136/136549.svg" class="icon"><span class="upl" id="upload3">Upload document</span><input type="file" class="upload up" id="up" onchange="readURL(this);"></div>
</div>
<div class="col-sm-8"><input type="text" class="form-control" id="Doc3note" name="" placeholder="Note"></div>
<div class="col-sm-1"><a class="btn-check"><i class="fa fa-times"></i></a></div>
I have a file upload handler called readURL()
function readURL(input) { }
what I want to get is the id of a specific div, so I tried this and many other unsuccessful methods
function readURL(input) {
console.log($(input).closest('.col-sm-8').find(".form-control").attr('id'));
}
I hope my explanation is clear, I want to get the id of class="col-sm-8" on file upload. how can implement this?
Passing the id up (uploadFile input)
Execute this: $(input).parent().parent().next()
Look at this code snippet
function readURL(input) {
console.log('Id of Div: ' + $(input).parent().parent().next().attr('id'));
console.log('Id of form-control input: ' + $(input).parent().parent().next().find(".form-control").attr('id'));
}
readURL('#up');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row uploadDoc">
<div class="col-sm-3">
<div class="docErr">Please upload valid file</div>
<!--error-->
<div class="fileUpload btn btn-orange"> <img src="https://image.flaticon.com/icons/svg/136/136549.svg" class="icon"><span class="upl" id="upload3">Upload document</span><input type="file" class="upload up" id="up" onchange="readURL(this);"></div>
</div>
<div class="col-sm-8" id='div(col-sm-8)'><input type="text" class="form-control" id="Doc3note" name="" placeholder="Note"></div>
<div class="col-sm-1"><a class="btn-check"><i class="fa fa-times"></i></a></div>
Resources
.parent()
.next()
I am using a form to upload a photo and show in the <img>.
But it doesn't work correctly and can't show the photo on <img>.
I am using Django and I have a base.html as a template and I added this javascript to the head by:
<script src="{% static "landingpages/js/photoupload.js" %}"></script>
and also the from is being generate by user as much as they needs
Javascript
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#myimg').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$(function () { //document ready call
$("#photoinput").change(function(){
readURL(this);
});
});
HTML
<section class="container" xmlns="http://www.w3.org/1999/html">
<div class="row addform" id="addform">
<div class="col-md-12 addform-col">
<div id="headertag" class="row" style="margin-left: 0px">
<label class="add-lable">Team Member(s):
<span style="color:red">*</span>
</label>
</div>
<div class="row input-field">
<form id="form1" runat="server">
<div name="membercard" class="row">
<div id="teamform" class="col-md-4" style="display: none">
<div name="imageholder" class="row tm-image-holder">
<div class="col-md-12" style="text-align: center">
<img id="myimg" style="height: 200px;text-align: center;">
</div>
</div>
<input id="photoinput" type="file" class="btn btn-block btn-lg btn-primary inout-margin mybut">
<input id="name" name="name0" type="text" class="add-input input-margin" placeholder="Name, Mohammad, ... *">
<input id="job" name="job0" type="text" class="add-input" placeholder="Job, Developer, Designer, ... *">
<textarea id="explain" name="explain0" class="add-textarea input-margin" rows="4" placeholder="Explain this member in 2 to 4 lines *"></textarea>
</div>
<span id="formhere"></span>
</div>
</form>
<div name="addform" class="row input-field">
<div class="col-md-12" style="text-align: left">
<a onclick="member_card()">+ Add Team Member</a>
</div>
</div>
</div>
</div>
</div>
</section>
Add the option enctype="multipart/form-data" to your form element, like this:
<form id="form1" enctype="multipart/form-data runat="server">
As the Django Documentation says:
Note that request.FILES will only contain data if the request method was POST and the that posted the request has the attribute enctype="multipart/form-data". Otherwise, request.FILES will be empty.
https://docs.djangoproject.com/en/1.9/topics/http/file-uploads/
I am using html2canvas to save html as image.
My html code is as follows
<div id="target" class="center-block imgStruc" style="width:92%;">
<div class="center-block eventName makeMeDraggable box">
<div class="text">
<div class="text1">Test Data</div>
</div>
</div>
<div class="imgCont clearfix"><img src="http://mydomainname/image.jpg" alt="" class="img-responsive" id="changeImg"></div>
</div>
<div class="col-sm-6">
<input type="submit" value="Save & Continue »" onClick="snap_onclick()"/>
<form method="POST" enctype="multipart/form-data" action="savecard.php" id="myForm">
<input type="hidden" name="img_val" id="img_val" value="" />
</form>
</div>
My javascript is as follows
function snap_onclick() {
$('#target').html2canvas({
onrendered: function (canvas) {
$('#img_val').val(canvas.toDataURL("image/png"));
document.getElementById("myForm").submit();
}
});
}
Image of target div has been created. But when I change image src of changeImg using following jquery code
function changeImage()
{
$('#changeImg').attr('src','http://mydomainname/path-to-image/image.jpg');
}
and then click on save button, it creates image with text part only, changed image has not come.
save.php is as follows
<?php
//Get the base-64 string from data
//echo $_POST['img_val'];
$filteredData=substr($_POST['img_val'], strpos($_POST['img_val'], ",")+1);
//Decode the string
$unencodedData=base64_decode($filteredData);
//Save the image
file_put_contents('img.png', $unencodedData);
?>
<h2>Save the image and show to user</h2>
<table>
<tr>
<td>
<a href="img.png" target="blank">
Click Here to See The Image Saved to Server</a>
</td>
<td align="right">
<a href="index.php">
Click Here to Go Back</a>
</td>
</tr>
<tr>
<td colspan="2">
<br />
<br />
<span>
Here is Client-sided image:
</span>
<br />
<?php
//Show the image
echo '<img src="'.$_POST['img_val'].'" />';
?>
</td>
</tr>
</table>
<style type="text/css">
body, a, span {
font-family: Tahoma; font-size: 10pt; font-weight: bold;
}
</style>
new image is in the same domain.
Ok, don't add the button as before....
You have an html like this?(I sobstitute the image with others online....)
<div class="col-md-3 col-sm-4 col-xs-4 single-right-grid-left">
<a onclick="changeImage()"> <img style="width:50px;" id="drag1" class="drag" alt="" src="http://beblex.it/wp/wp-content/uploads/2014/05/Online1.jpg">
</a>
</div>
<div id="target" class="center-block imgStruc" style="width:92%;">
<div class="center-block eventName makeMeDraggable box">
<div class="text">
<div class="text1">Test Data</div>
</div>
</div>
<div class="imgCont clearfix">
<img src="http://www.bottegamonastica.org/wp-content/uploads/Finalmente-Online.jpg" alt="" class="img-responsive" id="changeImg" style="width:50px;">
</div>
</div>
<div class="col-sm-6">
<input type="submit" value="Save & Continue »" onClick="snap_onclick()"/>
<form method="POST" enctype="multipart/form-data" action="savecard.php" id="myForm">
<input type="hidden" name="img_val" id="img_val" value="" />
</form>
</div>
The js is the same as you paste....