I'm trying to add upload controls to the page.
This HTML mark-up with JavaScript is working fine but there s no option to remove the added control:
1. Example A
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!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>
<title>Multi File Upload</title>
</head>
<body>
<form id="form1" runat="server" enctype="multipart/form-data">
<p id="upload-area">
</p>
<input id="AddFile" type="button" value="Add file" onclick="addFileUploadBox()" />
<br />
<br />
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<p>
<asp:Button ID="btnSubmit" runat="server" Text="Upload Now" OnClick="btnSubmit_Click" /></p>
<span id="Span1" runat="server" />
<script type="text/javascript">
function addFileUploadBox() {
if (!document.getElementById || !document.createElement)
return false;
var uploadArea = document.getElementById("upload-area");
if (!uploadArea)
return;
var newLine = document.createElement("br");
uploadArea.appendChild(newLine);
var newUploadBox = document.createElement("input");
// Set up the new input for file uploads
newUploadBox.type = "file";
newUploadBox.size = "60";
// The new box needs a name and an ID
if (!addFileUploadBox.lastAssignedId)
addFileUploadBox.lastAssignedId = 100;
newUploadBox.setAttribute("id", "dynamic" + addFileUploadBox.lastAssignedId);
newUploadBox.setAttribute("name", "dynamic:" + addFileUploadBox.lastAssignedId);
uploadArea.appendChild(newUploadBox);
addFileUploadBox.lastAssignedId++;
}
</script>
</form>
</body>
</html>
1. Example A : the code behind
Protected Sub btnSubmit_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnSubmit.Click
Dim uploads As HttpFileCollection
uploads = HttpContext.Current.Request.Files
Dim sfile As String
For i As Integer = 0 To (uploads.Count - 1)
If (uploads(i).ContentLength > 0) Then
Dim c As String = System.IO.Path.GetFileName(uploads(i).FileName)
Try
uploads(i).SaveAs("C:\UploadedUserFiles\" + c)
sfile += uploads(i).FileName & "<br/>"
Span1.InnerHtml = "File Uploaded Sucessfully."
Catch Exp As Exception
Span1.InnerHtml = "Some Error occured."
End Try
End If
Next i
Label1.Text = sfile
End Sub
2. Example B with jQuery and option to "Remove" added control However when I changed JavaScript to jQuery, it doesn't work. I can add and remove control but when I submit no files are uploaded. Mark-up with jQuery:
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="add-remove-control.aspx.vb"
Inherits="APIU.Web.add_remove_control" %>
<!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></title>
<script src="_Assets/scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
var i = 1;
//allow only 3 elements
$('#add').click(function() {
if (i < 4) {
var add_input = '<input type="file" id="' + 'dynamic:' + i + '" name="' + 'dynamic:' + i + '" />
var add_link = '<a href="#" class="remove">Remove</a>'
$('body').append('<p>' + add_input + add_link + '</p>');
i++;
}
});
$('.remove').live('click', function() {
$(this).parent('p').remove();
i--;
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<a href="#" id="add">Add</a>
<input id="File1" type="file" runat="server" size="60" />
<asp:Button ID="Button1" runat="server" Text="Button" />
<br />
<p>
</p>
</div>
</form>
</body>
</html>
2. Example B: the code behind:
Protected Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs) Handles Button1.Click
Dim uploads As HttpFileCollection
uploads = HttpContext.Current.Request.Files
Dim sfile As String
For i As Integer = 0 To (uploads.Count - 1)
If (uploads(i).ContentLength > 0) Then
Dim c As String = System.IO.Path.GetFileName(uploads(i).FileName)
Try
uploads(i).SaveAs("C:\UploadedUserFiles\" + c)
sfile += uploads(i).FileName & "<br/>"
Catch Exp As Exception
End Try
End If
Next i
End Sub
Every thing was working fine with Example A, only there's no option to remove the added contorls.When I added "Remove" control option with jQuery in Example B, HttpFileCollection can't get any file from input control added to the page.