html2canvas save image after change img src - javascript

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....

Related

Custom social media site posting process not posting to user's profile

I'm working on a social media site for a client that was built by another company. Currently I'm working on the posting system where users can post. The original code had it where users had to go through 3 steps first then hit the button to post. The client wanted to remove the steps and just have it setup similar to facebook. I moved the code around and removed the steps but the "Post" button doesn't work now. When I click on it, it just says "Posting" and doesn't do anything else.
If you go to seegossip.com and sign up as a user and login, click on the orange smileys icon in the top right, it will bring up the posting popup.
Below is the original posting process code:
<div class="popup close">
<div class="left">
<div class="sectionn1 follow" id="box1">
<div class="popup-heading">Follow the steps and start gossiping!</div>
<div class="follow2">*Tip: you can do all three on the same Post! </div>
<div class="type">
</div>
<div class="get">
<button type="button" onClick="openpopup(2)">Get Started!</button>
</div>
<div class="popupclose">
<a class="new_post_close" >
<img src="images/into-logo.png" /> <div class="popupclose-c">Cancel</div>
</a>
</div>
</div>
<div class="sectionn1" id="box2" align="center">
<div class="popup-heading">Step1: Type away!</div>
<div class="user-post-main">
<div class="add-pics">
<div class="user-post"> <br clear="all" />
<form id="post" id="form" name="form" action="" method="post">
<div class="user-post-middle">
<div class="post-area">
<input type="text" placeholder="Type your post's Title here" class="input" name="postname" id="postname"/>
<span class='status'></span>
</div>
<div class="post-area">
<textarea placeholder="Type your post's here" class="textarea" rows="5" name="posttext" id="posttext"/></textarea>
<span class='status'></span>
</div>
<div class="post-area">
<input type="text" placeholder="Enter a Custom URL Here" class="input" name="posturl" id="posturl"/>
<span class='status'></span>
</div>
<br clear="all" />
</div>
</form>
<div class="red">
<div>
<div id="dropzone" class="drop">
<form action="upload/" class="dropzone" id="my-dropzone">
<input type="hidden" name="postid" value="<?php echo $_REQUEST['post_id'];?>">
<input type="hidden" name="userid" value="<?php echo $_SESSION['sguser_id'];?>">
</form>
</div>
<div id="dropzone1" class="dropzone zone"> </div>
</div><br clear="all" />
<!--<button type="button" onclick="openpopup(4)" >Lets Add Some Videos! ></button>-->
</div>
</div>
<div class="green">
<div>
<div id="dropzone" class="drop">
<form action="upload/" class="dropzone" id="my-dropzone2">
</form>
</div>
<div id="dropzone2" class="dropzone zone"></div>
</div><br clear="all" />
<div class="some">
<div class="button"><button type="button" name="create_new_post" id="create_new_post" >Post</button></div>
</div>
</div>
</div>
</div>
<div class="popupclose">
<a class="new_post_close" >
<img src="images/into-logo.png" /> <div class="close-c">Cancel</div>
</a>
</div>
</div>
</div>
</div>
<!----------------------popup3---------------------------->
<div class="sectionn1" id="box3" align="center">
<div class="popup-heading"> Step2: Let's Add Some Pics!</div>
<span style="font-style:italic; font-size:16px;">No Picture? No Problem Simply Continue to the Next Step! </span><br clear="all" />
<div class="user-post-main">
<div class="user-post1">
<div class="user-post">
<div class="popupclose">
<a class="new_post_close" >
<img src="images/into-logo.png" /> <div class="close-c">Cancel</div>
</a>
</div>
</div>
<div class="right-icn">
<div style="background-image:url(images/left1.png); width:50px; height:50px" class="left1"></div>
<div style="background-image:url(images/left2.png); width:50px; height:50px" class="left2"></div>
<div style="background-image:url(images/left3.png); width:50px; height:50px" class="left3"></div>
</div>
</div>
</div>
<!-------------------------------popup-4--------------------->
<style>
.dz-default.dz-message {
background-size:100px !important;
}
</style>
<div class="sectionn1" id="box4" align="center">
<div class="popup-heading">Step3: Let's Add Some Videos!</div>
No Videos? No Problem Simply click on POST!<br clear="all" /><br />
<div class="user-post-main">
<div class="user-post1">
<div class="user-post">
<div class="popupclose">
<a class="new_post_close" >
<img src="images/into-logo.png" /> <div class="close-c">Cancel</div>
</a>
</div>
</div>
<div class="right-icn">
<div style="background-image:url(images/left1.png); width:50px; height:50px" class="left1"></div>
<div style="background-image:url(images/left2.png); width:50px; height:50px" class="left2"></div>
<div style="background-image:url(images/left3.png); width:50px; height:50px" class="left3"></div>
</div>
</div>
</div>
</div>
<!--------------------------popup-->
And here's the new code for the posting process:
<div class="popup close">
<div class="sectionn1 follow" id="box1">
<div class="user-post">
<!-- UPLOAD PICS -->
<div class="popupclose">
<a class="new_post_close">
<div class="close-c">
</div></a>
</div>
<div class="drop" id="dropzone">
<form action="upload/" class="dropzone" id="my-dropzone" name="my-dropzone">
<input name="postid" type="hidden" value="<?php echo $_REQUEST['post_id'];?>"> <input name="userid" type="hidden" value="<?php echo $_SESSION['sguser_id'];?>">
</form>
<p>Add Photo(s)</p>
</div>
<div class="dropzone zone" id="dropzone1">
</div>
<!-- UPLOAD VIDEOs -->
<div class="drop" id="dropzone">
<form action="upload/" class="dropzone" id="my-dropzone2" name="my-dropzone2">
</form>
<p>Add Video</p>
</div>
<div class="dropzone zone" id="dropzone2">
</div>
</div>
<!-- POST AREA -->
<form action="" id="post" method="post" name="form">
<textarea class="textarea" id="posttext" name="posttext" placeholder="What's on your mind, today?" rows="5"></textarea>
</form>
<div class="bottom-buttons">
<div class="button">
<button id="create_new_post" name="create_new_post" type="button">
<p>Post</p></button>
</div>
</div>
</div>
</div>
Below is the script for the popup where I think the error is.
$(document).on('click','a#opennewpostpopup',function(data){
if($('.popup').hasClass('close')) {
postpopup(0);
openpopup(1);
}
});
$(document).on('click','.openpostpopup',function(data){
postpopup(5,this);
});
function openpopup(p){
if(p){
$('.glass, .popupglass').fadeIn();
$('.popup').removeClass('close');
$('.sectionn1').removeClass('active');
$('#box'+p).addClass('active');
$('body').addClass('short_page');
if(p==3) $('#my-dropzone .dz-default span').html('Drag and Drop your pictures here!')
if(p==4) $('#my-dropzone2 .dz-default span').html('Drag and Drop your Videos here,');
}
else {
$('.glass , .popupglass').fadeOut();
$('.popup').addClass('close');
$('body').removeClass('short_page');
$('.sectionn1').removeClass('active');
$('#post .post-area .input,#post .post-area .textarea').each(function(){ $(this).val(''); });
$('span.status').removeClass('success').removeClass('error');
$('.dz-preview').remove();
$('[name=post_id]').remove();
}
}
function createPostId(popup){
id = $('input[name=post_id]').val();
if(typeof cnprpost == 'undefined' && !id){
cnprpost = $.post("ajax.php",{action:'createPost',posttext:$('#posttext').val()},function(data){
$('#my-dropzone, #my-dropzone2').not(':has(input[name=post_id])').prepend('<input type="hidden" name="post_id" value="'+data+'">');
openpopup(popup);
delete cnprpost;
});
}else openpopup(popup);
}
$('.new_post_close').on('click',function(data){
id=$('form.dropzone [name=post_id]').val();
if(id) {
var conf=confirm("Your Post is Not Published\nClick Cancel to Continue or\nClick OK to Cancel\nYour Uploads will remove if you Click Ok");
if(conf){
openpopup(0);
$.post("ajax.php",{action:"deletepost",post_id:id},function(data){
});
}
}else openpopup(0);
});
$('#create_new_post').on('click',function(){
post_id=$('[name=post_id]').val();
postTitle = $('#post input[name=postname]').val();
postContent = $('#post textarea[name=posttext]').val();
postUrl = $('#post input[name=posturl]').val();
dis=this;
$(dis).html('Posting...');
if(typeof pprpost == 'undefined' && post_id )
pprpost =$.post("ajax.php",{action:'publishpost',post_id:post_id,posttitle:postTitle,posttext:postContent,posturl:postUrl},function(data){
if(data==1) { openpopup(0); }
else { $(dis).html('Try Again...'); }
delete pprpost
});
});
window.onbeforeunload = function() {
id=$('[name=post_id]').val();
if(!$('.popup').hasClass('close') && id){
return "Your Post is Not Published\nClick Cancel to Continue or\nClick OK to Cancel\nYour Uploads will remove if you Click Ok";
$.post("ajax.php",{action:"deletepost",post_id:id},function(data){ });
}
}
This is a little advanced for me and I've been stuck on this site for a couple weeks trying to figure out what the problem is so please help.

