This tutorial will show you how to use the File Field Control to allow end-users to upload one or many files to your server.
Using the File Field Control to Upload one/many Files
This tutorial will show you how to use the File Field Control to allow end-users to upload one or many files to your server.
In this tutorial we will demonstrate the file field control
that uses the HtmlInputFile class. This is a pretty cool control
because it does things that were difficult to do in previous versions
of ASP.NET. The File Field control uploads files to the server from the
client’s machine.
The File Field Control allows access to program the HTML <input
type=”file”> tag. This is used to work with file data within an HTML
form. Here is an example of a form with a single File Field Upload
Control:
<form runat="server" enctype="multipart/form-data">
Select a file to upload:
<input type="file"
id="File1"
runat="Server">
<p>
<input type="btnSubmit"
id="Submit1"
runat="Server"
value="Upload File"
OnServerClick="UploadButton_Click">
<p>
<span id="Span1"
runat="Server" />
</form>
|
Notice the <form enctype= “multipart/form-data”> tag. The
enctype attribute’s purpose is to indicate how form data should be
encoded before it’s sent to the location defined in the action
attribute. By default, form data is encoded so that spaces are
converted to "+" symbols. Special characters for example, like
apostrophes, percentage and other symbols, etc.. are converted to their
ASCII HEX equivalents.
Need help with Windows Dedicated Hosting? Try Server Intellect I'm a happy customer!
In this case the possible values are "multipart/form-data", which is
required when you’re using forms that have a file upload control like
we have. This ensures that no character conversion takes place, and
transfers form data as a compound MIME document, and "text/plain",
which converts spaces to "+" symbols, but doesn’t HEX-encode special
characters such as apostrophes.
And here is the script:
<script runat="server">
void UploadButton_Click(Object sender, EventArgs e)
{
if (File1.PostedFile != null)
{
try
{
File1.PostedFile.SaveAs("C:\\UploadedUserFiles");
Span1.InnerHtml = "Uploaded Successfully!";
}
catch (Exception ex)
{
Span1.InnerHtml = "Error saving file C:\\" + File1.Value + "<br>" + ex.ToString();
}
}
}
</script>
|
When the page is run, it is easy to select and upload files to the
server by clicking the Upload File button. Also, be sure to use the
correct path when writing your files to a server.
Now we are going to upload multiple files at the same time. We have
gone over how to upload files to the server, now let’s take a look at
how to upload multiple files to a server from a single page.
Unfortunately, there are no built-in capabilities in the .NET Framework
that enables you to upload multiple files from a single page.
If you're looking for a really good web host, try Server Intellect - we found the setup procedure and control panel, very easy to adapt to and their IT team is awesome!
First, we need to import the System.IO class into your ASP.NET page,
and use HttpFileCollection class to capture all the files that are sent
within the Request object. By doing this you can upload as many files
as want, simultaneously from a single page.
In this next code block we will build an ASP.NET page similar to the
one we just created but now with three file-input boxes and a
UploadSubmitButton. After the user clicks the UploadSubmitButton and
the files are posted to the server, the code behind takes the files and
saves them to a specific location on the server. Then after they are
saved the info that was posted is now displayed on the same page.
<form id="myForm" enctype="multipart/form-data" runat="server">
<fieldset>
<legend>
Select the first File :<br />
</legend>
<input id="File1"
type="file"
runat="Server" />
<br />
Select the second File :<br />
</legend>
<input id="File2"
type="file"
runat="Server" />
<br />
Select the third File :<br />
</legend>
<input id="File3"
type="file"
runat="Server" />
<br />
</fieldset>
<p>
<input id="btnSubmit"
type="submit"
value="Upload Files"
runat="Server"
onserverclick=" UploadSubmitButton _Click" />
<br />
</p>
<span id="Span1"
runat="Server">
<asp:ScriptManager
ID="ScriptManager1"
runat="server">
</asp:ScriptManager>
<br />
</form>
|
And here is the script:
<script runat="server">
protected void UploadSubmitButton _Click(Object sender, EventArgs e)
{
string filepath = "C:\\UploadedUserFiles";
HttpFileCollection uploadedFiles = Request.Files;
for (int i = 0; i < uploadedFiles.Count; i++)
{
HttpPostedFile userPostedFile = uploadedFiles[i];
try
{
if (userPostedFile.ContentLength > 0 )
{
Span1.InnerHtml += "File #" + (i+1) +
"";
Span1.InnerHtml += "File Content Type: " +
userPostedFile.ContentType + "";
Span1.InnerHtml += "File Size: " +
userPostedFile.ContentLength + "kb";
Span1.InnerHtml += "File Name: " +
userPostedFile.FileName + "";
userPostedFile.SaveAs(filepath + "\\" +
System.IO.Path.GetFileName(userPostedFile.FileName));
Span1.InnerHtml += "Location was saved: " +
filepath + "\\" +
System.IO.Path.GetFileName(userPostedFile.FileName) + "</p>";
}
}
catch (Exception Ex)
{
Span1.InnerText += "Wait! An Error Occurred: " + Ex.Message;
}
}
}
</script>
|
Now the user can select up to three files then click the
UploadSubmitButton, which initializes the UploadSubmitButton _Click
event. By using the HttpFileCollection class with the request.Files
property lets you gain control over all the files that have been
uploaded from the page.
When the files are in this state, you can manipulate them however
you wish. In our case, the files’ properties are read and written to
the screen. At the end, the files are saved to the
"C:\\UploadedUserFiles" folder in the root directory of the server.
Yes, it is possible to find a good web host. Sometimes it takes a while. After trying several, we went with Server Intellect
and have been very happy. They are the most professional, customer
service friendly and technically knowledgeable host we've found so far.
One point that can not go unnoticed about this example is the states
of the file input text boxes are not saved with the postback. The Fiel
Field Control is a very powerful control that gives the capability to
your end-users to upload one or more files to your server. It is
possible to control the size of each file in the web.config file under
<system.web> node.
|
