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.