Dynamic Image Upload With Preview - Complete Client-Side Code

Discussion in 'HTML & Website Design' started by Mike H., Oct 10, 2007.

0
  1. #1 
    <!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 = 5;

/* **** Do not edit below this line ****  */

/*   Copyright 2007, Michael J. Hill. All rights reserved. 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 listCollection = [];	
	var valid = false;

	function insertInput(){

		if (!valid)
			{
			 return false;
			}
		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);
		valid = false;
	}

	function removeInput(){
		
		if (nInput.length > 4)
			{
			 root.removeChild(nInput[nInput.length-4]);			
			}
		if (nInput[0].value != "" && listCollection[0] != "Invalid")
			{			 	 
			 buildList();
			}
	}

	function buildList(){		
		
		var nContainer = document.getElementById('nameList');
		while (nContainer.lastChild)
			{
			 nContainer.removeChild(nContainer.lastChild);
			}
		listCollection.length = 0;
		for (i=0; i<nInput.length; i++)
			{
			 if (nInput[i].type == "file")
				{
				 valid = true;
				 var longName = nInput[i].value;
				 var fullName = longName.match(/[^\/\\]+$/);
				 var splitName = fullName[0].split(".");
				 var fileType = splitName[1];
				 if (!fileType){return false}
				 fileType = fileType.toLowerCase();
				 fileName = splitName[0];				 		 	 
				 if (fileType != 'jpg' && fileType != 'jpeg' && fileType != 'gif')
					{
					 alert('Invalid file type');
					 valid = false;					 				 
					}
				 if (/[^\w ]/.test(fileName) || splitName.length > 2)
					{
				 	 alert('A file name must not contain any special characters\nlike an apostrophe, period or hyphen');
					 valid = false;					 			 	 
					}
				 if (valid)
				 	{
					 listCollection[i] = fullName;					 
					}
				 else 	{
					 listCollection[i] = "Invalid";
					}
				}
			}		
		for (i=0; i<listCollection.length; i++)
			{
			 var nUpload = nInput[i].value;
			 var newItem = document.createElement('li');
			 if (listCollection[i] != "Invalid")
				{
			 	 newItem.innerHTML = "<img src='file:///"+nUpload+"' width='120' height='90' style='margin-right:8px;padding-top:10px'>";
				}	
			 else	{
				 newItem.style.marginLeft = "128px";
				 newItem.style.marginTop = "8px";
				 newItem.style.marginBottom = "8px";
				}		 
			 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(nForm){

		var fileName = "";
		var nForm = document.getElementsByTagName('fieldset')[0].getElementsByTagName('input');
		for (i=0; i<nForm.length; i++)
			{
			 if (nForm[i].name == "userImg[]" && nForm[i].value == "")
				{
				 alert('Complete all fields');
				 return false;
				}
			 if (nForm[i].name == "userImg[]")
				{
			 	 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('Invalid file type');
				 	 return false;
					}
				}
			}
		alert('Thank you for your submission');
		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: 0px; list-style-type: none;}	
	.nList {display: block; margin-left:auto; margin-right: auto; border: 1px solid #87ceeb; font-family: tahoma; font-size: 10pt; color: #00008b; width: 425px; height: 175px; overflow: auto; 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' style="margin-top: 0px"> Review Your Choices </p>
			<ul id='nameList'></ul>
		</div>

		<form method="post" action="" 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="Next" id='insertBtn' style='font-family:times;font-size:10pt;margin-left:44px;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;"> &copy; Copyright 2007, Michael J. Hill. All rights reserved. Used with permission. www.javascript-demos.com</div>
	</body>
</html>
    Code (markup):

     
    Mike H., Oct 10, 2007 IP