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');
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'm trying to get a dynamic image file to refresh every 20 seconds or so, preferably with JQuery/JS but I am open to any suggestions.
The image is a Twitch.tv .php file that dynamically changes from ONLINE to OFFLINE depending on if the streamer is currently broadcasting or not. The problem is that the images don't update sometimes without a slew of browser refreshes, and sometimes they won't update at all until I clear the cache.
The website I'm trying to do this on is http://www.team-omen.com/content.php
You will see in the center a module called OmenTV which has several of these images and I would like to have these automatically update so users don't have to refresh the page to see if the streamer has started broadcasting or not.
This is from the status.php file which determines which .png to display...
<?php
header('content-type: image/png');
$stream = $_GET['stream'];
$json_file = #file_get_contents("http://api.justin.tv/api/stream/list.json?channel={$stream}", 0, null, null);
$json_array = json_decode($json_file, true);
if ($json_array[0]['name'] == "live_user_{$stream}") {
echo file_get_contents("online.png");
}else{
echo file_get_contents("offline.png");
}
?>
And here is the section of the HTML file that displays the images
<div align="center" id="streamers">
<div id="omentoggle" class="streamer">
Team Omen
<br />
<img src="http://www.team-omen.com/status/streamstatus.php?stream=teamomen" class="status" id="status_teamomen" />
</div>
<div id="briantitantoggle" class="streamer">
BrianTitan
<br />
<img src="http://www.team-omen.com/status/streamstatus.php?stream=o_briantitan" class="status" id="status_briantitan"/>
</div>
</div>
...and so on
Can someone give me an example of how to get this to work, say the image in question has an ID of #status_teamomen ?
Thanks in advance
You can use setInterval function in JavaScript to update the image source periodically:
setInterval(function() {
var cache_buster = Math.random();
document.getElementById("status_teamomen").src = "http://www.team-omen.com/status/streamstatus.php?stream=teamomen&cache_buster=" + cache_buster;
}, 20000);
Note the use of a cache buster querystring parameter to generate a unique URL on each request, which will bypass any browser caching of the dynamically generated images.
For the cache problem you could add a random piece in the url so the url is different each time and the image wont get cached by the browser.
See the answer here:
Multiple GD images per page
I have an upload page in my codeigniter app and when i upload an image and click submit it redirects to a page called 'upload_success' i want to show the image you just uploaded on that page.
How can i do that?
I used
<script language="javascript">
function reload(){window.location.reload();}
</script>
but then it uploads the image two times.
NOTE: i am using Ci's file uploader class.
See CI's File Uploading Class.
If going by their controller example, on success this code is executed:
$data = array('upload_data' => $this->upload->data());
$this->load->view('upload_success', $data);
The image information is in the $data passed to the view, so in the upload_success view, you need to set something like:
<img src="http://mysite.com/path/to/uploads/<?php echo $upload_data['file_name']; ?>" />
Is upload_success also the page that does the upload? because if it is then that is bad architecture because every time user refreshes that page the image will be uploaded again and again.
What you need to do is, on form submit call a script like image_upload which only does the upload then redirects to upload_success which shows message (success/failure) and in that page add an <img> tag which has its src set to the previously uploaded image.
I have this AJAX search functionality that searches through a list of files in a table and then updates the results according to the user's input. Now, I have a download button(which is an image) next to the file name in the table that enables the user to download the file. The problem is that when the AJAX call returns it is simply refusing to display the image. I don't know if i have a syntax error or if that is simply just not feasible. Code is here:
echo "<tr>
<td class='tlong'>".$state['title']."</td>
<td style='font-size:11px;' class=''>".$state['filesize']."
<a style='padding-left:px;' href='../downloads/".$state["filename"]."'><img src='../images/footer/downloadImage.png' alt='' style='width:10px;height:10px;'/></a>
</td>
</tr>";
}
This is the code inside the AJAX method. Im first pulling the title from the database, then the file size, then its supposed to show the image which enables the user to download that file next to it. But the image just doesnt show. It is however putting the alt text when I specify one. Any ideas peeps?
Check The path of image's src and the page that run the AJAX request. In other word, does the image rendered properly if you directly inserted it into that page?
// In the page that run AJAX
<img src='../images/footer/downloadImage.png' />
Suppose the following directory structure:
request.html
js/ajax_target.html
js/imgs/downloadImage.png
if the downloadImage is going to be rendered in ajax_target.html its src would be imgs/downloadImage.png, but if it would be rendered from request.html it should be js/imgs/downloadImage.png
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.