<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title> Upload Images </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
var maxImages = 5;
/* **** Do not edit below this line **** */
/* Dynamic Image File Upload Form */
/* Copyright 2010, Michael J. Hill. Used with permission. www.javascript-demos.com */
/* Free use of the code, so long as both copyright notices are kept intact */
var root = "";
var nInput = "";
var IE = navigator.appName == "Microsoft Internet Explorer" ? true : false;
function insertInput(){
if (nInput.length > Number(maxImages)+Number(2))
{
alert('Maximum '+maxImages + ' images');
return false;
}
var nextUpload = document.createElement('input');
nextUpload.type = "file";
nextUpload.name = "userImg[]";
nextUpload.size = "25";
nextUpload.className = 'fInput';
nextUpload.onchange = function(){buildList()}
var lastUpload = root.getElementsByTagName('input');
lastUpload = lastUpload[lastUpload.length-3];
root.insertBefore(nextUpload,lastUpload);
}
function removeInput(){
if (nInput.length > 4)
{
root.removeChild(nInput[nInput.length-4]);
}
buildList();
}
function buildList(){
var nContainer = document.getElementById('nameList');
while (nContainer.lastChild)
{
nContainer.removeChild(nContainer.lastChild);
}
var listCollection = [];
for (i=0; i<nInput.length; i++)
{
if (nInput[i].type == "file")
{
var fullName = nInput[i].value;
var fileName = fullName.match(/[^\/\\]+$/);
var splitName = fullName.split(".");
var fileType = splitName[splitName.length-1];
if (!fileType){return false}
fileType = fileType.toLowerCase();
if (fileType == 'jpg' || fileType == 'jpeg' || fileType == 'gif')
{
listCollection[i] = fileName;
}
else {
alert('Invalid file type\nMust be jpg, jpeg or gif');
}
}
}
for (i=0; i<listCollection.length; i++)
{
var newItem = document.createElement('li');
newItem.appendChild(document.createTextNode(i+1+'- '+listCollection[i]));
nContainer.appendChild(newItem);
}
var nBox = document.getElementById('listBox');
if (nBox.scrollHeight > 0)
{
nBox.scrollTop = nBox.scrollHeight;
}
}
function validate(currForm){
var fileName = "";
var nForm = currForm.getElementsByTagName('input');
for (i=0; i<nForm.length; i++)
{
if (nForm[i].name = "userImg" && nForm[i].value == "")
{
alert('Complete all fields');
return false;
}
fileName = nForm[i].value.match(/[^\/\\]+$/);
fileName = fileName[0].split(".");
fileName[1] = fileName[1].toLowerCase();
if (/[^\w ]/.test(fileName[0]) || fileName.length > 2)
{
alert('A file name must not contain any special characters\nlike an apostrophe, period or hyphen');
return false;
}
if (fileName[1] != 'jpg' && fileName[1] != 'jpeg' && fileName[1] != 'gif')
{
alert('One or more of the selections\n is an invalid file type');
return false;
}
}
return true;
}
function init(){
root = document.getElementsByTagName('fieldset')[0];
nInput = root.getElementsByTagName('input');
var nForm = document.forms['img_upload'];
nForm.onsubmit = function()
{
return validate(this);
}
nForm['userImg[]'].onchange = function()
{
buildList();
}
nForm['next'].onclick = function()
{
insertInput();
}
nForm['remove'].onclick = function()
{
removeInput();
}
}
IE ? attachEvent('onload', init, false) : addEventListener('load', init, false);
</script>
<style type="text/css">
body
{
margin-top: 60px;
background-color: #eae3c6;
}
.headline
{
width: 170px;
margin-left: auto;
margin-right: auto;
margin-bottom: 5px;
}
form
{
margin-top: 0px;
padding: 0px;
}
fieldset
{
width: 279px;
margin-left: auto;
margin-right: auto;
padding: 0px;
background-color: #f0fff0;
border: 1px solid #87ceeb;
}
legend
{
font-family: helvetica;
font-size: 10pt;
font-weight: bold;
color: #00008b;
background-color: #87ceeb;
padding-left: 3px;
padding-right: 3px;
margin-bottom: 5px;
}
ul
{
margin-top: 2px;
}
.blank
{
display: none;
}
.list_container
{
display: block;
margin: auto;
border: 1px solid #87ceeb;
font-family: tahoma;
font-size: 10pt;
color: #00008b;
width: 273px;
height: 100px;
overflow: auto;
background-color: #ffffe0;
padding: 2px;
}
.review_msg
{
width: 123px;
margin-left: auto;
margin-right: auto;
}
.fInput
{
font-family: times;
font-size: 10pt;
margin-bottom: 3px;
margin-left: 16px;
}
.nextBtn
{
width: 75px;
font-family: veranda;
font-size: 9pt;
font-weight: bold;
margin-left: 21px;
margin-top: 5px;
margin-bottom: 8px;
background-color: #fff8dc;
border: solid 1px black;
letter-spacing: 1px;
}
.submitBtn
{
width: 75px;
font-family: veranda;
font-size: 9pt;
font-weight: bold;
margin-top: 5px;
margin-bottom: 8px;
background-color: #fff8dc;
border: solid 1px black;
letter-spacing: 1px;
}
.removeBtn
{
width: 75px;
font-family: veranda;
font-size: 9pt;
font-weight: bold;
margin-top: 5px;
margin-bottom: 8px;
background-color: #fff8dc;
border: solid 1px black;
letter-spacing: 1px;
}
.copyright_MJH
{
width: 92%;
margin-left: auto;
margin-right: auto;
margin-top: 35px;
background-color: transparent;
text-align: center;
font-family: veranda;
font-size: 8pt;
color: #d3d3d3;
}
.copyright_MJH a
{
color: #b0e0e6;
text-decoration: none;
}
</style>
</head>
<body>
<h3 class="headline"> Upload Your Images </h3>
<div id="listBox" class="list_container">
<div class="review_msg">Review Your Choices</div>
<ul id="nameList"><li class="blank"></li></ul>
</div>
<form name="img_upload" method="post" action="" enctype="multipart/form-data">
<fieldset>
<legend> Image Upload </legend>
<input type="file" name="userImg[]" size="25" class="fInput">
<input type="button" name="next" value="Next" class="nextBtn">
<input type="submit" name="submit" value="Submit" class="submitBtn">
<input type="button" name="remove" value="Remove" class="removeBtn">
</fieldset>
</form>
<!-- This copyright notice must be included in the document where the code is used -->
<div class="copyright_MJH">
Dynamic Image File Upload Form, Copyright © 2010 Michael J. Hill
<a href="http://www.javascript-demos.com">JavaScript Demos</a>
All rights reserved. Used with permission.
</div>
<!-- This copyright notice must be included in the document where the code is used -->
</body>
</html>
Hoe kan dit gemixet worden met een ander formulier, met invulvelden, zoals dit:
<?php
if ($_POST["action"] == "send"){
if ($_POST[naam] != " je naam" and $_POST[naam] != "" and $_POST[email] != " je e-mail adres" and $_POST[email] != "" and $_POST[bericht] != "") {
mail ("[email protected]", "bericht via AM",
"
Naam: ".$_POST['naam']."
E-mail: ".$_POST['email']."
Bericht: ".$_POST['bericht']."
",
"From: ".$_POST['naam']." <".$_POST['email'].">");
$subject = "bevestiging bericht";
$msg = "
Dit is een automatisch verzonden mail. Gelieve niet te antwoorden.
Beste $_POST[naam],
Bedankt voor je bericht.
Je bericht is doorgestuurd; je mag binnen twee werkdagen een antwoord verwachten.
Dit was je bericht:
$_POST[bericht]
";
mail($_POST[email], $subject, $msg);
echo '<br><img src="images/sent.gif" style="border:0px;height:12px;width:12px;padding-right:10px;">Dankjewel.<br><br>Je bericht is verzonden, <br>en je zal een bevestiging ontvangen.';
}
else{
echo '<br><img src="images/clear.gif" style="border:0px;height:12px;width:12px;padding-right:10px;">Gelieve alle velden in te vullen.<br><br>Je naam, email adres en bericht<br> zijn verplichte velden.<br><br><a href="about.php"><font color="#565656;">[graag opnieuw]</font></a>';
}
}
?>