Greetings, I am building my first website - with a freelancer- and need some technical advice from my fellow warriors. The website requires customers to answer six questions and upload 3-4 pictures. The purpose is to identify what breeds make up your mutt and a survey and pictures helps answer this question. I have the survey questions pretty much done, but I'm having trouble figuring out an easy way for customers to upload their pictures and then how they can be reconciled with the survey answers. The site does have a database for the surveys. If you can help me with how and what to do with the pictures, I would very much appreciate it. Thanks, Barbara
Edit the value of the variable maxImages to your preference. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> Upload Images </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript"> var maxImages = 3; /* **** Do not edit below this line **** */ /* Copyright 2006, 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 = true; if (navigator.appName != "Microsoft Internet Explorer"){IE = 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[1]; if (!fileType){return false} fileType = fileType.toLowerCase(); if (fileType == 'jpg' || fileType == 'jpeg' || fileType == 'gif' || fileType == 'png') { if (!IE){listCollection[i] = fileName} else {listCollection[i] = fullName} } } } for (i=0; i<listCollection.length; i++) { var newItem = document.createElement('li'); if (!IE) { newItem.appendChild(document.createTextNode(i+1+'- '+listCollection[i])); nContainer.appendChild(newItem); } else { newItem.appendChild(document.createTextNode(i+1+'- ')); var newThumb = document.createElement('img') newItem.appendChild(newThumb); newThumb.src = listCollection[i]; newThumb.width = '80'; newThumb.height = '60'; nContainer.appendChild(newItem); } } var nBox = document.getElementById('listBox'); if (nBox.scrollHeight > 0) { nBox.scrollTop = nBox.scrollHeight; } } function validate(nForm){ for (i=0; i<nForm.length; i++) { if (nForm[i].value == "") { return false; } } return true; } function init(){ root = document.getElementsByTagName('fieldset')[0]; nInput = root.getElementsByTagName('input'); } onload=init; </script> <style type="text/css"> body {margin-top:60px;background-color:#eae3c6} form {width:283px;margin:auto} fieldset {padding:5px;background-color:#f0fff0;border:1px solid #87ceeb} legend {font-family:times;font-size:12pt;color:#00008b;background-color:#87ceeb;padding-left:3px;padding-right:3px;margin-bottom:5px;} label {font-size:12pt;color:#00008B;padding:5px} ul {margin-top:-15px} .nList {display:block;margin:auto;border:1px solid #87ceeb;font-family:tahoma;font-size:10pt;color:#00008b;width:276px;height:100px;overflow-y:auto;overflow-x:hidden;background-color:#ffffe0;padding:3px} .fInput {font-family:times;font-size:10pt;margin-bottom:3px;margin-left:8px} </style> </head> <body> <h3 align='center'> Upload Your Images </h3> <div id='listBox' class='nList'> <p align='center'> Review Your Choices </p> <ul id='nameList'></ul> </div> <form method="post" action="setUploads.php" enctype="multipart/form-data" onsubmit="return validate(this)"> <fieldset> <legend> Image Upload </legend> <input type='file' name='userImg[]' size='25' class='fInput' onchange="buildList()"> <input type='button' value="Insert" id='insertBtn' style='font-family:times;font-size:10pt;margin-left:40px;margin-top:5px' onclick="insertInput()"> <input type='submit' value="Submit" style='font-family:times;font-size:10pt;margin-top:5px'> <input type='button' value="Remove" style='font-family:times;font-size:10pt;margin-top:5px' onclick="removeInput()"> </fieldset> </form> <div style='text-align:center;font-size:8pt;padding:3px;margin:auto'> © Copyright 2006, Michael J. Hill. Used with permission. www.javascript-demos.com</div> </body> </html> Code (markup): setUploads.php: <?php foreach ($_FILES["userImg"]["error"] as $key => $error) { if ($error == UPLOAD_ERR_OK) { $tmp_name = $_FILES["userImg"]["tmp_name"][$key]; $name = $_FILES["userImg"]["name"][$key]; move_uploaded_file($tmp_name, "images/$name"); } } ?> Code (markup):