I fond a very interesting script online that is free to use and develop, and for the purposes of a client of mine, this is pretty much perfect. however the script is not finnished and i am not a php programmer (learning but a bit out my depth on this one)
the html goes like this:
<?php
if( $_POST ){
if ((($_FILES["file"]["type"] == "image/gif")
|| ($_FILES["file"]["type"] == "image/jpeg")
|| ($_FILES["file"]["type"] == "image/jpg")
|| ($_FILES["file"]["type"] == "image/png")
|| ($_FILES["file"]["type"] == "image/pjpeg"))
&& ($_FILES["file"]["size"] < 2000000))
{
if ($_FILES["file"]["error"] > 0)
{
echo "Error: " . $_FILES["file"]["error"] . "<br />";
}
else
{
$filename = str_replace(' ', '_', $_FILES["file"]["name"]);
if (file_exists("images/uploads/upload_" . $filename ))
{
echo $_FILES["file"]["name"] . " already exists. ";
}
else
{
move_uploaded_file($_FILES["file"]["tmp_name"],
"images/uploads/upload_" . $filename );
echo "<h3>The image is uploaded!</h3>";
unset ($_POST);
}
}
}
else
{
echo "Invalid file";
}
}
$files = scandir('images/uploads');
$ignore = array( 'cgi-bin', '.', '..' );
?>
<html>
<head>
<title> : Online Designer</title>
<link rel="shortcut icon" href="images/icon.png" />
<script type="text/javascript" src="assets/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="assets/functions.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#canvas").addClass('default');
});
</script>
<style type="text/css">
.default { background-image: url("images/white.jpg"); }
.item { width: 500px; height: 470px; border: 1px solid #000; float: left; margin: 20px; display: inline;}
.red { background-image: url("images/red.jpg");}
.blue { background-image: url("images/blue.jpg");}
.orange { background-image: url("images/orange.jpg");}
.white { background-image: url("images/white.jpg");}
.green { background-image: url("images/green.jpg");}
.pink { background-image: url("images/pink.jpg");}
.yellow { background-image: url("images/yellow.jpg");}
.image { max-width: 180px; margin:0 auto;display:block;margin-top:10px;}
#text {width:500px;height:20px;display:block;color:white;font-weight:bolder;text-align:center;margin-top:110px;}
.form {margin-top:10px;float:left;}
#container {width:960px;margin:0 auto;padding-top:25px;}
body {
background: url("images/color-bg.jpg") repeat-x left top;
}
</style>
</head>
<body>
<div id="container">
<div style="display:block;">
<a href="http://www.intrapopture.com/projects/tshirt/"><img alt="logo" src="images/logos.png"></a>
</div>
<div id="form" class="form"z>
<table border="0" cellspacing="5" cellpadding="5" >
<tr>
<td><label>Name</label></td>
<td><input type="text" id="d_name" name="d_name" /></td>
</tr>
<tr>
<td><label>E-Mail</label></td>
<td><input type="text" id="d_email" name="d_email" /></td>
</tr>
<tr>
<td><label>Contact</label></td>
<td><input type="text" id="d_phone" name="d_phone" /></td>
</tr>
<tr>
<td><label>Color</label></td>
<td>
<select id="d_color" name="d_color">
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="orange">Orange</option>
<option value="white">White</option>
<option value="green">Green</option>
<option value="pink">Pink</option>
<option value="yellow">Yellow</option>
</select>
</td>
</tr>
<tr>
<td><label>Text</label></td>
<td><input type="text" id="d_text" name="d_text" /></td>
</tr>
<tr>
<td><label>Image</label></td>
<td>
<select id="d_image" name="d_image" style="max-width: 150px;">
<option value="">Please choose</option>
<?php
foreach( $files as $file )
{
if(!in_array( $file, $ignore ))
{
echo '<option value=' . $file . '>' . $file . '</option>';
}
}
?>
</select>
</td>
</tr>
<tr>
<form action="" method="post" enctype="multipart/form-data">
<td><label>Upload Image</label></td>
<td><input type="file" id="file" name="file" /><input type="submit" id="upload" name="upload" value="Upload" /></td>
</form>
</tr>
<tr>
<td><label>Quantity</label></td>
<td><input type="text" id="d_quantity" name="d_quantity" /></td>
</tr>
<tr>
<td style="vertical-align: top"><input type="checkbox" name="d_remarks" id="d_remarks"><label>Remarks</label></td>
<td><textarea cols="30" rows="5" id="d_remarks_value" name="d_remarks_value"></textarea></td>
</tr>
<tr>
<td>
</td>
<td><button id="reset" style="display: none;" onclick="reset()">Reset</button> <button id="update" onclick="update()">Update</button> <button onclick="send()">Send Design</button></td>
</tr>
</table>
</div>
<div id="canvas" class="item">
<div id="text"></div>
<div id="image"></div>
</div>
</div>
<div style="clear:both;"></div>
</body>
</html>
and the JS (yes i do realise that this is a PHP forum, but this is how it works) goes like this:
function update()
{
var color = $('#d_color').val();
var text = $('#d_text').val();
var image = $('#d_image').val();
if( color.length > 0 ){
$("#canvas").removeClass('default');
$("#canvas").addClass(color);
}
if( text.length > 0){
$("#text").append(text);
}
if( image.length > 0){
$("#image").append('<img class="image" src="images/uploads/' + image + '" />');
}
$('#update').hide();
$('#reset').show();
}
function send()
{
var name = $('#d_name').val();
var email = $('#d_email').val();
var phone = $('#d_phone').val();
var color = $('#d_color').val();
var text = $('#d_text').val();
var image = $('#d_image').val();
if( name.length == 0){
alert('Please insert your name!');
return false;
}
if( email.length == 0){
alert('Please insert your email!');
return false;
}
if( phone.length == 0){
alert('Please insert your phone!');
return false;
}
if ($('#remarks').attr('checked')) {
var remarks = $('#d_remarks_value').val();
}
alert('Thank you!');
}
function reset()
{
top.location = $(location).attr('href');
}
Now, Obviously, the script need to send to an email address and i had attempted to convert this to a php mailing script that I had used before, however, my skills with PHP is not great and I couldnt figure it out. I know what needs to happen with it, the send() function needs to be a post() funvtion and send the data from the js to a php mailer where it can then be sent to the specified email address. however I could not figure out how to do this....
can anyone help out with this, I feel i have overlooked something really simple to make this work?
regards and thanks,
