Foto toevoegen aan formulier...

Status
Niet open voor verdere reacties.
M

Martijnn

Gebruiker
Lid geworden
13 nov 2011
Berichten
44
Hi all,

Ik heb een simpel paginaatje met een formuliertje (gaat alleen op iPads gebruikt worden).
Nu wil ik aan dit formulier graag een button toevoegen om een foto mee te sturen (uit bibliotheek of van camera).

Uiteraard heb ik de button.
Ik heb ook de code voor het selecteren/verzenden van de foto:
PHP: 
<?php
if ($_POST) {
$s = md5(rand());
mail('me@somedomain.com', 'attachment', "--$s

--$s
Content-Type: application/octet-stream; name=\"photo.jpg\"
Content-Transfer-Encoding: base64
Content-Disposition: attachment

".chunk_split(base64_encode(join(file($_FILES['photo']['tmp_name']))))."
--$s--", "MIME-Version: 1.0\r\nContent-Type: multipart/mixed; boundary=\"$s\"");
exit;
}
?>

Het selecteren/versturen werkt prima, maar op een aparte pagina; ik krijg dit niet werkend IN mijn bestaande formulier...

Hier een zipje met de 2 bestandjes:
Bekijk bijlage test.zip
Sorry voor de waarschijnlijk belabberde code; ik ben geen programmeur, maar het is een simpel paginaatje and it does the trick... :)

Thanks!

