1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

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