...

View Full Version : PHP Form with file attachment



CSSisthebest
10-24-2012, 01:42 PM
Hi Guys,

Really need some help with this im a php novice and I can't find a script that does what I want it to in the code below.

What I need is for it to record: name, email, telephone then capture the uploaded document and send it to an email address. Can this be done and if so how?

P.S the reason there is a double upload button in the form is because one is acting as the style and one is the browse button so the functionality works in the form.

and at the moment this is best viewed in FF as I haven't tested it elsewhere yet.


<form method="post" name="email_form_with_php" action="php-form-action.php" enctype="multipart/form-data">

<fieldset id="user-details">


<input onfocus="this.select()" value="Name" type="text" name="name" value="" />


<input onfocus="this.select()" value="Email" type="email" name="email" value="" />


<input onfocus="this.select()" value="Telephone" type="text" name="phone" value="" />

<input onfocus="this.select()" value="Upload Your CV" type="text" name="uploaded_file" value="" />
<input onfocus="this.select()" value="Upload Your CV" class="hide" type="file" name="uploaded_file" value="" />

<input class="submit-button" type="image" value"SUBMIT" src="submit.png" name='submit' />
</fieldset><!--end user-details-->


</form>
Many Thanks

James

Redcoder
10-24-2012, 05:26 PM
File Uploading using PHP is easy. There are already functions that help you achieve that easily. Just like the the $_POST array holds the values from a form sing the post method, the global $_FILES array contains a files attributes like name, type, size e.t.c relieving the computation burden.

