Professional Website Development:
Website Design, Development and Promotion
Do you want a cheap website?
Perhaps, based on a free content management system (CMS), overloaded with controls, settings and options you will never ever use?
Limited to the availability of add-ons and plugins which rarely fit your needs out of a box?
Well, you should try searching for other people who may be interested in this kind of a job.
At Site-o-Matic we like to do stylish high quality bespoke websites, fully tailored to your needs and desires.
Have a look at our previous works and decide for yourself if you want us to do your website.
Ajax Image Upload
In this article I will describe the process of uploading images (or any files) to the server without having to refresh the page and how to change the page dynamically, when the file upload finishes.
First of all, it is not really Ajax. You don’t use JavaScript or XML to upload the image. You do use JavaScript and, possibly, XML, to parse server’s response.
The theory is simple – you create an iframe and direct your form submission to this iframe. The trick is that you move this iframe off the screen so the visitor does not see it.
Once you submit your form (with the file attachment), JavaScript will wait until your hidden iframe loads up with the server response. Depending on the response, JavaScript will update the page dynamically.
So, to demonstrate Ajax image upload we need:
-
HTML form to submit the image
-
Simple PHP script to process the image submission and respond
-
jQuery JavaScript library to react to submission and to server response
First of all, make sure you have imported jQuery library. You can either download jQuery and use it as local resource:
<script type="text/javascript" src="jquery.js"></script>
or you can link to the remote resource which will always be the latest version:
<script type="text/javascript" src="http://site-o-matic.net/js/lib/jquery.js"></script>
Next what we need is the HTML form:
<div id='ajax_upload_demo'>
<form id='image upload_form' method='post' enctype='multipart/form-data' action='add_avatar.php' target='upload_to'>
<p>Upload avatar</p>
<p><img src='avatar_no.jpg' /></p>
<p><input type='file' id='file_browse' name='image' /> <input type='submit' value='Submit'></p>
</form>
<iframe name='upload_to'>
</iframe>
</div>
Now we need to style it a little, so the iframe can't be seen by the visitor:
<style>
div#ajax_upload_demo iframe {
position:fixed;
left:-9000px;
width:1px;
height:1px;
}
div#ajax_upload_demo img {
max-width:150px;
max-height:150px;
}
</style>
Now we need to add some JavaScript:
<script type='text/javascript'>
$(document).ready(function(){
$('#image_upload_form').submit(function(){
$('div#ajax_upload_demo img').attr('src','loading.gif');
});
$('iframe[name=upload_to]').load(function(){
var result = $(this).contents().text();
if(result !=''){
if (result == 'Err:big'){
$('div#ajax_upload_demo img').attr('src','avatar_big.jpg');
}
if (result == 'Err:format'){
$('div#ajax_upload_demo img').attr('src','avatar_invalid.jpg');
}
$('div#ajax_upload_demo img').attr('src',$(this).contents().text());
}
});
});
</script>
In bold you can see some file names you could change.
This script does two things:
-
When the form is submitted (upload starts) it changes image to 'loading' image to respond to the user.
-
When upload is completed and PHP script put some feedback into the iframe, JavaScript will update the image accordingly - either display an error image or display the image uploaded.
And here is what we got after we combine all of the above together
Ajax Image Upload Example
Download a stand-alone ajax image upload demo.
Hope you have enjoyed this tutorial!
How to Style Input and File Browse Buttons with CSS
When you get to style a website you often want to customize the looks of buttons on your input...
TinEye - Search the Web by Image the Same Way You Search Google by Text
Imagine you have a thumbnail of a very nice image. This thumbnail is small and probably quite low on quality. It's named something like x87z87bsxz9.jpg and you have totally no idea how to even...
Potential Problems of PHPBB3 Forum Indexation
Some time ago an acquaintance of mine has approached me and asked if I could fix their forum (let's call it X) indexation issues. Having no real experience back then I replied, that I can try,...
Wery good script
19 November 2011 18:25
Unfortunately the stand alone script does not work. The Javascript function always reports it get back either a NULL or an empty string value at :
$('iframe[name=upload_to]').load(function(){
var result = $(this).contents().text();
.. so that text result is empty. This means there can be no link to the uploaded image, although it did upload. Saddly that's only half the story and I can't figure out how to fix it. Nice try though :(
20 November 2011 01:54
Thank you!
I have checked and indeed the demo was not working. Turns out that the jQuery resource to which it was linking (hosted by some Google resource) was updated some time ago and since then the function which jQuery relied upon to get contents of an iframe was not working.
Basically, jQuery imported by the demo, was broken.
I have corrected the article and the demo archive to link to the same jQuery instance as used by the website here, so now it all works again. Feel free to download the updated archive or change the jQuery link yourself.
Thanks for pointing the problem out again.
20 March 2012 19:29
Great script! Working well. Thank you!
I am having trouble pointing it to the correct file on my server. Any hints!
Thanks again!
20 March 2012 19:35
Can you give more information? What exactly you are trying to do and how?
20 March 2012 20:32
Thank you, Eugene!
I am just trying to point the php script to a specific folder on my server--- âimagesâ This folder would be public_html/images
I am unsure of how to specify the path to this folder or exactly which lines I need to change.
Eugene, what type of security issues do I need to address with this uploader? I do not want to compromise the security of my site.
Thanks so much for your time!
20 March 2012 20:44
Well, the only thing going on there is a user submitting an image and then this image being saved on the server and printed to the screen.
I would not say there is much security involved here.
If the add_avatar.php is in the root (public_html/) then you need to change this line (13):
$path = "/";
It should be: $path = "images/";
I have done it quite a while back, so I might be wrong. But try it.
Also, you need to make sure that write permissions are granted for php for the images folder. If the server is Apache, the attributes for the images folder should be 777
20 March 2012 20:56
Thanks!
Yes, I did exactly what you have here. And I also checked that the permissions were correct. Iâll try again. Iâll let you know if I am successful!
20 March 2012 21:14
Well--for some reason it just wonât see that file. Iâll keep trying!
24 March 2012 09:26
Can we get value of any textbox using the code of image upload with image .if yes then hoe thanks in advance.
24 March 2012 11:19
Pushpendra, what exactly do you need it to do?
Do you mean you want to get contents of an iframe?
Name:
Your comment: