Chapter 2: Pre-Ajax JavaScript Communications Techniques 47
PART I
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ch 2 - Iframe File Upload </title>
<style type="text/css">
body {font-family: Verdana;}
#uploadControl {width: 400px; border: solid 1px; padding: 0px 20px 0px
20px;}
#uploadControl h3 {text-align: center; float: left;}
#attachButton {float: right; margin: 10px;}
.deleteButton {background-color: transparent; color: #990000; font-weight:
bold; font-size: larger; border-style: hidden; margin-left: 5px;}
#fileList {clear: both; border-top: dashed 1px; margin-bottom: 20px;}
.uploadField {margin-top : 20px}
#uploadButton {border-top: dashed 1px; text-align: center; padding: 10px;}
#uploadLabel {font-size: x-large;}
</style>
<script type="text/javascript">
var g_fileCount = 1;
var g_fileList = new Array();
function showAttachFile()
{
if (g_fileList.length >= 10)
{
alert("You have reached the max number of files allowed at one time.
Please upload your files and try again.");
return;
}
var fileList = document.getElementById("fileList");/* build a container */
var fileDiv = document.createElement("div");
fileDiv.id = "fileDiv" + g_fileCount;/* add file upload field */
var uploadField = document.createElement("input");
uploadField.type = "file";
uploadField.size = "40";
uploadField.id = "inputfile" + g_fileCount;
uploadField.className = "uploadField";
uploadField.name = "inputfile" + g_fileCount;
fileDiv.appendChild(uploadField);
/* add a remove button */
var deleteButton = document.createElement("input");
deleteButton.type = "button";
deleteButton.className = "deleteButton";
deleteButton.value = "X"
deleteButton.onclick = function(){removeAttachFile(fileDiv,uploadField);};
fileDiv.appendChild(deleteButton);