To upload all that data to the database and the files to disk would take very few lines of code. Check out W3Schools (http://www.w3schools.com/php/php_file_upload.asp), TizTag (http://www.tizag.com/phpT/fileupload.php) and PHP.net (http://www.php.net/manual/en/features.file-upload.post-method.php) for how to handle files.

CSSisthebest
10-25-2012, 04:46 PM
Do you think there is any examples of this working so I can take a look.

I'm just a bit lost bit new to php.

Redcoder
10-25-2012, 05:25 PM
I'm guessing that you know how to store the text. So here's how you'll store the images. It's a simple version that names the files on the timestamp to ensure that the names are unique.




function get_file_extension($file_name) {
return substr(strrchr($file_name,'.'),1);
}

$target_path = rand().time(); //Give random name to prevent file name collisons which will
read to overwriting. Although you may want to choose a predictable and uniform names for later retrieval

$path = $_FILES['uploaded_file']['tmp_name'];
$ext = get_file_extension($path); //Get file extension
$target_path .=$ext;

if(move_uploaded_file($path, $target_path)) {
echo "The file has been uploaded";
} else{
echo "There was an error uploading the file, please try again!";
}



This is a skeleton of an approach you should take.

CSSisthebest
10-29-2012, 02:19 PM
This is the send_contact.php code



<?php

// Contact subject
$telephone ="$subject";

// Mail of sender
$mail_from="$customer_mail";

// From
$header="from: $name <$mail_from>";


// Enter your email address
$to ='james@essexseos.co.uk';

$send_contact=mail($to,$subject,$header);

// Check, if message sent to your email
// display message "We've recived your information"
if($send_contact){
echo "We've recived your contact information";
}
else {
echo "ERROR";
}
?>


and this is the index.php


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style>
.boxes-p2p {width:33%;
margin-top:10px;
margin-left: 3px;
background-color:#f4f6f6;}

.boxes-more-info {width:938px;
margin-top:360px;
margin-left: 3px;
background-color:#f4f6f6;
clear:both;}

.boxes-more-info p {list-style-image: url(arrow-list.png);
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
text-align:left;
margin-left: 30px;
margin-right:30px;
margin-bottom:140px;}

.p2p-boxes ul {
list-style-image: url(arrow-list.png);
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
padding-left:10px;
text-align:center;
margin-left:25px;
margin-bottom:10px;


}
.p2p-boxes p {
list-style-image: url(arrow-list.png);
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
text-align:left;
margin-left: 30px;
margin-right:30px;
margin-bottom:10px;

}
.p2p-boxes li {padding-left:5px; margin:0;
padding-bottom:10px;
text-align:left;
width:87%;}
.button-p2p {margin-left: 30px; margin-bottom:20px;}



form {


padding: 10px 40px 20px 25px;
background-color:#f4f6f6;





}

fieldset { border: none; }

#user-details {
float: left;
width: 230px;
}



input, textarea {
padding: 8px;
margin: 4px 0 10px 0;
background: #fff;
width: 220px;
font-size: 14px;
color: #555;
border: 1px #ddd solid;

/* -- CSS3 Shadow - create a shadow around each input element -- */
-webkit-box-shadow: 0px 0px 4px #aaa;
-moz-box-shadow: 0px 0px 4px #aaa;
box-shadow: 0px 0px 4px #aaa;

/* -- CSS3 Transition - define what the transition will be applied to (i.e. the background) -- */
-webkit-transition: background 0.3s linear;
}

textarea {
width: 100px;
height: 125px;
}

input:hover, textarea:hover {
background: #eee;
}

input.submit {
width: 150px;
color: #eee;
text-transform: uppercase;
margin-top: 10px;
background-color: #18a5cc;
border: none;

/* -- CSS3 Transition - define which property to animate (i.e. the shadow) -- */
-webkit-transition: -webkit-box-shadow 0.3s linear;

/* -- CSS3 - Rounded Corners -- */
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;

/* -- CSS3 Shadow - create a shadow around each input element -- */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#18a5cc), to(#0a85a8));
background: -moz-linear-gradient(25% 75% 90deg,#0a85a8, #18a5cc);
}

input.submit:hover {
-webkit-box-shadow: 0px 0px 20px #555;
-moz-box-shadow: 0px 0px 20px #aaa;
box-shadow: 0px 0px 20px #555;
cursor: pointer;
}
input.submit-button {width:255px;
padding:0px;
border:none;
box-shadow:none;
margin:0px;
margin-left:-8px;
margin-top:37px;
margin-bottom:8px;
}

input.hide
{
position:absolute;
left:550px;

-moz-opacity:0;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 2;
}
</style>
<!--[if IE]>
<style type="text/css">
input.hide
{
position:absolute;
left:10px;
-moz-opacity:0;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 2;
width:0px;
border-width:0px;
}
</style>
<![endif]-->

</head>
<body>
<div style="width:941px;" class="p2p-boxes">
<img src="canadian-landscape.jpg" />
<div class="boxes-p2p" style="float:left;"><img src="earn-250000.png" title="earn £250,000 pounds" />
<ul>
<li>Calling all GPs who want £200k - £250k per annum with no stress and no out of hours with low taxation plus benefits.
</li>
<li>Are you interested in providing high quality primary care without the stress and strain of out of hours, targets and home visits?
</li>
<li>Interested in earning £240k basic salary with half the UK tax implication working weekdays 9 – 5 with the opportunity of more?
</li>
<li>Want a better standard of living somewhere with a strong growing economy and scenic environment?
</li>

</ul>
<a href="earn-250000.html"><img class="button-p2p" src="earn-250000-button.png" /></a>
</div>

<div class="boxes-p2p" style="float:left;"><img src="apply-now.png" title="apply now" />
<ul><li>Come join Dr Ahmad and Dr Querishi in Calgary, Canada straight into a guaranteed post with guaranteed earnings (previous UK GPs).</li>
<li>You’ll need 6 months post GP registration experience and an e-learning MCCC certificate which Dr Ahmad will support you through</li>
<li style="padding-bottom:49px;">Contact Dr Ahmad via Patients2People.co.uk for more details about healthcare in Canada and application.</li></ul><a href="apply-now.html"><img class="button-p2p" src="apply-now-button.png" /></a>
</div>

<div class="boxes-p2p" style="float:left;"><img src="request-a-call-back.png" title="request a call back" />
<form name="form1" method="post" action="send_contact.php">

<fieldset id="user-details">


<input onfocus="this.select()" name="name" type="text" id="name" />


<input onfocus="this.select()" name="customer_mail" type="email" id="customer_mail" />


<input onfocus="this.select()" name="telephone" value="Telephone" type="text" id="telephone" />

<input class="submit-button" action="send_contact.php" type="image" value"Submit" src="submit.png" name="Submit" />

<input onfocus="this.select()" value="Upload Your CV" type="text" name="uploaded_file" />
<input onfocus="this.select()" value="Upload Your CV" class="hide" type="file" name="uploaded_file" />

</fieldset><!--end user-details-->


</form>




</div>
<!-- end of 3 boxes -->
</div>
</body>
</html>


this is the link to the form.

http://www.essexseos.co.uk/test/index.php

Any one have any idea where I have gone wrong?

Thanking you in advance.

Redcoder
10-30-2012, 12:27 AM
In your form processing php file, you have included code to partially process the text input but not the files. I say partially because you don't have code that gets the values from the $_POST array.

You need to fix the file processing code somewhere like this:




<?php

function get_file_extension($file_name) { //function that returns file etension
return substr(strrchr($file_name,'.'),1);
}

$target_path = rand().time(); //Give random name to prevent file name collisons which will
read to overwriting. Although you may want to choose a predictable and uniform names for later retrieval

$path = $_FILES['uploaded_file']['tmp_name'];
$ext = get_file_extension($path); //Get file extension
$target_path .=$ext;

if(move_uploaded_file($path, $target_path)) {
echo "The file has been uploaded";
} else{
echo "There was an error uploading the file, please try again!";
}

$name = $_POST['name'];
// Contact subject
$telephone = $_POST['telephone'];

// Mail of sender
$mail_from= $_POST['customer_mail'];

// From
$header="from: $name <$mail_from>";


// Enter your email address
$to ='james@essexseos.co.uk';

$send_contact=mail($to,$subject,$header);

// Check, if message sent to your email
// display message "We've recived your information"
if($send_contact){
echo "We've recived your contact information";
}
else {
echo "ERROR";
}
?>




Try checking out the $_POST array, $_FILES array and Form processing in PHP.

CSSisthebest
10-30-2012, 10:51 AM
Hi Redcoder,

I have had a look at those updated the source to this with your suggestions in mind, but it isn't returning anything and I have received no data to that email address. I also checked the server and no files have been uploaded.

Do I need something called MIME that I have seen mentioned when looking over what you mentioned to research?

I have also stopped hiding the original browse form until I get this working as I think it could be causing issues.

Please find updated code HTML then PHP.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style>
.boxes-p2p {width:33%;
margin-top:10px;
margin-left: 3px;
background-color:#f4f6f6;}

.boxes-more-info {width:938px;
margin-top:360px;
margin-left: 3px;
background-color:#f4f6f6;
clear:both;}

.boxes-more-info p {list-style-image: url(arrow-list.png);
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
text-align:left;
margin-left: 30px;
margin-right:30px;
margin-bottom:140px;}

.p2p-boxes ul {
list-style-image: url(arrow-list.png);
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
padding-left:10px;
text-align:center;
margin-left:25px;
margin-bottom:10px;


}
.p2p-boxes p {
list-style-image: url(arrow-list.png);
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
text-align:left;
margin-left: 30px;
margin-right:30px;
margin-bottom:10px;

}
.p2p-boxes li {padding-left:5px; margin:0;
padding-bottom:10px;
text-align:left;
width:87%;}
.button-p2p {margin-left: 30px; margin-bottom:20px;}



form {


padding: 10px 40px 20px 25px;
background-color:#f4f6f6;





}

fieldset { border: none; }

#user-details {
float: left;
width: 230px;
}



input, textarea {
padding: 8px;
margin: 4px 0 10px 0;
background: #fff;
width: 220px;
font-size: 14px;
color: #555;
border: 1px #ddd solid;

/* -- CSS3 Shadow - create a shadow around each input element -- */
-webkit-box-shadow: 0px 0px 4px #aaa;
-moz-box-shadow: 0px 0px 4px #aaa;
box-shadow: 0px 0px 4px #aaa;

/* -- CSS3 Transition - define what the transition will be applied to (i.e. the background) -- */
-webkit-transition: background 0.3s linear;
}

textarea {
width: 100px;
height: 125px;
}

input:hover, textarea:hover {
background: #eee;
}

input.submit {
width: 150px;
color: #eee;
text-transform: uppercase;
margin-top: 10px;
background-color: #18a5cc;
border: none;

/* -- CSS3 Transition - define which property to animate (i.e. the shadow) -- */
-webkit-transition: -webkit-box-shadow 0.3s linear;

/* -- CSS3 - Rounded Corners -- */
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;

/* -- CSS3 Shadow - create a shadow around each input element -- */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#18a5cc), to(#0a85a8));
background: -moz-linear-gradient(25% 75% 90deg,#0a85a8, #18a5cc);
}

input.submit:hover {
-webkit-box-shadow: 0px 0px 20px #555;
-moz-box-shadow: 0px 0px 20px #aaa;
box-shadow: 0px 0px 20px #555;
cursor: pointer;
}
input.submit-button {width:255px;
padding:0px;
border:none;
box-shadow:none;
margin:0px;
margin-left:-8px;
margin-top:37px;
margin-bottom:8px;
}

input.hide
{
position:absolute;
left:550px;

-moz-opacity:100%;
filter:alpha(opacity: 100%);
opacity: 100%;
z-index: 2;
}
</style>
<!--[if IE]>
<style type="text/css">
input.hide
{
position:absolute;
left:10px;
-moz-opacity:100%;
filter:alpha(opacity: 100%);
opacity: 100%;
z-index: 2;
width:0px;
border-width:0px;
}
</style>
<![endif]-->

</head>
<body>
<div style="width:941px;" class="p2p-boxes">
<img src="canadian-landscape.jpg" />
<div class="boxes-p2p" style="float:left;"><img src="earn-250000.png" title="earn £250,000 pounds" />
<ul>
<li>Calling all GPs who want £200k - £250k per annum with no stress and no out of hours with low taxation plus benefits.
</li>
<li>Are you interested in providing high quality primary care without the stress and strain of out of hours, targets and home visits?
</li>
<li>Interested in earning £240k basic salary with half the UK tax implication working weekdays 9 – 5 with the opportunity of more?
</li>
<li>Want a better standard of living somewhere with a strong growing economy and scenic environment?
</li>

</ul>
<a href="earn-250000.html"><img class="button-p2p" src="earn-250000-button.png" /></a>
</div>

<div class="boxes-p2p" style="float:left;"><img src="apply-now.png" title="apply now" />
<ul><li>Come join Dr Ahmad and Dr Querishi in Calgary, Canada straight into a guaranteed post with guaranteed earnings (previous UK GPs).</li>
<li>You’ll need 6 months post GP registration experience and an e-learning MCCC certificate which Dr Ahmad will support you through</li>
<li style="padding-bottom:49px;">Contact Dr Ahmad via Patients2People.co.uk for more details about healthcare in Canada and application.</li></ul><a href="apply-now.html"><img class="button-p2p" src="apply-now-button.png" /></a>
</div>

<div class="boxes-p2p" style="float:left;"><img src="request-a-call-back.png" title="request a call back" />
<form name="form1" method="post" action="send_contact.php">

<fieldset id="user-details">


<input onfocus="this.select()" name="name" type="text" value="Name" id="name" />


<input onfocus="this.select()" name="customer_mail" value="Email" type="email" id="customer_mail" />


<input onfocus="this.select()" name="telephone" value="Telephone" type="text" id="telephone" />

<input onfocus="this.select()" value="Upload Your CV" type="text" name="uploaded_file" />
<input onfocus="this.select()" value="Upload Your CV" class="hide" type="file" name="uploaded_file" />

<input class="submit-button" action="send_contact.php" type="image" value"Submit" src="submit.png" name="Submit" />



</fieldset><!--end user-details-->


</form>




</div>
<!-- end of 3 boxes -->
</div>
</body>
</html>



<?php

function get_file_extension($file_name) { //function that returns file extension
return substr(strrchr($file_name,'.'),1);
}

$target_path = rand().time(); //Give random name to prevent file name collisons which will
read to overwriting. Although you may want to choose a predictable and uniform names for later retrieval

$path = $_FILES['uploaded_file']['tmp_name'];
$ext = get_file_extension($path); //Get file extension
$target_path .=$ext;

if(move_uploaded_file($path, $target_path)) {
echo "The file has been uploaded";
} else{
echo "There was an error uploading the file, please try again!";
}

$name = $_POST['name'];
// Contact subject
$telephone = $_POST['telephone'];

// Mail of sender
$mail_from= $_POST['customer_mail'];

// From
$header="from: $name <$mail_from>";


// Enter your email address
$to ='james@essexseos.co.uk';

$send_contact=mail($to,$subject,$header);

// Check, if message sent to your email
// display message "We've received your information"
if($send_contact){
echo "We've received your contact information";
}
else {
echo "ERROR";
}
?>

Thanks for the help I really appreciate it.

Redcoder
10-30-2012, 11:38 AM
Give your form the multipart/form-data content-type encoding when you have an <input type='file'.




<form name="form1" action="send_contact.php" method="post" enctype="multipart/form-data">

CSSisthebest
10-30-2012, 03:38 PM
Hi Redcoder,

I am still getting problems with the code it isn't displaying an error and doesn't send me an email im not sure if its getting caught half way down the form or something it just takes me to a blank page very strange.

Any ideas im a bit lost, sorry to keep heckling you.

Redcoder
10-30-2012, 05:44 PM
To debug and see whether the form is being submitted, use an if else statement in the PHP code:




<?php
if(isset($_POST['telephone'])){
function get_file_extension($file_name) { //function that returns file extension
return substr(strrchr($file_name,'.'),1);
}

$target_path = rand().time(); //Give random name to prevent file name collisons which will
read to overwriting. Although you may want to choose a predictable and uniform names for later retrieval

$path = $_FILES['uploaded_file']['tmp_name'];
$ext = get_file_extension($path); //Get file extension
$target_path .=$ext;

if(move_uploaded_file($path, $target_path)) {
echo "The file has been uploaded";
} else{
echo "There was an error uploading the file, please try again!";
}

$name = $_POST['name'];
// Contact subject
$telephone = $_POST['telephone'];

// Mail of sender
$mail_from= $_POST['customer_mail'];

// From
$header="from: $name <$mail_from>";


// Enter your email address
$to ='james@essexseos.co.uk';

$send_contact=mail($to,$subject,$header);

// Check, if message sent to your email
// display message "We've received your information"
if($send_contact){
echo "We've received your contact information";
}
else {
echo "ERROR";
}
}
else{
echo "NO FORM VARIABLES PASSED TO THIS FILE";
}
?>



Try debugging by echoing out and using if else statements. I have not looked at the code keenly but my IDE also claims the same you say.

CSSisthebest
10-31-2012, 11:17 AM
With echo still not getting any resolution, is there any other statements I can echo for error testing?

Redcoder
10-31-2012, 06:16 PM
With PHP you debug by trying error catching using if else statements to get to where the error is showing. I don't know if you have ever done it by thats how it's done.

For example to see if the $_POST array is empty or not, you can do the following:




<?php

if(!empty($_POST)){
//Continue to retrieve $_POST value
}
else{
echo "The Form values are not being transmitted to the Form Processor. No $_POST set.";
}
?>

CSSisthebest
11-01-2012, 04:52 PM
Hi Redcoder,

I am a bit lost can I do



if ($header) {
echo "name is fine";
}
else {
echo "error";
}
else {
echo "error2"
}

Redcoder
11-01-2012, 05:07 PM
No...you cannot have 2 else's on a single if statement.

Only:



if ($header) {
echo "name is fine";
}
else {
echo "error";
}



Or add another condition using an elseif statement.


if ($header == 1) {
echo "name is fine";
}
elseif($header == 2 ) {
echo "error";
}
else {
echo "error2"
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum