Is there any way to take an image from src of img tag and store it in a PHP variable.
<img src="image.jpg" id="crop"/>
somehow extract src and store in $image of php
Assume I am not aware of src value before hand.
Thanks please help.
Your problem is not very clear ....
If after cropping your image you want to get src and store it in DB or whatever
you can simply got this with jQuery
for example
<img src='abc.png' class='myimg'>
<input type='hidden' class='myimg_name_holder'>
then with jQuery
$(".myimg_name_holder").val($(".myimg").attr('src'));
Now you have your image name in a hidden input field now you can do whatever you want whether save in db or whatever....
Related
I am trying to upload a file a view the file on an iFrame but it is not working.
Here is what I have tried
jQuery('.file_upload1').change(function(){ jQuery('iframe').attr('src', jQuery(this).val()); $('iframe').attr('src', $('iframe').attr('src')); });
<label><input class="file_upload1" name="file_cover" type="file"></label>
<div>
<iframe src=""></iframe>
</div>
If this does not work, can I move the uploaded file to server directory so that the path becomes valid? How would I do this?
Apart from other problems and limitations of such solution, and specifically answering "why it does not work?" question:
The change event needs to be nested in ready function:
jQuery("document").ready(function() {
jQuery('.file_upload1').change(function() {
jQuery('iframe').attr('src', jQuery(this).val());
});
});
The src attribute of iframe must be a valid non-empty URL potentially surrounded by spaces. When selecting a file with input type file, in Windows the value will be something like c:\fakepath\file name goes.here, so before using as iframe source, you will have to rework it a little bit.
Regarding
I'm trying upload file and display it on iframe forcing it to reload
You don't need to force reload to achieve this. "Upload" means the page will be reloaded (well, unless upload is handled using AJAX, but it's not the case here I guess). In order to upload a file, the form must be submitted and the page needs to be reloaded. Once reloaded, you can easily construct the full path of the file and use it in iframe, something like:
<iframe src="<?php echo $file_full_url; ?>"></iframe>
But if you want to preview the file in iframe before uploading to server - it won't be possible due to security reasons. See this question for reference: How to get full path of selected file on change of <input type=‘file’> using javascript, jquery-ajax?
I am using a scanner API to scan images in my web application, its running well. But its create an image to view with src coded likes this:
<img src="data:image/jpeg;base64,/9j/4AAQS....">
I want to upload this image using my simple code witch post (input file) to PHP file in ajax by element id
<input type="file" >
So how can I convert this img element to (input file) element, or how can I post and upload this coded src
Thanx
I have a toggle button next to each recipes on my website.
I have images in my database that I'd like to display. Each toggle button would display a different image.
How can i retrieve the image path dynamically ?
Should I had some php to my CSS or should I add something else to the Jquery code?
<div class="toggle" id="image<?php echo $recipe_id ?>"></div>
jQuery:
<script>
$(document).ready(function(){
var $content = $(".content").hide();
$(".toggle").on("click", function(e){
$(this).toggleClass("expanded");
$(this).siblings('.content').toggle();
});
});
</script>
CSS:
.toggle {
background:url(/images/muffin.png) }
Right now, all the toggle buttons display the same dummy image (muffin.png).
Well there are a few ways to do this. You could echo out the path to the image while the page is being parsed in PHP, or you could use Ajax to connect to PHP, figure and the path and spit it back o JavaScript, where you could append the image tag to the DOM.
I would recommend using the later method, as it is more correct in my opinion. I see you are echoing $image_id. Try to do
<img href="<?php echo $image_path; ?>">
and let me know if that works. If not, can you specify the table name and column name where the image path is stored? Also are you using any PHP frameworks?
To list the recipes from your database you probably have a query like this somewhere:
SELECT * FROM recipes
And after that your PHP script probably loops through the results of this query.
If this is the case, just make sure the query selects the path to the image, then do something like this:
<div class="toggle" id="image<?php echo $recipe_id ?>" style="background:url(<?php echo $query_result["image_path"] ?>)"></div>
If this is not the case, you can execute a query to get the image paths for each recipe individually:
SELECT image_path FROM recipes WHERE recipe_id=$recipe_id
Then use the result from this query.
I have a script to upload an image and display it. When i choose an image and click upload, it doesn't update the current image, but if i press f5 it will change the current image... thank you very much in advance. im just new in php.
<br><br><input type='submit' name=save value=save onClick='alert(\"Profile Updated!\")'><input type='hidden' name='id' value=$id>";
your browser is probably reusing the cached image, the best way to fix this is to add a unique tag at the end of the image url e.g.
in php i would generally have some kind of helper to do this e.g(very basic):
**
function image_tag($url,$attrs){
$id = abs((int)(microtime(true)*1000)) ); //bit overkill
return '<img src="'.$url.'?'.$id.'" '.$attrs.' />';
}
echo image_tag('some_url.jpeg',' class="my_image_class" ');
**
if you are updating the image with javascript try do something like the following:
**$('#some_img').attr('src',some_url+'?'+(+new Date()));**
should do the trick
can you display image like ??
if yes then you have to append time() so it will loaded properly for example display image like ">
if you just upload image using AJAX then get back image data and fill in to image object.
Here you use profile.php page for upload image so after that you have to redirect that page or reload.
for example after upload image put code header('location:index.php?msg=imageuploaded');
i am currently working on a class that generates diagrams as pictures with php. I want to load these pictures dynamically with jquery. How can i do that?? I wont have a real picture file, just the content of the file when i call it with ajax... And i cant simply define the php script as the src because i need to pass Post parameters to the picture...
EDIT:
Okay.. I think i have to explain it a bit further...
Here is the html code:
<div>
<img id="image" />
</div>
<input type="button" onclick="loadPicture();" />
When the button is pressed, some data should be send to the php script that generates the picture. A Callback function or something similar should now post the picture into the img- element.
Simply posting the Picture into the img tag doesnt work. The following code would work, but how can i add POST params??
<img src="<scriptname>.php" />
Http POST requests aren't meant to return resources. Why don't you use a GET request? The 'REST' way to do it will be to create the image with a POST request and then load it with a GET request. You need to define a URL mapping for your resources.
No people! You basically have 3 options as I see it.
Method 1 - Inline the image
Do what Brayn said, but data should be a base64 encoding of your image.
$("#div").html(data); // instead of this
$('#image').attr('src','data:image/gif;base64,'+data); // try something like this
But I don't like the idea of inlining the image or passing post data. Base64 might get a bit large for big images too.
Method 2 - Save the image
You can $.post the data like before, then save the image, and return the URL of the image.
Method 3 - Use GET
Modify your image-generating script to accept GET data. If you have a lot of data to pass, try compressing it somehow, or perhaps you can use SESSION variables.
I'm not very sure if I got it right from what you said but you could use the $.post() method that would return whatever you need through its callback. Something like this:
$.post("file.php",{param: val},function(data){
$("#div").html(data);
})
If you could explain further maybe we'll understand better. Hope this helps.
Is there any actual need to use AJAX / jQuery? Or are you simply putting it in because it's cool?
Here's what I would do:
if (isset($_POST['createImage'])){
// This means that the button was clicked
// Generate your image, and then display it:
}
// Regardless, you would now show your form
// That way if values were to be changed, the graphic can be recalculated.
This way, you achieve your desired output (the graphic loading depending on the form output) and a single click to generate that output.