.net ASP.net JavaScript Multiple Upload

After doing some googling and based on our current project's requirement , this is how we'll handle mutiple upload

By using JavaScript , we'll dynamically create "input type='File'" object , and during postback , retrieve all the files using Request.Files

HTML

< div >
< a href="javascript:addUpload();" >Upload< /a >
< table id="tblContainerUpload" >
< /table >
< /div >
< br / >
< asp:Button ID="cmdSubmit" runat="server" Text="Submit" / >

JavaScript

function addUpload()
{
/* We have to change encoding type manually , so that we retrieve files using Request.Files */
if (document.forms[0].encoding != 'multipart/form-data') {
document.forms[0].encoding = 'multipart/form-data';
}
var tblContainer = document.getElementById('tblContainerUpload');
var lastRow = tblContainer.rows.length;
var row = tblContainer.insertRow(lastRow);
var cell = row.insertCell(0);
var lblFile = document.createElement('span');
var FileUpload = document.createElement('input');
var btnDelete = document.createElement('input');

/*
If you want to set a Css Class name for this column
cellRight.className ="ClassName";
*/

FileUpload.type = 'File';

FileUpload.name = 'FileUpload' + lastRow;

FileUpload.id = 'FileUpload' + lastRow;

FileUpload.style.width = '300px';

cell.appendChild(FileUpload);

/*
On FileUpload's onChange event :
Hide the FileUpload
Show the label that display FileName
Call addUpload() so that , new FileUpload will be shown
*/

FileUpload.onchange = function() { lblFile.innerHTML = FileUpload.value;FileUpload.style.display='none';btnDelete.style.display = "inline";addUpload(); };

lblFile.name = 'lblFile' + lastRow;

lblFile.id = 'lblFile' + lastRow;

lblFile.style.width = 0;

cell.appendChild(lblFile);

btnDelete.type = 'Button';

btnDelete.name = 'btnDelete' + lastRow;

btnDelete.id = 'btnDelete' + lastRow;

btnDelete.value ="Delete";

btnDelete.style.display = "none";

cell.appendChild(btnDelete);

btnDelete.onclick = function() { removeUpload(lastRow,FileUpload.id); };
}


function removeUpload(RowNum,C_ID) {
var tblContainer = document.getElementById('tblContainerUpload');
var FileUpload = document.getElementById(C_ID);

FileUpload.parentNode.removeChild(FileUpload);

/* Failed to delete row , so i just hide it */
tblContainer.rows[RowNum].style.display = 'none';
}

VB.net

Protected Sub cmdSubmit_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles cmdSubmit.Click
Dim strMsg As String = ""
For intFile As Integer = 0 To Request.Files.Count - 2
If Request.Files(intFile).FileName <> "" Then

Dim strLongFilePath As String = Request.Files(intFile).FileName.Trim.Replace(" ", "")
Dim intFileNameLength As Integer = InStr(1, StrReverse(strLongFilePath), "\")
Dim strFileName As String = Mid(strLongFilePath, (Len(strLongFilePath) - intFileNameLength) + 2)
Dim intFileSize As Decimal = Request.Files(intFile).ContentLength / (1024 * 1024)


strMsg &= "File #" & intFile & vbCrLf
strMsg &= "Filename :" & strFileName & vbCrLf
strMsg &= "Location :" & strLongFilePath & vbCrLf
strMsg &= "Size :" & System.Decimal.Round(intFileSize, 2) & " MB" & vbCrLf & vbCrLf
'Use this to save uploaded file to server directory
'Request.Files(intFile).SaveAs(Directory & File Name)

End If
'Msgbox is used to show uploaded file's information for demo purpose only
Next
MsgBox(strMsg, MsgBoxStyle.Information, "Uploading...")
End Sub