“Image Upload” Omid Samadbin in P30vel.ir

---

“Image Upload”

---

Table of Contents

1. HTML Structure
2. CSS Files and Structure
3. JavaScript
4. PSD Files
5. PHP Code Explanation
6. SQL File
7. Integration
8. Sources and Credits

---

A) HTML Structure - top

This script theme is a fixed layout with one column. All of the information is nested within a div with an id of "content". The general template structure is the same throughout the template. Here is the general structure.

If you would like to edit the color, font, or style of any elements in one of these columns, you would do the following:

body { background-color: #31373d;  padding:0; margin:20px 0; color:#333; font-size: 12px;
line-height: 18px; font-family:Verdana, Tahoma,  Arial, Helvetica, sans-serif;
}

If you find that your new style is not overriding, it is most likely because of a specificity problem. Scroll down in your CSS file and make sure that there isn't a similar style that has more weight.

I.E.

#content { background-color:#FFF; width:570px; padding:15px; margin:0;
position:relative; margin:auto; }

So, to ensure that your new styles are applied, make sure that they carry enough "weight" and that there isn't a style lower in the CSS file that is being applied after yours.

---

B) CSS Files and Structure - top

I'm using one CSS file. This file also contains some general styling, such as anchor tag colors, font-sizes, etc. Keep in mind, that these values might be overridden somewhere else in the file.

The second file contains all of the specific stylings for the page. The file is separated into sections using:

/* reset */
img { border: 0px; }

/* content */
#content { background-color:#FFF; width:570px; padding:15px; margin:0;
position:relative; margin:auto; }
	
/* corners */
.corners { -moz-border-radius:8px; -webkit-border-radius:8px; border-radius: 8px; }
	
	etc, etc. 

If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.

---

C) JavaScript - top

This script imports one Javascript file.

1. Ajax - ajax.js

1. Used to send and receive data information from upload.php

javascript configuration lines

var get_url = 'upload.php';// php file
	var div_id = 'upload_area';// div id where to show uploaded image
	var show_loading = '<img src="img/loading.gif" />';// loading image
	var html_error = '<img src="img/error.png" />';// error image

---

D) PSD Files - top

I've included one psd:

1. The main layout - image_upload.psd

---

E) PHP Files - top

Database connection, the file with connection details is db.inc.php Fill here with your information.

<?php
$username = "name";
$password = "password";
$hostname = "localhost";
$database = "database";


mysql_connect($hostname, $username, $password) or die(mysql_error());
mysql_select_db($database) or die(mysql_error(());
?>

In are a few lines to edit in upload.php.

$script_location = "http://demo.zmeutz.com/image_upload/"; // location fo the script
$maxlimit = 1048576; // maxim image limit
$folder = "images"; // folder where to save images

// requirements
$minwidth = 105; // minim width
$minheight = 105; // minim height
$maxwidth = 1280; // maxim width
$maxheight = 1024; // maxim height

// allowed extensions
$extensions = array('.png', '.gif', '.jpg', '.jpeg','.PNG', '.GIF', '.JPG', '.JPEG');

...

// resize image uploaded image to: 400 x 400
$newwidth = 400;
$newheight = ($height/$width)*400;

// create thumbnail image - resize to 105 x 105
$newheight = 105;
$newwidth = 105;

!!! IMPORTANT !!!
CHMOD 777 "images/" folder

---

F) SQL File - top

I've used one SQL database file with one table(user_submit) and 5 fields.

CREATE TABLE IF NOT EXISTS `image_upload` (
  `id` int(11) NOT NULL auto_increment,
  `image` text NOT NULL,
  `thumbnail` text NOT NULL,
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;

• id - unique filed id
• image - image name
• thumbnail - image thumbnail name

---

G) Integration - top

You need to insert this javascript line in <head> </head> of your page

<script type="text/javascript" src="js/ajax.js"></script>

now the form and the div where results will be loaded from index.html in <body> </body>

	  <form action="upload.php" method="post" name="image_upload" id="image_upload" enctype="multipart/form-data">
		<input type="file" size="75" name="uploadfile" id="uploadfile" class="file margin_5_0" onchange="ajaxUpload(this.form);" />
			<div id="upload_area" class="corners align_center">
            	please select image
			</div>

     </form>

FILE STRUCTURE

images/ <- CHMOD TO 777, here images will be uploaded
img/error.png
img/loading.gif
inc/db.inc.php
index.html
upload.php

---

H) Sources and Credits - top

I've used the following images, icons or other files as listed.

• Icons from http://pixel-mixer.com/

---

Once again, thank you so much for purchasing. As I said at the beginning, I'd be glad to help you if you have any questions relating to this. No guarantees, but I'll do my best to assist. If you have a more general question relating to the scripts on Codecanyon, you might consider visiting the forums and asking your question in the "Item Discussion" section.

Stefan Carcu

Go To Table of Contents

---