|
|
|
|
Image Uploading With Auto Thumbnails Using PHP
All copyrights reserved 2008 Zeronese, Inc.©
At many times, simple tasks might appear to be very complicated to
accomplish. This might be because the task in hand is so important to us, so
important to the extent that we cannot think that it can be important as much
and simple at the same time. Uploading images using php is very simple and important at
the same time. In many scenarios you cannot escape uploading images when you
develop a php script.
Preparation
Create the directory that you want to store your uploaded images in, also, if
you want the thumbnails that we are going to create for the images to be stored
in a different directory, create a thumbnails directory. A sub-directory in the
images directory would be a good idea. Give both directories write permissions.
If you are on Linux, chmod 777 will do the trick.
Now create a php file that will upload your images and get to work. I will
name mine uploader.php
The Form
If you know a little about php, you know that forms in php are simply
html forms. If you don't, now you do.
For our purpose, we need a simple form with a field to locate the image to be
uploaded and a button that will post our command to upload images. Your form
should look something like this.
The form does not look fancy and neither does the
form html code.
Let me highlight the important codes so you can
understand what is happening:
a- action="uploader.php": The action
tag of the form tells the form which file processes the form when submitted. In
our case the file is uploader.php.
b- enctype="multipart/form-data": To avoid
technical definitions, the enctype="multipart/form-data" tells the form that is
going to upload files. With out this tag, the form will not upload your
images. If you insist on technical definitions, then
click
here.
c- We are going to use the MAX_FILE_SIZE hidden field to limit
the size of the uploaded image, if the size of the image exceeds the
MAX_FILE_SIZE an error will be returned. This could be useful to avoid
too large files, not to mention that some hosts has upload limits.
d- type="file": This is the field that will
help you locate the image to upload. Once you have an input field of
type="file", you get a textbox field and a bonus browse button to locate
the file to be uploaded.
e- Of course, <input type="submit" value="Upload Image">
is the button that will submit the form for processing.
The Code
Our plan is to upload images, create thumbnails for the uploaded images
and have a way of seeing the images that we have uploaded.
I will start with coding the function that will create the thumbnails for me.
The thumbnail is nothing but a smaller version of the large image. Knowing that
I am storing my thumbnails in a different than the large images directory, and
by re-reading the previous sentence, I know that I have three parameters
for my create_thumbnail function. Namely, the
source image, the destination thumbnail, and thumbnail size; size is width
and height, I will ask for the width and deduce the height to keep
proportionality. If you don't agree, you can take both height and width and save
a little calculations.
So lets write our create_thumbnail
function:
The functions in blue are all php functions, you can go to the
www.php.net and see details of each one. Also
you can check the one that works with your version of php. You can even find
sample codes that is similar to this function and might suite your needs more.
The get_image_extension($image) is a function that we
will have to write to see the type of image that we are dealing with.
get_image_extension($name), is a simple function that works by going though the
name which is a string type, when it hits a dot, it starts recording everything
after the dot and then the result is returned, which of course is the file
extension (the image extension in our case.
One more thing that we have to decide on is how to
deal with duplicate images. Among the many options is to delete the existing
image if the uploaded image has the same name, some others give the image the
time stamp of uploading as name so to guarantee no images are duplicates.
You can do that while uploading the image, but I will write a function that will
generate a random name with my given length for the uploaded image. You can
change this function as you will and name your images the way you find
appropriate.
Now that all our functions are ready, lets get to
the real work by defining our variables:
When the user presses the 'Upload Image' button, the
$_POST will become true, so we can check by the value of
$_POST and perform action. and this is the code that does the
uploading:
Place all the php code and functions between
<?php and ?> tags, then put the html of the form below
it. Anywhere in the html where you want results to show, just add:
<?php echo $results; ?>
Test your code and enjoy. Don't forget to subscribe
to this article below to receive notifications when it get uploaded. Also if you
have any question or suggestions, please post it!.
If you are really serious about learning and
advancing in the subject of image uploading and manipulation and
a lots more of php coding techniques,
check out
our php/mysql photo gallery that ships out with all the source codes. Also
it is now offered for a very low price!
Attachments & Downloads
No attachments were found.
|
Related Articles
Visitor Comments
-
Comment #1 (Posted by Tutorials Room)
Tuesday November 11th, 2008 01:03:18 PM
Good Tutorial! It was chosen for the home page of http://www.tutorialsroom.com
-
Comment #2 (Posted by Anonymous)
Wednesday November 12th, 2008 04:15:19 PM
Nice tutorial, too bad to use it I have to type everything .
-
Comment #3 (Posted by Hassan Sayed)
Wednesday November 12th, 2008 05:46:47 PM
Thats how you learn!
Otherwise, pay the typist :))
-
Comment #4 (Posted by Raghav)
Tuesday November 18th, 2008 12:36:10 AM
hi,i have a problem with uploading images into the database.Whenever i upload the image through manual like mysql, that time it works fine but whenever i upload through browser , it will not display any images( instead of print an image it is printing Array). so please help me ..............
thanks in advance
-
Comment #5 (Posted by Hassan Sayed)
Tuesday November 18th, 2008 12:51:08 AM
I removed the code that you posted becuase it is too long and is not related to the subject of this tutorial.
This tutorial shows you how to upload and sotre the images into a folder not mysql.
I still advice and recommend to store images in a folder for many reaons such as speed and size of database, however, I will look into your code and see what can be done to help you.
-
Comment #6 (Posted by Anonymous)
Wednesday November 26th, 2008 03:53:14 AM
I'd agree with anonymous on how it is too bad that you used images to display the code. It's very hard to read the big chunks because of the image quality. This is probably due to cropping. Perhaps you can capture slimmer lines of code so that it can all be displayed full size on the page.
Aside from that, nice and simple tut. Good job.
-
Comment #7 (Posted by www.amranmozumder.co.cc)
Thursday November 27th, 2008 04:19:35 AM
Comment #5 :
"This tutorial shows you how to upload and sotre the images into a folder not mysql. "
now tell me how to i show image in a webpage from this folder.
help me plz
-
Comment #8 (Posted by Hassan Sayed)
Thursday November 27th, 2008 12:20:51 PM
Simply use the image html tag:
echo ‘<img src="/imazges /yourimage.gif"/>’;
Now if you insist on using mysql, you can store the name of the image in a mysql table to call later. Maybe something like:
After:
$rersults = “Images Has Been Uploaded!”;
You would add something like:
$query = “insert into images_table (name) values (‘”.$random_name.”’);
$query_result = mysql_query($query);
When you need the image, you can call it from mysql. The table could contain any other information, such as a product id or anything that the image relates too. To relate the image to a product, you would use a where statement…
Also, note that the $random_name we are creating in the tutorial is nothing but a name. You can create your own method to identify images.
There are many techniques and many different situations, I hope this gives you a hint on where to start.
Good Luck :)
-
Comment #9 (Posted by Kai)
Thursday January 1st, 2009 05:28:01 AM
As cool as this sounds and I'd love to mess with this I don't feel like typeing all that out, the small type of the images and the fuzzyness is hard on my eyes and makes them water after a while.
and the comment about tyeing it out is "how you learn" no.. not hardly, looking at what someone else has typed out and having to retype it don't help you learn PHP and what all the functions mean. Just "heres a script, heres what it does when done, now type it" No different then "heres a story, theres the text, type it" If you could learn PHP just by typing out someone elses code, I wouldn't have had to go to collage for my degree in web design. :P
-
Comment #10 (Posted by Hassan Sayed)
Thursday January 1st, 2009 02:00:38 PM
I am sorry the images of the code are making your eyes water, as much as I understand where you are coming from, you must also understand what we go through to make these tutorials educational and useful.
Learning is a procedure, and I don’t agree that you don’t type code at college. If at college you don’t do your projects and don’t test and debug code, you definitely don’t learn programming; although you might become a pro in copy-paste.
We have tried before to put the code without including it in images and the next day we find it all over the web with people claiming it without any respect to the source.
The tutorial educates you on how to find your way to upload images and resize them. If you insist you need the code as is, we don’t think $1.49 is too much to pay. Xeroxing a project sometimes cost you more!
This is a tutorial, if you need the script code; it is available for download for a fee of $1.49. The link is just at the end of the tutorial.
By the way, when it comes to stories, you read it and you study it. If you are a student, you are tested on it; you will need to type a lot of answers and papers to prove you have learned what you studied.
Good luck in your studies :)
-
Comment #11 (Posted by b4ckd00r1)
Thursday January 1st, 2009 05:16:16 PM
i get this error message:
Fatal error: Call to undefined function get_image_extension() fotoupload.php on line 128
-
Comment #12 (Posted by Hassan Sayed)
Thursday January 1st, 2009 06:00:40 PM
get_image_extension() is not a php function, it is a function that you will have to write.
It is found in the tutorial, it looks like you over read it :)
-
Comment #13 (Posted by .iNet)
Sunday January 11th, 2009 12:00:42 PM
Great tut will use this for my new custom imghost soon on http://nowgfx.com
-
Comment #14 (Posted by stefan)
Sunday January 18th, 2009 08:24:41 AM
great tutorial... thanks a lot... but can you explain to me more about folder permission and chmod...
-
Comment #15 (Posted by Hassan Sayed)
Sunday January 18th, 2009 05:17:27 PM
In short, “chmod” is the abbreviation for “change mode” and you use it to refer to changing permissions for folders and files on your server. The permission could be write, read and execute.
For the purpose of this tutorial, uploading images and creating the thumbnails you need to give write permissions on the folder where you are storing your images and thumbnails. This way the script will be able to write the new images uploaded and create the needed thumbnails.
There are many ways to change permissions on folders and files, this depends on the software you use to create and modify your folders and files. For example, if you are using fileZilla, you simply right click the folder in question and click “File attributes” to change the permissions. In most cases, you right click the folder and find something similar to “File attributes” such as “Set permissions” that is used by Dreamweaver.
Good luck, Stefan and all :)
-
Comment #16 (Posted by jett)
Sunday February 8th, 2009 03:20:22 PM
Hi
I got this when run your code. I confirm the directory exist and my PHP version support that as on phpinfo.
I can see one image on the thumb directory, but then it blank!!
Warning: getimagesize(imag/image-CLP9F8KXSJ3UE8Y.gif) [function.getimagesize]: failed to open stream: No such file or directory in C:\xampp\htdocs\xampp\lab\uploader.php on line 3
Warning: imagecreatefromgif(imag/image-CLP9F8KXSJ3UE8Y.gif) [function.imagecreatefromgif]: failed to open stream: No such file or directory in C:\xampp\htdocs\xampp\lab\uploader.php on line 23
Warning: imagecopyresampled(): supplied argument is not a valid Image resource in C:\xampp\htdocs\xampp\lab\uploader.php on line 27
-
Comment #17 (Posted by Hassan Sayed)
Sunday February 8th, 2009 03:34:51 PM
I don't know, but i see that you are missing an (e) in the directory name, you have imag instead of image!
Check it, maybe that helps.
-
Comment #18 (Posted by jett)
Monday February 9th, 2009 12:21:31 PM
Nope..i purposely name the folder to imag.. try to use image before but same error appeared
-
Comment #19 (Posted by Jett)
Monday February 9th, 2009 10:52:42 PM
Hassan
the error gone after i remove image\ folder.. the original file store at root folder. whenever i put directory on the $image_location = "";..
then the error will appear..what wrong with the code??
-
Comment #20 (Posted by Hassan Sayed)
Tuesday February 10th, 2009 09:15:40 AM
Jett,
I don't think anything is wrong with code.
I think you are using a windows setup for php, and for the script to find the paths in windows it will depend a lot on your settings in the php.ini
You need to research that.
I tested the code again, it is working for me on both linux and windows!
Let me know if this help.
I will try to change my settings to generate the code and let you know if i get to the solution.
Also, you might want to check the permissions on the folder where you are uploading the images.
One more thing, try this: put a test.php file in the images folder, and try to include the file from the uploader. does this work or does it give you an error??
Let me know
Good Luck
-
Comment #21 (Posted by Vongsi)
Monday March 2nd, 2009 03:36:20 PM
thanks very much for this post ...
-
Comment #22 (Posted by www.drie-elf.be)
Monday April 6th, 2009 11:59:52 AM
Can someone help me with this:
Warning: imagecopyresampled(): supplied argument is not a valid Image resource
code:
imagecopyresampled($new_image,$image,0,0,$x,$y,$thumb_width,$thumb_width,$width,$height);
Tried a lot, can't find the solution.
Thanx
-
Comment #23 (Posted by Hassan Sayed)
Monday April 6th, 2009 01:54:04 PM
Most likely you do not have the $image_location and $thumbs_location setup right.
Check that out.
Good luck.
-
Comment #24 (Posted by Ikkitousen)
Thursday April 9th, 2009 05:51:39 AM
The part where
$copy = @copy($_FILES['image']['tmp_name'], $image_location.$image_random_name);
is read by my PHP engine, it returns as nill (i.e completely dies and does not proceed afterwards)
Every other bit of code is identical to yours and I mean identical in layout and everything. Any hints on what could be causing this?
(((PS. The guy whining and bragging about having a degree in webdesign should really learn to lie a bit better as web design is mostly about CSS and X/HTML styling along with Photoshop, Flash and similar tools.
Web programming, as PHP is part of, would be a better lie to slash out to shield yourself from being proven wrong.
Or I dare you to send me the phone number to the professor so I may ask him what he is made of.)))
-
Comment #25 (Posted by Hassan Sayed)
Thursday April 9th, 2009 09:27:01 AM
did you create the folders images and images/thumbs/ and set write permissions???
-
Comment #26 (Posted by Alex)
Friday April 24th, 2009 03:33:02 PM
Hi Hassan.
How can i loop the pictures out into a gallery, so that when a user clicks on a thumbnail it displays the correct full scale image...
-
Comment #27 (Posted by steph)
Tuesday May 26th, 2009 12:53:47 AM
when I run the code, I don't get any messages when I click on 'Upload Image'. I tried uploading a word doc and clicking upload image without browsing for a specific file to see if i would get the extension error message. I dont get it in either scenario. I double checked all of my code to make sure it aligns with yours, but still no luck...any ideas?
-
Comment #28 (Posted by Bat-Ireedui)
Thursday May 28th, 2009 10:43:33 AM
When i tried Parse error: syntax error, unexpected ']' in D:\Programs\Apache Group\Apache\htdocs\tankchid v1.0\uploader.php on line 97 is came out. Is anybody know why?
-
Comment #29 (Posted by Bat-Ireedui)
Thursday May 28th, 2009 10:50:04 AM
my bad!! i solve the problem.. thanx for this tutorial.. tnx a lot
-
Comment #30 (Posted by Hassan Sayed)
Thursday May 28th, 2009 04:58:40 PM
Alex: sorry for the delayed answer.
you can try something like this:
Under the
$result = “Image has been uploaded”;
Add
$result .= ‘<a href=”’.$images_location.$image_random_name.’”><img src=”’.$thumbs_location.$image_random_name.”’”></a>
This will show the thumbnail with a linked to the big image. You can manipulate as wanted.
Steph:
with this limited information I will just guess that you are only seeing the html and the php is not working in your testing environment. I hope you have fixed the problem.
-
Comment #31 (Posted by tek)
Saturday June 27th, 2009 03:10:13 PM
Im having an error as a previous poster
Warning: imagecopyresampled(): supplied argument is not a valid Image resource
Which you stated to check and make sure the $images_location, and $thumbs_location is set correctly.
Ive checked them repeatedly, and they are infact set correctly, yet i still have this error. i checked my server for GD support and all that, everything is supported, and i cant figure out how to get around this error. any help would be appreciated.
-
Comment #32 (Posted by Hassan Sayed)
Saturday June 27th, 2009 04:13:42 PM
i cannot analyze your problem if it is not the location. my second guess would be the case sensitivity of your server. check that your image extension is in lower case.
make sure the image extension is in lower case and try again. let me know if that helps.
-
Comment #33 (Posted by tek)
Saturday June 27th, 2009 04:44:25 PM
Thanks for the quick reply, i did infact already check the case sensitive extensions, i only upload lowercase extensions to avoid problems, ive rechecked the code and everything seems normal, but the error persists, the only thing i can come up with is that the $destination code isnt defined from what i can see, i see that $destination is put in numerous places, but its never called, or $destination has no destination to goto? Im not saying your code is wrong, but thats the only thing i can come up with.
-
Comment #34 (Posted by Hassan Sayed)
Saturday June 27th, 2009 08:39:15 PM
i don't know how you see that the $destination is not assigned???
it is getting the $thumbs_location value!!!
i tested the code again, and it is working just fine!!!
i wish i can help... sorry
-
Comment #35 (Posted by tek)
Sunday June 28th, 2009 12:51:02 AM
I know, you've stated you tested your code many times, and it works for you. thats great, but it doesn't work for me, nor a few others that have posted, i found a similiar code like yours, and tested it, and it worked perfectly. Im not being rude, but perhaps the code your testing from your machine is NOT identicle to the tutorial posted here? its possible to make a mistake, and you should really enlarge the screenshots, if you want users to learn, and not "copy text for text" the screenshots are way to small. But in anycase, thank you for putting up such a tutorial, i know it takes time and effort to do such things.
-
Comment #36 (Posted by Hassan Sayed)
Sunday June 28th, 2009 01:30:30 AM
Thanks tek. I don’t think that you are rude just frustrated that the code is not working for you.
I do not have a problem at all to make mistakes; I do them all the time. However I assure you that the code is identical to the test code I am using. Yes, it might have not worked for some, but it worked for many others as you can tell from reading the comments. Many others also after working on the code found the problem.
I sometimes debug scripts with hundreds of files and thousands of lines of code. Many times after several hours of work, the problem could be a comma in the wrong place. That’s how code works and we have to learn to be patient and live with it.
The problem in this code could be anything. Sometimes you pay hundreds of dollars for a script and when you try to install it, you see errors. Maybe your server settings is different, maybe you miss typed something, and yes maybe something is wrong with the code. But I bet you if you keep trying you will find the solution. See, your search for the problem made you find a code that works for you.
I am always glad to help within my knowledge and capabilities…
-
Comment #37 (Posted by tek)
Sunday June 28th, 2009 01:20:13 PM
Right you are my friend, I will however continue to look over your script, because i just have to get it to work, it just one of those things i can't leave unresolved. If and when i do get it resolved, ill be sure and let you know. Keep up the great work!
-
Comment #38 (Posted by Hassan Sayed)
Sunday June 28th, 2009 02:54:45 PM
thanks, if you want send me the code that you typed for this script and maybe i can help debug it.
use the contact form here:
http://www.zeronese.net/contacts.html
-
Comment #39 (Posted by tek)
Monday June 29th, 2009 02:18:45 AM
Thanks for that, ive submitted the code via your contact form
-
Comment #40 (Posted by Hassan Sayed)
Monday June 29th, 2009 01:31:46 PM
ok, i looked at your code and i found 4 errors, when i fixed them the code worked.
1- In the create_thumbnail function you are missing this line:
$extension = get_image_extension($source);
This should be after
$new_image = imagecreatetruecolor($thumb_width,$thumb_width) or die('Cannot Inialize new GD image stream');
2-when generating a random name, you have an additional (s) in the $extension variable. so you have $extensions instead of $extension. this makes the $extensions blank becuase it is not defined. therefore you should have
$image_random_name= random_name(15).".".$extension;
instead of
$image_random_name= random_name(15).".".$extensions;
3- you missed the dollar sign for the copy variable, you have
if (!copy){
$results = "Error while uploading your image.";
}
instead of
if (!$copy){
$results = "Error while uploading your image.";
}
4- the action tag of your form points to action="uploader.php",
this is alright if the name of your file is uploader.php
you can keep it blank if you are processing the form on the same page.
when these errors were fixerd, your code worked fine.
I hope this solves your problem :)
Good Luck
-
Comment #41 (Posted by tek)
Monday June 29th, 2009 05:28:04 PM
Wow, 4 errors, guess my fingers type faster than i can process typo's, i've fixed the errors in the code and it indeed works now, Thanks for seeing me through it. all is well, and now i can impliment this into a full site, with your tutorials recognition of course, thanks again!
-
Comment #42 (Posted by fruktig.se)
Wednesday August 19th, 2009 03:11:34 PM
I would have used the pathinfo-function to get the image extension. Why make a new function when a good one already exists :)
-
Comment #43 (Posted by www.artuccino.com)
Thursday November 12th, 2009 11:30:22 AM
Hello! Thank you so much for your tutorial and code. I purchased it yesterday and I tested it an hour ago. And it worked. I think your small charge of a US$1.49 is very generous. The hours of work you have saved me is much appreciated. I've read through your comments and found you to be very patient with everyone. Thank you for your kindness.
Best wishes for your work.
Diane Challenor
-
Comment #44 (Posted by Hassan Sayed)
Thursday November 12th, 2009 11:53:18 AM
Thanks Diane, I am glad it worked for you and i appreciate your appreciation :)
-
Comment #45 (Posted by Diane Challenor)
Monday November 16th, 2009 06:14:50 PM
Hi. As mentioned in my earlier comment the script is working beautifully. I've got a request. Instead of a random file name I want to retain the original file name or give it a file name via the FORM. Would you be able to sell me that piece of code and explain to me how to paste it into the script.
-
Comment #46 (Posted by Hassan Sayed)
Monday November 16th, 2009 07:02:29 PM
no problem, let me try and help.
To retain the original filename,
Just replace
$image_random_name= random_name(15).".".$extension;
$copy = @copy($_FILES['image']['tmp_name'], $images_location.$image_random_name);
With
$keepfilename=$_FILES['image']['name'];
$copy = @copy($_FILES['image']['tmp_name'], $images_location. $keepfilename);
Then of cource after that, replace all occurrences of $image_random_name with $keepfilename
To submit a file name from the form:
Any where between the form tags (that is: <form> and </form>)
Add
Filename:<input name="myownfilename" type="text" value="" />
Now replace:
$image_random_name= random_name(15).".".$extension;
$copy = @copy($_FILES['image']['tmp_name'], $images_location.$image_random_name);
With
$myownfilename =$_POST[‘myownfilename’] .".".$extension;
$copy = @copy($_FILES['image']['tmp_name'], $images_location. $myownfilename);
Again, replace all occurrences of $image_random_name with $myownfilename
Notes: we usually use random file names or at least a random string then the file name to avoid overwriting files with the same file name. I recommend to at least use something like:
$myownfilename =time().$_POST[‘myownfilename’];
This will add the timestamp to the filename which guarantees a unique file name every time.
Hope this works for you.
-
Comment #47 (Posted by Diane Challenor)
Monday November 16th, 2009 08:03:19 PM
Thank you for your quick and generous response. After I plug in the code, I'll let you know how I go.
Best wishes for your work.
-
Comment #48 (Posted by Diane Challenor)
Monday November 16th, 2009 08:35:13 PM
Yes, it worked with the form. I had a little trouble with spaces in the $ myownfilename, however when I worked that out, it functioned well. Thank you.
-
Comment #49 (Posted by Hassan Sayed)
Monday November 16th, 2009 08:46:07 PM
You are welcome.
sorry for the space issue. i will fix that so others wont have trouble should they need it.
-
Comment #50 (Posted by Diane Challenor)
Tuesday November 17th, 2009 05:42:11 PM
What is the license arrangement for the code? I'm considering using your php image upload code on two web-sites. One is my not-for-profit eZine www.artuccino.com and the other is my first commercial website (a small, database driven recipe website) as a website developer.
-
Comment #51 (Posted by Hassan Sayed)
Tuesday November 17th, 2009 07:34:19 PM
You can use the code in this tutorial anyway you want other than posting it as is somewhere else or reselling it without notable change.
-
Comment #52 (Posted by Ruben Jonkers)
Sunday January 24th, 2010 09:14:55 AM
Hey,
thanks for the code, but I have a little problem, somehow the get_image_extension function is wrong cause with jpg png and gif it always just says that;s not any of those extensions, and thus stops uploading.
Can you help me out?
Greetings Ruben
-
Comment #53 (Posted by Hassan Sayed)
Sunday January 24th, 2010 12:25:35 PM
get_image_extension has nothing to do with evaluating the image. get_image_extension only returns the extension. so look for your error outside the function if you are sure that the get_image_extension is alright.
good luck :)
-
Comment #54 (Posted by BBK)
Saturday February 20th, 2010 08:58:09 AM
im a nube at PHP lol so my question::
need to know if all this code must be put in one page? or alot of file seperations? does it have to have specific names??
-like for the first code given file name is uploader.php then the second third etc??-
ty berry much :)
p.s. oh can you please make a php tutorial on a simple 'quiz' or 'blog' page?? thanks
-
Comment #55 (Posted by Hassan Sayed)
Thursday March 4th, 2010 08:50:11 AM
hmmmmmmmmmmm, very interesting question.
I think you should read some starting lessons on php coding and syntax, then this should be a no problem for you!
The simple answer for your questions
must be put in one page? or alot of file seperations? does it have to have specific names??
-like for the first code given file name is uploader.php then the second third etc
is NO for all of them :)
i will try to write more tutorials. thanks for the suggestion.
-
Comment #56 (Posted by Hassan SAyed)
Tuesday April 13th, 2010 10:35:32 AM
To answer many demands, this code will allow you to view a list of the images after upload.
In the same folder of your uploader.php file, create a file with the name view.php and insert the following code:
<?php
function get_image_extension($name) {
$name = strtolower($name);
$i = strrpos($name,".");
if (!$i) { return ""; }
$l = strlen($name) - $i;
$extension = substr($name,$i+1,$l);
return $extension;
}
$images = "images/thumbs/"; # Location of small images
$big = "images/"; # Location of big images
if ($handle = opendir($images)) {
$number_of_images = 0;
while (false !== ($file = readdir($handle))) {
if ($file != "." && $file != "..")
{
$image_ext = get_image_extension($file);
if ( $image_ext =="jpg" || $image_ext =="gif" || $image_ext =="png"){
$number_of_images++;
$files[] = $file;
}
} //
}//while
closedir($handle);
}
$image_list = 'There are '.$number_of_images." images.<br>";
if ($number_of_images > 0)
foreach($files as $file)
{
$image_list .= '"<a href="'.$big.$file.'"><img src="'.$images.$file.'" /></a>'."<br>";
}
echo $image_list;
?>
Go to view.php with your browser, you should be able to see a list of your images thumbnails, when you click on it you will see the big image. Feel free to play around and format it the way you would like to see it :)
-
Comment #57 (Posted by Blueblood)
Saturday May 8th, 2010 11:29:44 AM
This is very interesting tutorial.
I tried to review but i thnk i miss something. Could you review my code?
Check this : *********REMOVED********
Thanks for a great help
-
Comment #58 (Posted by Hassan Sayed)
Tuesday May 11th, 2010 08:50:13 AM
please remove the code from the internet and let us know the error you are getting here.
thanks.
-
Comment #59 (Posted by Keifer)
Monday May 31st, 2010 05:35:31 AM
Hi, thank you vey much for the lovely tutorial, i dont know weither its cause im really tired or what, but the whole script works, no errors or anything, but all the thumbnails are 100x100, Black squars, ive gone over the function multiple times and cannot figure out what is causing it, any ideas?
-
Comment #60 (Posted by Hassan Sayed)
Monday May 31st, 2010 06:37:27 PM
this might happen if you are using transparent backgrounds in your images.
-
Comment #61 (Posted by Rob)
Friday August 20th, 2010 12:58:30 AM
Just typed the entire code...as php reads from the top - down, I haven't made it thru the first function..:(..in the create_thumbnail function, I am getting a Parse error for the line:
$x = [0];
I could understand some more complex statement errors, but this one has me scratching my head...some help/guidance if you can...
-
Comment #62 (Posted by Hassan Sayed)
Friday August 20th, 2010 03:12:23 PM
the line is
$x=0;
cannot be
$x = [0];
remove the brackets, i don't know where you got them from :)
-
Comment #63 (Posted by Guest123)
Sunday September 12th, 2010 06:25:21 AM
I have a problem, when uploading it uploads the file as it should, but when it's going to create thumbnail it fails, i just get a echo of some random stuff from the image file and then the process stops i've checked my code and it should be the exact as in the tut.
-
Comment #64 (Posted by Guest123)
Sunday September 12th, 2010 01:03:26 PM
Fixed the problem with the file upload and create thumbnail (it was a typo). But now i have same prb as #59, and the background is not transparent in the files.
-
Comment #65 (Posted by Guest)
Monday September 20th, 2010 04:13:38 AM
good job
-
Comment #66 (Posted by Coral)
Tuesday October 26th, 2010 09:09:55 PM
This is a fine script, thank you for making it available to the public.
I was wondering if there was any way to control the quality of the thumbnail so it's a higher quality. If not, no worries. Many thanks.
-
Comment #67 (Posted by Hassan Sayed)
Wednesday October 27th, 2010 10:57:58 AM
The quality will depend on many issues:
- Jpg images will have better image quality when reduced in size when compared to gif.
- The quality of the original image of course plays a big role.
- The size of the original image compared to the reduced size also plays a role.
- Proportionality of the thumbnail compared to the original. You can play around with the code that generates the new height and width of the thumbnail to see how it fits your needs.
I hope this helps. Good Luck :)
-
Comment #68 (Posted by Coral)
Wednesday October 27th, 2010 04:25:22 PM
Many thanks for your reply Hassan. I was using very high-resolution photos so I hoping maybe there might be a parameter for quality. After some reading I found that imagejpeg and imagepng do have optional parameters like this. In case anyone else finds it useful, the syntax for imagejpeg is the following - imagejpeg($new_image,$destination, 100); The 100 being quality (the range is 0-100, default being 75). For imagepng, the quality paramenter deals with compression and ranges from 0-9, 0 being no compression and 9 being the highest compression (not sure what the default is). I was primarily using .jpg's so I can't confirm the effectiveness of the compression parameter on the imagepng, but using 100 for imagejpeg made a huge difference in my jpeg thumbnails. Hope someone finds that useful. Again this is a wonderful script and thanks very much for your help.
-
Comment #69 (Posted by Hassan Sayed)
Wednesday October 27th, 2010 04:29:48 PM
You are welcome Carol, and thank you very much for the tips you provided. Many will most definitely use this information.
-
Comment #70 (Posted by coldfz)
Sunday October 31st, 2010 11:06:10 AM
i cant get to make this script to work. This is the error that i am getting.
Parse error: syntax error, unexpected ';' in C:\wamp\www\testup\upload.php on line 74
This is the part of the code;
$size = filesize($_FILES['image']['tmp_name']);
While we at it, i need help on how to resize the big image to in terms of pixel width.
please help
-
Comment #71 (Posted by Hassan Sayed)
Sunday October 31st, 2010 11:55:15 AM
looks like you have a typo in your code, you might be missing a bracket close in the previous lines.
check your code and try again.
-
Comment #72 (Posted by Skonk)
Tuesday January 18th, 2011 06:18:33 AM
Great tutorial but I just thought I'd mention that if you want to upload the images to a folder which is outside of the path where the script is stored..
I.E:
root/scripts/file.php
root/images/
This requires you to use "../" in the file path which then causes the get_image_extension() function to fail because it halts on the first "." in the "../".
So to get around this i added...
$file_name = explode("/", $name);
$file_name = array_reverse($file_name);
$name = $filename[0];
...to the get_image_extension function to extract just the filename it's self from the file path.
-
Comment #73 (Posted by james n)
Saturday March 5th, 2011 02:01:49 PM
hi,
i am getting the error:
Warning: imagecopyresampled() expects parameter 2 to be resource, null given
parameter 2 is $image which is set a few lines above with $image = imagecreatefromjpeg($source) assuming the image is a jpg
i cant see what the problem is here. the main image is uploaded correctly.
thanks!
-
Comment #74 (Posted by james n)
Saturday March 5th, 2011 02:20:10 PM
so i submitted a problem about 20 mins ago, dont worry (not that i expected you would lol)
i have sorted, was a permissions problem!
-
Comment #75 (Posted by Kara)
Friday May 6th, 2011 12:12:35 PM
Hi. I am a total newbie at this whole PHP thing... I think the tutorial is what I am looking for, however I am confused on how to setup.
Which code goes into which files or are they all put into the same file?
so the sections of code listed above ie: create_thumbnail, get_image_extension, Name image function, defining variables, upload image code to $_POST - do all these parts of code get put into 1 php file or do they each get their own separate php file?
I have a form that people fill out on the web and then it takes them to a summary page at the end, where they can review their questions, and also on this page I want to insert in the option to upload 2 images and then hit submit. Once they hit submit I want the summary (with all their answers from the form) and the 2 images thumbnails that were uploaded to my server directory to be emailed to me.
So I guess my question is the HTML form code above to upload the image I get where to put on my summary page. But then the function codes that are listed above do each of these get put into a new php file? or does it all go into 1 file, which would be my summary page?
I would like the form to be processed in 1 page and not go to the uploader.php as 1 member commented above by leaving the action blank.
Any help would be appreciated!
-
Comment #76 (Posted by Hassan Sayed)
Friday May 6th, 2011 12:32:46 PM
you can have the functions and the form on the same page, just include the functions in php tags (<?php and ?>) so the server compiles them. Also, don't forget to change the action attribute of your form to empty so the form get's processed.
in this tutorial the form is on any html page and all the functions are in the uploader.php file.
-
Comment #77 (Posted by Berend)
Thursday May 19th, 2011 03:50:25 PM
I first typed the code and did not get it right, then I bought it and it works fine. I only wish that I saw the buy option before taking so much time in typing.
I am happy and need two more things,
1 auto add name to DB MYSQL and to create a second thumbnail.
2 When someone upload an image it must reduce the original image in ratio & size and then make a thumbnail.
I would really appreciate help on this and it would probably improve the power of your product even more. Thank you
-
Comment #78 (Posted by Anonymous)
Thursday September 22nd, 2011 12:01:48 PM
i have the same problem as berend
-
Comment #79 (Posted by Hassan Sayed)
Thursday September 22nd, 2011 12:08:49 PM
Berend does not have a problem :) you only want to advance with programming.
i can only recommend that you look at our php/mysql photo gallery here:
http://www.zeronese.net/webmaster-tools/php-photo-gallery/
the photo gallery has all the features you are requesting and much more.
Thank you and good luck :)
-
Comment #80 (Posted by fewse.com)
Monday January 16th, 2012 01:59:46 AM
I'm having some problems in your code, unfortunately, I have typed everything and fixed some syntax and runtime errors during the process (mis-typos on my part). But I still ended up wondering what the error is, and it seemed that I've used 'comma' instead of 'dot'.
For instance:
<code>
<pre>
create_thumbnail($images_location.$image_random_name,$thumbs_location.$imate_random_name, $thumb_width);
</pre>
</code>
... appeared as if everything was comma. The problem was the 'inconsistency' of using spaces with commas.
I would suggest you place a 'space' when using concatenation before and after the dot, and also a 'consistent' space after the comma. It's really difficult to know if it's a comma or dot when viewing the source code in an image.
Example:
<code>
<pre>
create_thumbnail($images_location . $image_random_name, $thumbs_location . $imate_random_name, $thumb_width);
</pre>
</code>
And also, I thought that it was $_FILES['name']['tap_name'], but it was just $_FILES['name']['tmp_name']. The 'm' appeared as if it was 'a'.
While I understand that using image would encourage the viewers to type the codes, however, please make sure that your image is readable enough for us to read them, otherwise, it will not be a good learning experience.
-
Comment #81 (Posted by fewse.com)
Monday January 16th, 2012 04:36:31 AM
Hi, the code finally worked! Thank you very much for this.
-
Comment #82 (Posted by Hassan Sayed)
Monday January 16th, 2012 12:04:34 PM
Great :)
|
Post a comment, a question or any related helpful information
|
|
|
Print this page
Email this page
Post a comment
Subscribe me (Subscribe to receive notification when this article is updated.)
Add to favorites
13%