Photo upload and show preview in django with javascript

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/

Getting rel of <a> tag in javascript

I have a javascript containing a form with image, radio button and text boxes.
When I click on the delete hyperlink, I want to get the rel of that link.
How can I go about getting it?
Form
<script type="text/template" id="imageTemplate">
<div class="row gc_photo" id="gc_photo_{{id}}" style=" border-bottom:1px solid #ddd; padding-bottom:20px; margin-bottom:20px;">
<div class="col-md-2">
<input type="hidden" name="images[{{id}}][filename]" value="{{filename}}"/>
<img class="gc_thumbnail" src="<?php echo base_url('../product_images/{{filename}}');?>" style="padding:5px; border:1px solid #ddd"/>
</div>
<div class="col-md-10">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<input name="images[{{id}}][alt]" value="{{alt}}" class="form-control" placeholder="<?php echo lang('alt_tag');?>"/>
</div>
</div>
<div class="col-md-4">
<div class="checkbox">
<label>
<input type="radio" name="primary_image" value="{{id}}" {{#primary}}checked="checked"{{/primary}}/> <?php echo lang('main_image');?>
</label>
</div>
</div>
<div class="col-md-4">
<a onclick="return remove_image($(this));" rel="{{id}}" class="btn btn-danger pull-right"><i class="icon-times "></i></a>
</div>
</div>
<div class="row">
<div class="col-md-12">
<label><?php echo lang('caption');?></label>
<textarea name="images[{{id}}][caption]" class="form-control" rows="3">{{caption}}</textarea>
</div>
</div>
</div>
</div>
</script>
Function to delete
function remove_image(img)
{
if(confirm('<?php echo lang('confirm_remove_image');?>'))
{
var id = img.attr('rel');
alert(id);
}
}
You can make use of jQuery click handler here. Remove onclick attribute from anchor tag and write below click handler
$(function(){
$('a.btn.btn-danger').click(function(){
if(confirm('<?php echo lang('confirm_remove_image');?>'))
{
alert($(this).attr('rel'));
}
});
});

Javascript form submission validation is not working

I am unsure why my javascript form submission validation is not working – any help would be much appreciated.
I have 2 tables with a class: table-first & table second
Using media query, when screen is less than 740px table-first is hidden and table-second is displayed
table-first has a class “voucher_input” on the input field for a voucher &
table-second has a class called “voucher-input2” on the voucher input field
I have written a javascript to prevent submission of the form if the voucher input field is empty
And if empty it should prompt up an error message
The code works well for “table-first” with the class “voucher-input” – a form is not submitted when the voucher input field is empty
But the code does not work well with “table-second” with the class “voucher-input2” – the form submits with an empty voucher input field.
Can one please advise me on what is wrong with my code as I want the input fields with the “voucher-input” & “voucher-input2” to prompt up an error message when the field is empty
My code are as below. Many thanks
my javascript code: is intended to prompt up an error message if the voucher fields with the class voucher_input & voucher_input2 are empty - it currently only prompts up an error message for voucher_input and not voucher_input2
$(document).ready(function () {
var form = $("#vouchers_form");
$("#vouchers_form").on("submit", function(e){
// e.preventDefault();
var voucher_input = $('.voucher_input').val();
var voucher_input2 = $('.voucher_input2').val();
if (voucher_input.length < 1) {
$("#popupErrorConfirmVoucherEmpty").popup("open", { transition: "fade", history: false });
return false;
}
else if (voucher_input2.length < 1) {
$("#popupErrorConfirmVoucherEmpty").popup("open", { transition: "fade", history: false });
return false;
}
else {
form.submit();
}
});
});
html code: table-first with the input field <input class="required voucher_input" id="voucher" name="voucher" placeholder="Enter Promo Code" type="text" value="" />
<div class="main-table table-first">
<div class="table-header">select a payment option</div>
<div class="table-content-container">
<div class="table-content">
<div class="table-container">
<table>
<tbody>
<tr>
<td class="left-content">
<div>
<div class="hidden" id="paypal_express_checkout"><input type="checkbox" checked="checked" value="10147608"/></div>
<p>
<a href="#" id="express_checkout_btn" onclick="paypalPaidAccessSelected();" type="submit" value="Submit">
<img alt="" height="48" src="../../account/gallery/6759612/images/paypal-button.png" width="242" />
<!-- <input id="express_checkout_btn" onclick="paypalPaidAccessSelected();" type="submit" value="Submit" /></p> -->
</a>
</p>
</div>
</td>
</tr>
<tr>
<td class="left-content">
<div class="cards-visa-master">
<div class="inner-inner-container">
<img alt="" src="../../account/gallery/6759612/images/card-visa.png" />
<img alt="" src="../../account/gallery/6759612/images/card-master.png" />
</div>
</div>
</td>
<td>
<form action="//manager.odyssys.net/account//signin/voucher" data-ajax="false" id="vouchers_form" method="post">
<ul>
<li>
<div class="check-button" id="terms"><input class="hidden" id="accept_terms_vouchers_container" name="checkbox" onclick="termsChecked();" type="checkbox" /> </div>
<div class="check-button" id="promotions"><input class="hidden" id="accept_promotions_vouchers_container" name="checkbox" onclick="promotionsChecked();" type="checkbox" /> </div>
<div><input id="voucher_login_btn" type="submit" value="apply" /></div>
</li>
<li>
<p class="voucher-header">Do you have a Promo code?</p>
<div><input class="required voucher_input" id="voucher" name="voucher" placeholder="Enter Promo Code" type="text" value="" /></div>
</li>
</ul>
</form>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- msg start -->
<div class="popup error" data-role="popup" id="popupErrorConfirmVoucherEmpty">
<a class="ui-btn-right" data-icon="delete" data-iconpos="notext" data-rel="back" data-role="button" data-theme="a" href="#">Close</a>
<p style="padding: 10px; color: red">You must enter a voucher code</p>
</div>
<!-- msg start -->
</div>
html code: table-second with the input field <input class="required voucher_input2" id="voucher" name="voucher" placeholder="Enter Promo Code" type="text" value="" />
<!-- reponsive design displayed when width screen is below 740px -->
<div class="main-table table-second">
<div class="table-header">select a payment option</div>
<div class="table-content-container">
<div class="table-content">
<div class="table-container">
<table>
<tbody>
<tr>
<td class="left-content paypal">
<div>
<div class="hidden" id="paypal_express_checkout"><input type="checkbox" checked="checked" value="10147608"/></div>
<p>
<a href="#" id="express_checkout_btn" onclick="paypalPaidAccessSelected();" type="submit" value="Submit">
<img alt="" height="48" src="../../account/gallery/6759612/images/paypal-button.png" width="242" />
<!-- <input id="express_checkout_btn" onclick="paypalPaidAccessSelected();" type="submit" value="Submit" /></p> -->
</a>
</p>
</div>
</td>
</tr>
<tr>
<td class="left-content card">
<div class="cards-visa-master">
<div class="cards-visa-master">
<div class="inner-inner-container">
<img alt="" src="../../account/gallery/6759612/images/card-visa.png" />
<img alt="" src="../../account/gallery/6759612/images/card-master.png" />
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>
<form action="//manager.odyssys.net/account//signin/voucher" data-ajax="false" id="vouchers_form" method="post">
<p class="voucher-header ">Do you have a Promo code?</p>
<div><input class="required voucher_input2" id="voucher" name="voucher" placeholder="Enter Promo Code" type="text" value="" /></div>
<div class="check-button" id="terms"><input class="hidden" id="accept_terms_vouchers_container" name="checkbox" onclick="termsChecked();" type="checkbox" /> </div>
<div class="check-button" id="promotions"><input class="hidden" id="accept_promotions_vouchers_container" name="checkbox" onclick="promotionsChecked();" type="checkbox" /> </div>
<div><input id="voucher_login_btn" type="submit" value="apply" /></div>
</form>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- msg start -->
<div class="popup error" data-role="popup" id="popupErrorConfirmVoucherEmpty">
<a class="ui-btn-right" data-icon="delete" data-iconpos="notext" data-rel="back" data-role="button" data-theme="a" href="#">Close</a>
<p style="padding: 10px; color: red">You must enter a voucher code</p>
</div>
<!-- msg start -->
</div>
</div>
The error may be due to a duplicate ID on the page.
If both of these tables are on the same page the error block shouldn't have the same ID (popupErrorConfirmVoucherEmpty) as there should only be one ID on the page. Try changing the name of the second one to popupErrorConfirmVoucherEmpty2 and altering the JS accordingly

how can i get img paths using jquery

<div class="em-main" style="text-align: center">
<div class="em-div-head" align="center"> E-Shop Jewellery </div>
<div class="em-textbox" style="border:hidden">
<input type="text" value="To:" name="recipient" style="width:97%">
</div>
<div id="em">
<div class="em-middle">
<div style="border-bottom:solid 1px #CCCCCC">
<textarea class="em-textarea" onblur="if (this.value == '') { this.value='Write a
message..'; }" onfocus="if(this.value == 'Write a message..') { this.value =
''; }" value="Write a message.." name="message">Write a message..</textarea>
</div>
<div id="em_rt_tp_scroller" class="em_rt_tp_scroller">
<div id="em-rightscrollerimage" style="border:none">
<div class="em-mdimage"><img class="mail" src=" http://localhost:8080/weather
/servlets.ImgDisplayServlet?id=D:\EML\workspace\assets\tried-
imgs\18__1882_IMG_5731_203_173.png " alt="imagecontainer image" style="max-
height:100%; max-width:100%;">
<ul>
<img id="em-delete" class="removeicon" width="7" height="7" title="Remove" bottom="10%"
src="jqe13/image/delete_s.PNG">
</ul>
</div>
<div class="em-mdimage">
<img class="mail" src=" http://localhost:8080/weather
/servlets.ImgDisplayServlet?id=D:\EML\workspace\assets\tried-
imgs\13__1882_IMG_5731_120_124.png " alt="imagecontainer image" style="max-
height:100%; max-width:100%;">
<ul>
<img id="em-delete" class="removeicon" width="7" height="7" title="Remove"
bottom="10%" src="jqe13/image/delete_s.PNG">
</ul>
</div>
<div class="em-mdimage">
<img class="mail" src=" http://localhost:8080/weather
/servlets.ImgDisplayServlet?id=D:\EML\workspace\assets\tried-
imgs\15__1882_IMG_5731_341_137.png " alt="imagecontainer image" style="max-
height:100%; max-width:100%;">
<ul>
<img id="em-delete" class="removeicon" width="7" height="7" title="Remove"
bottom="10%" src="jqe13/image/delete_s.PNG">
</ul>
</div>
</div>
</div>
</div>
<div class="em-bottom" align="center">
<input id="SEND" type="button" value="send" name="">
<input id="CANCEL" type="button" value="cancel" name="">
</div>
</div>
</div>
the above code is running html code for mailing including image sources.i am attaching 3 images
to the class="em-mdimage".can any one help me for getting all 3 images path(like D:\EML
\workspace\assets\tried-imgs\18__1882_IMG_5731_203_173.png ) using jquery .then i will send
those 3 paths to my servlet when click on "send" button.
I am new to jquery.I tried some selectors but i didn't get those paths.
Thanks in advance.
You cannot get the system file path (e.g., D:\EML\workspace\assets\tried-imgs\18__1882_IMG_5731_203_173.png)
The browser does not have access to your local file system and it goes without saying that JavaScript does not have access to the remote file system, too.
You can just get the image src attributes
$("img").each(function(){
console.log($(this).attr("src"));
});
This will work for you,
alert( $('img')[0].src );

Categories