ASP.Net Gmail like multiple/single file upload with defined limit size
Create upload.aspx. Here is the aspx page and scripts;
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="upload.aspx.vb" Inherits="upload" %>
<!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 runat="server">
<title>Uploader</title>
<script language='Javascript' type="text/javascript">
function addFile() {
var ni = document.getElementById("fileDiv");
var objFileCount = document.getElementById("fileCount");
var num = (document.getElementById("fileCount").value - 1) + 2;
objFileCount.value = num;
var newdiv = document.createElement("div");
var divIdName = "file" + num + "Div";
newdiv.setAttribute("id", divIdName);
newdiv.innerHTML = '<input type="file" name="attachment" id="attachment"/><a href="#" onclick="javascript:removeFile(' + divIdName + ');">Remove </a>';
ni.appendChild(newdiv);
}
function removeFile(divName) {
var d = document.getElementById("fileDiv");
d.removeChild(divName);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="file" name="attachment" runat="server" id="attachment" onchange="document.getElementById('moreUploadsLink').style.display = 'block';" />
<input type="hidden" value="0" id="fileCount" />
<div id="fileDiv">
</div>
<div id="moreUploadsLink" >
<a href="javascript:addFile();">Attach another File</a>
</div>
<asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="btnUpload_Click" />
<br />
<asp:Label ID="lblStatus" runat="server"></asp:Label>
for single file upload set div id="moreUploadsLink" style="display: none"
</div>
</form>
</body>
</html>
Here is the vb code behind upload.vb
Partial Class upload
Inherits System.Web.UI.Page
Protected Sub btnUpload_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnUpload.Click
lblStatus.Text = "Uploading..."
System.Threading.Thread.Sleep(2000)
Dim temp As String = ""
Dim uploadFiles As HttpFileCollection = Request.Files
For i As Integer = 0 To uploadFiles.Count - 1
Dim uploadFile As HttpPostedFile = uploadFiles(i)
Dim fileName As String = System.IO.Path.GetFileName(uploadFile.FileName)
If fileName.Trim().Length > 0 Then
'uploadFile.SaveAs(Server.MapPath("./Others/") + fileName)
uploadFile.SaveAs(Server.MapPath("./") + fileName)
temp = temp & fileName & " Successfully Uploaded <br/>"
End If
Next
lblStatus.Text = temp
End Sub
End Class
Note: for single file upload set div id="moreUploadsLink" style="display: none"
To set the maximum upload size please see :
http://vinodkotiya.blogspot.com/2011/11/aspnet-file-upload-control-with-large.html
- Vinod Kotiya
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="upload.aspx.vb" Inherits="upload" %>
<!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 runat="server">
<title>Uploader</title>
<script language='Javascript' type="text/javascript">
function addFile() {
var ni = document.getElementById("fileDiv");
var objFileCount = document.getElementById("fileCount");
var num = (document.getElementById("fileCount").value - 1) + 2;
objFileCount.value = num;
var newdiv = document.createElement("div");
var divIdName = "file" + num + "Div";
newdiv.setAttribute("id", divIdName);
newdiv.innerHTML = '<input type="file" name="attachment" id="attachment"/><a href="#" onclick="javascript:removeFile(' + divIdName + ');">Remove </a>';
ni.appendChild(newdiv);
}
function removeFile(divName) {
var d = document.getElementById("fileDiv");
d.removeChild(divName);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="file" name="attachment" runat="server" id="attachment" onchange="document.getElementById('moreUploadsLink').style.display = 'block';" />
<input type="hidden" value="0" id="fileCount" />
<div id="fileDiv">
</div>
<div id="moreUploadsLink" >
<a href="javascript:addFile();">Attach another File</a>
</div>
<asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="btnUpload_Click" />
<br />
<asp:Label ID="lblStatus" runat="server"></asp:Label>
for single file upload set div id="moreUploadsLink" style="display: none"
</div>
</form>
</body>
</html>
Here is the vb code behind upload.vb
Partial Class upload
Inherits System.Web.UI.Page
Protected Sub btnUpload_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnUpload.Click
lblStatus.Text = "Uploading..."
System.Threading.Thread.Sleep(2000)
Dim temp As String = ""
Dim uploadFiles As HttpFileCollection = Request.Files
For i As Integer = 0 To uploadFiles.Count - 1
Dim uploadFile As HttpPostedFile = uploadFiles(i)
Dim fileName As String = System.IO.Path.GetFileName(uploadFile.FileName)
If fileName.Trim().Length > 0 Then
'uploadFile.SaveAs(Server.MapPath("./Others/") + fileName)
uploadFile.SaveAs(Server.MapPath("./") + fileName)
temp = temp & fileName & " Successfully Uploaded <br/>"
End If
Next
lblStatus.Text = temp
End Sub
End Class
Note: for single file upload set div id="moreUploadsLink" style="display: none"
To set the maximum upload size please see :
http://vinodkotiya.blogspot.com/2011/11/aspnet-file-upload-control-with-large.html
- Vinod Kotiya
Comments