Adding Input control to the pages with jQuery has problem with HttpFileCollection in ASP.NET
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="File开发者_Python百科1" 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.
In your Example A, in the form tag has enctype="multipart/form-data">
<form id="form1" runat="server" enctype="multipart/form-data">
but there's no enctype property in Example B,
<form id="form1" runat="server">
Here's a reference on MSDN and a question about enctype property on asp.net forum.
If you need to only set form property of enctype to a specific page only, in case you are using master page, you can set property to that page like this:
If Not Page.IsPostBack() Then
Me.Form.Enctype = "multipart/form-data"
End If
Cheer. :D
加载中,请稍侯......
精彩评论