De 2 pagina's:
index.php:
HTML: 
<html>
<head>
<title>Request Signing</Title>
<link href='http://fonts.googleapis.com/css?family=Armata' rel='stylesheet' type='text/css'>
<style>
body {font-family: 'Armata', cursive;font-size: 12px;}
p{padding:0;margin:0;}
.divTable {display: table;}
.divTableRow {display: table-row;}
.divTableHeading {background-color: #EEE;display: table-header-group;}
.divTableCell, .divTableHead {border: 0px solid #999999;display: table-cell;padding: 3px 10px;font-weight: bold;}
.divTableHeading {background-color: #EEE;display: table-header-group;font-weight: bold;}
.divTableFoot {background-color: #EEE;display: table-footer-group;font-weight: bold;}
.divTableBody {display: table-row-group;}
</style>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>

<body>  
<H1>Request Signing</H1> 
This form will be addressed to <b>Signing</b><br />
(You will also receive a copy)
<br />
<br />
<form action="mail.php" method="POST">
<b>Name</b><br>
<input type="text" name="name">
<br />
<br />
<b>Shop</b><br>
<select id="email" name="email" size="1" onchange="PopulateName()">
<option value="No shop selected">Please select...</option>
<option value="shop1@somedomain.com">Shop 1</option>
<option value="shop2@somedomain.com">Shop 2</option>
</select>

<input type="hidden" name="naam" id="naam">
<br />
<br />
<br />
<script type="text/javascript">
function PopulateName() {
     var field = document.getElementById('naam');
    field.value = document.getElementById('email').options[document.getElementById('email').selectedIndex].text;
	}
</script>
<div class="divTable">
<div class="divTableBody">
<div class="divTableRow">
<div class="divTableCell">Item ID or Promo-description</div>
<div class="divTableCell">Size</div>
<div class="divTableCell">Qty</div>
<div class="divTableCell">Duplex</div>
<div class="divTableCell">Laminated</div>
</div>
<div class="divTableRow">
<div class="divTableCell"><input size="21" type="text" name="promo1"></div>
<div class="divTableCell"><select name="size1"><option value=""></option><option value="Landscape for: ">Landscape</option><option value="A15 for: ">A15</option><option value="A4 for: ">A4</option><option value="A5 for: ">A5</option></select></div>
<div class="divTableCell"><select name="qty1"><option value=""></option><option value="1 x ">1</option><option value="2 x ">2</option><option value="3 x ">3</option><option value="4 x ">4</option><option value="5 x ">5</option></select></div>
<div class="divTableCell" style="text-align: center; vertical-align: middle;"><input type="checkbox" value=" - [Duplex]" name="duplex1"></div>
<div class="divTableCell" style="text-align: center; vertical-align: middle;"><input type="checkbox" value=" - [Laminated]" name="laminate1"></div>
</div>
<div class="divTableRow">
<div class="divTableCell"><input size="21" type="text" name="promo2"></div>
<div class="divTableCell"><select name="size2"><option value=""></option><option value="Landscape for: ">Landscape</option><option value="A15 for: ">A15</option><option value="A4 for: ">A4</option><option value="A5 for: ">A5</option></select></div>
<div class="divTableCell"><select name="qty2"><option value=""></option><option value="1 x ">1</option><option value="2 x ">2</option><option value="3 x ">3</option><option value="4 x ">4</option><option value="5 x ">5</option></select></div>
<div class="divTableCell" style="text-align: center; vertical-align: middle;"><input type="checkbox" value=" - [Duplex]" name="duplex2"></div>
<div class="divTableCell" style="text-align: center; vertical-align: middle;"><input type="checkbox" value=" - [Laminated]" name="laminate2"></div>
</div>
<div class="divTableRow">
<div class="divTableCell"><input size="21" type="text" name="promo3"></div>
<div class="divTableCell"><select name="size3"><option value=""></option><option value="Landscape for: ">Landscape</option><option value="A15 for: ">A15</option><option value="A4 for: ">A4</option><option value="A5 for: ">A5</option></select></div>
<div class="divTableCell"><select name="qty3"><option value=""></option><option value="1 x ">1</option><option value="2 x ">2</option><option value="3 x ">3</option><option value="4 x ">4</option><option value="5 x ">5</option></select></div>
<div class="divTableCell" style="text-align: center; vertical-align: middle;"><input type="checkbox" value=" - [Duplex]" name="duplex3"></div>
<div class="divTableCell" style="text-align: center; vertical-align: middle;"><input type="checkbox" value=" - [Laminated]" name="laminate3"></div>
</div>
<div class="divTableRow">
<div class="divTableCell"><input size="21" type="text" name="promo4"></div>
<div class="divTableCell"><select name="size4"><option value=""></option><option value="Landscape for: ">Landscape</option><option value="A15 for: ">A15</option><option value="A4 for: ">A4</option><option value="A5 for: ">A5</option></select></div>
<div class="divTableCell"><select name="qty4"><option value=""></option><option value="1 x ">1</option><option value="2 x ">2</option><option value="3 x ">3</option><option value="4 x ">4</option><option value="5 x ">5</option></select></div>
<div class="divTableCell" style="text-align: center; vertical-align: middle;"><input type="checkbox" value=" - [Duplex]" name="duplex4"></div>
<div class="divTableCell" style="text-align: center; vertical-align: middle;"><input type="checkbox" value=" - [Laminated]" name="laminate4"></div>
</div>
<div class="divTableRow">
<div class="divTableCell"><input size="21" type="text" name="promo5"></div>
<div class="divTableCell"><select name="size5"><option value=""></option><option value="Landscape for: ">Landscape</option><option value="A15 for: ">A15</option><option value="A4 for: ">A4</option><option value="A5 for: ">A5</option></select></div>
<div class="divTableCell"><select name="qty5"><option value=""></option><option value="1 x ">1</option><option value="2 x ">2</option><option value="3 x ">3</option><option value="4 x ">4</option><option value="5 x ">5</option></select></div>
<div class="divTableCell" style="text-align: center; vertical-align: middle;"><input type="checkbox" value=" - [Duplex]" name="duplex5"></div>
<div class="divTableCell" style="text-align: center; vertical-align: middle;"><input type="checkbox" value=" - [Laminated]" name="laminate5"></div>
</div>
<div class="divTableRow">
<div class="divTableCell"><input size="21" type="text" name="promo6"></div>
<div class="divTableCell"><select name="size6"><option value=""></option><option value="Landscape for: ">Landscape</option><option value="A15 for: ">A15</option><option value="A4 for: ">A4</option><option value="A5 for: ">A5</option></select></div>
<div class="divTableCell"><select name="qty6"><option value=""></option><option value="1 x ">1</option><option value="2 x ">2</option><option value="3 x ">3</option><option value="4 x ">4</option><option value="5 x ">5</option></select></div>
<div class="divTableCell" style="text-align: center; vertical-align: middle;"><input type="checkbox" value=" - [Duplex]" name="duplex6"></div>
<div class="divTableCell" style="text-align: center; vertical-align: middle;"><input type="checkbox" value=" - [Laminated]" name="laminate6"></div>
</div>
<div class="divTableRow">
<div class="divTableCell"><input size="21" type="text" name="promo7"></div>
<div class="divTableCell"><select name="size7"><option value=""></option><option value="Landscape for: ">Landscape</option><option value="A15 for: ">A15</option><option value="A4 for: ">A4</option><option value="A5 for: ">A5</option></select></div>
<div class="divTableCell"><select name="qty7"><option value=""></option><option value="1 x ">1</option><option value="2 x ">2</option><option value="3 x ">3</option><option value="4 x ">4</option><option value="5 x ">5</option></select></div>
<div class="divTableCell" style="text-align: center; vertical-align: middle;"><input type="checkbox" value=" - [Duplex]" name="duplex7"></div>
<div class="divTableCell" style="text-align: center; vertical-align: middle;"><input type="checkbox" value=" - [Laminated]" name="laminate7"></div>
</div>
<div class="divTableRow">
<div class="divTableCell"><input size="21" type="text" name="promo8"></div>
<div class="divTableCell"><select name="size8"><option value=""></option><option value="Landscape for: ">Landscape</option><option value="A15 for: ">A15</option><option value="A4 for: ">A4</option><option value="A5 for: ">A5</option></select></div>
<div class="divTableCell"><select name="qty8"><option value=""></option><option value="1 x ">1</option><option value="2 x ">2</option><option value="3 x ">3</option><option value="4 x ">4</option><option value="5 x ">5</option></select></div>
<div class="divTableCell" style="text-align: center; vertical-align: middle;"><input type="checkbox" value=" - [Duplex]" name="duplex8"></div>
<div class="divTableCell" style="text-align: center; vertical-align: middle;"><input type="checkbox" value=" - [Laminated]" name="laminate8"></div>
</div>
<div class="divTableRow">
<div class="divTableCell"><input size="21" type="text" name="promo9"></div>
<div class="divTableCell"><select name="size9"><option value=""></option><option value="Landscape for: ">Landscape</option><option value="A15 for: ">A15</option><option value="A4 for: ">A4</option><option value="A5 for: ">A5</option></select></div>
<div class="divTableCell"><select name="qty9"><option value=""></option><option value="1 x ">1</option><option value="2 x ">2</option><option value="3 x ">3</option><option value="4 x ">4</option><option value="5 x ">5</option></select></div>
<div class="divTableCell" style="text-align: center; vertical-align: middle;"><input type="checkbox" value=" - [Duplex]" name="duplex9"></div>
<div class="divTableCell" style="text-align: center; vertical-align: middle;"><input type="checkbox" value=" - [Laminated]" name="laminate9"></div>
</div>
</div>
</div>
<br />
<input type="button" id="AttachPhoto" value="Attach photo" onclick="document.getElementById('file').click();" />
<input type="file" style="display:none;" id="file" name="photo"/>
<br />
<br />
<b>Comments</b><br>
<textarea name="comments" rows="10" cols="75"></textarea><br />
<br />
<br />
<input type="submit" value="Send"><input type="reset" value="Clear">
</form>
</body>
</html>

mail.php:
PHP: 
<?php
$name = $_POST['name'];
$shop = $_POST['shop'];
$date = $_POST['date'];
$email = $_POST['email'];
$naam = $_POST['naam'];
$promo1 = $_POST['promo1'];$size1 = $_POST['size1'];$qty1 = $_POST['qty1'];$laminate1 = $_POST['laminate1'];$duplex1 = $_POST['duplex1'];
$promo2 = $_POST['promo2'];$size2 = $_POST['size2'];$qty2 = $_POST['qty2'];$laminate2 = $_POST['laminate2'];$duplex2 = $_POST['duplex2'];
$promo3 = $_POST['promo3'];$size3 = $_POST['size3'];$qty3 = $_POST['qty3'];$laminate3 = $_POST['laminate3'];$duplex3 = $_POST['duplex3'];
$promo4 = $_POST['promo4'];$size4 = $_POST['size4'];$qty4 = $_POST['qty4'];$laminate4 = $_POST['laminate4'];$duplex4 = $_POST['duplex4'];
$promo5 = $_POST['promo5'];$size5 = $_POST['size5'];$qty5 = $_POST['qty5'];$laminate5 = $_POST['laminate5'];$duplex5 = $_POST['duplex5'];
$promo6 = $_POST['promo6'];$size6 = $_POST['size6'];$qty6 = $_POST['qty6'];$laminate6 = $_POST['laminate6'];$duplex6 = $_POST['duplex6'];
$promo7 = $_POST['promo7'];$size7 = $_POST['size7'];$qty7 = $_POST['qty7'];$laminate7 = $_POST['laminate7'];$duplex7 = $_POST['duplex7'];
$promo8 = $_POST['promo8'];$size8 = $_POST['size8'];$qty8 = $_POST['qty8'];$laminate8 = $_POST['laminate8'];$duplex8 = $_POST['duplex8'];
$promo9 = $_POST['promo9'];$size9 = $_POST['size9'];$qty9 = $_POST['qty9'];$laminate9 = $_POST['laminate9'];$duplex9 = $_POST['duplex9'];
$comments = $_POST['comments'];
$formcontent="
<html>
<head>
<STYLE>
body {font-family: Calibri; font-size: 12px;}
span {color:red; font-size: 14px; display:inline;}
pre {font-family: Calibri; font-size: 14px; color:red}
</style>
</head>
<body>
<b>From</b>: $name <br /><br />
<b>Shop</b>: $naam <br /><br />
<hr>
<span>$qty1$size1$promo1$duplex1$laminate1<br /></span><br />
<span>$qty2$size2$promo2$duplex2$laminate2<br /></span><br />
<span>$qty3$size3$promo3$duplex3$laminate3<br /></span><br />
<span>$qty4$size4$promo4$duplex4$laminate4<br /></span><br />
<span>$qty5$size5$promo5$duplex5$laminate5<br /></span><br />
<span>$qty6$size6$promo6$duplex6$laminate6<br /></span><br />
<span>$qty7$size7$promo7$duplex7$laminate7<br /></span><br />
<span>$qty8$size8$promo8$duplex8$laminate8<br /></span><br />
<span>$qty9$size9$promo9$duplex9$laminate9<br /></span>
<hr>
<b>Comments</b>:\n<pre>$comments</pre>
</body>
</html>
";
$subject = "Signing request from $naam ($name)\r\n";
$headers  = 'MIME-Version: 1.0' . "\r\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
$headers .= "To: Signing <signing@somedomain.com>, Me <me@somedomain.com>" . "\r\n";
$headers .= "From: <$email>" . "\r\n";
$headers .= "Cc: <$email>" . "\r\n";
mail($to, $subject, $formcontent, $headers);
echo "Form succesfully submitted." . " -" . "<a href='index.html' style='text-decoration:none;color:#ff0099;'> Return Home</a>";
?>
 
Laatst bewerkt:
Ik kan hier helaas je zip-jes niet openen. Maar is het niet beter om phpMailer te gebruiken? Dan kan je met een enkele regel een bijlage toevoegen van een bestand op de server, en heel ernvoudig een mail opstellen zonder de boel zelf te splitten en base64'en.
 
Bedankt voor je reactie!

Als jij zegt dat dat beter is, dan geloof ik je uiteraard direct. Aan je naam te zien ben jij d'r van... ;)

Ik vond dit stukje code via Google, het is maar een paar regels en het werkte, dus daar was ik al pretty happy mee...
Ik krijg het alleen niet ingebouwd in mijn bestaande pagina.

phpMailer heb ik even gegoogled en het ziet er niet naar uit als iets dat ik, als extreme leek, dit even regel. Het geheel bevat iets meer regels code dan wat ik eerst vond en aangezien het maar een heel simpel paginaatje is, dat door een paar mensen minimaal gebruikt gaat worden, wilde ik er niet al te veel tijd in steken... :)

Ik zal het phpMailer-pakketje wel downloaden en er even mee stoeien...
 
De examples en de manual zijn de enige dingen die interessant voor je zijn in phpMailer. De ellenlange code van phpMailer zelf moet je niet aanraken. ;)

Het uploaden van de bestanden via het formulier moet je zelf wel regelen. Maar het maken van de mail en het toevoegen van de bijlage is dan zo gepiept. En hij mailt dan ook volgens de gestelde eisen met de juiste headers, waar jij je dan geen zorgen over hoeft te maken.

Dat is de kracht van phpMailer.
 
Laatst bewerkt:
denk aan regel
<form action="mail.php" method="POST">

type ... mixed ...
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan