允许用户一次上传多个文件
2024-07-21 02:17:00
供稿：网友
allowing users to upload multiple files at oncehttp://www.dotnetjunkies.com/images/trans.gif
summary: this article demonstrates how to allow users to upload multiple files from thier computer (the client) to your server. specifically, this article will demonstrate how to set up a page that has 5 htmlinputfile controls (rendered as <input type='file'> ) where a user can choose 5 images to upload. only .jpg and .gif extensions will be accepted on the server and each one will be saved to a different directory::so any image that has the extension .jpg will be saved to the jpgs direcory and .gif will be saved to the gifs directory and everything else isn't saved at all. before we get into the code i want to quickly go over some things that may or may not be new to you. first, system.web.httpfilecollection: this class "provides access to and organizes files uploaded by the client" - essentially, it contains a collection of httppostedfile classes and is access through the system.web.httpconext.current.response.files property. the second thing used is some static methods of the system.io.path class: the getfilename and getextension methods are used. the getfilename method will retrieve the file name and file extension from a path. the getextension method does exactly what it sounds like it should do. it gets the file extension from a file. let's take a look at the code. the first code listing is the webform code and the second is the webform's code behind file. note: for this to work properly you will have to create two sub-directories (gifs, jpgs) upload.aspx <!doctype html public "-//w3c//dtd html 4.0 transitional//en" > <html>
<head>
<title>::: upload sample ::: </title>
</head>
<body>
<center>
<form id="upload" method="post" runat="server" enctype="multipart/form-data">
<h3>multiple file upload example</h3>
<p>
<input type="file" runat="server" size="50" id="file1" name="file1"></p>
<p>
<input type="file" runat="server" size="50" id="file2" name="file2"></p>
<p>
<input type="file" runat="server" size="50" id="file3" name="file3"></p>
<p>
<input type="file" runat="server" size="50" id="file4" name="file4"></p>
<p>
<input type="file" runat="server" size="50" id="file5" name="file5"></p>
<p><strong>:: </strong>
<asp:linkbutton id="linkbutton1" runat="server" font-names="verdana" font-bold="true" font-size="xx-small">upload images</asp:linkbutton> <strong>::
</strong> <a href="javascript:document.forms[0].reset()" id="linkbutton2" style="font-weight:bold;font-size:xx-small;font-family:verdana">
reset form</a> <strong>::</strong></p>
<p>
<asp:label id="label1" runat="server" font-names="verdana" font-bold="true" font-size="xx-small" width="400px" borderstyle="none" bordercolor="white"></asp:label></p>
<p> </p>
</form>
</center>
</body>
</html> as usual the webform is pretty boiler plate. 5 htmlinputfile objects and some buttons for submitting the form and reseting the form. when this page is rendered you'll receive something like the following: http://www.dotnetjunkies.com/base/articles/2221/20020602t0201/20020602t0201.gif update.aspx.cs namespace howtos.multipleimageupdate
{
public class upload : system.web.ui.page
{
#region user defined code
protected system.web.ui.webcontrols.linkbutton linkbutton1;
protected system.web.ui.webcontrols.label label1;
private void page_load(system.object sender, system.eventargs e)
{
if ( this.ispostback )
this.saveimages();
}
private system.boolean saveimages() {
//loop through the files uploaded
system.web.httpfilecollection _files = system.web.httpcontext.current.request.files;
//message to the user
system.text.stringbuilder _message = new system.text.stringbuilder("files uploaded:<br>");
try
{
for ( system.int32 _ifile = 0; _ifile < _files.count; _ifile ++ )
{
// check to make sure the uploaded file is a jpg or gif
system.web.httppostedfile _postedfile = _files[_ifile];
system.string _filename, _fileextension;
_filename = system.io.path.getfilename(
_postedfile.filename);
_fileextension = system.io.path.getextension(
_filename);
if ( _fileextension == ".gif" )
{
//save file to the proper directory
_postedfile.saveas(
system.web.httpcontext.current.request.mappath(
"gifs/") + _filename);
_message.append(_filename + "<br>");
}
else if ( _fileextension == ".jpg" )
{
//save file to the proper directory
_postedfile.saveas(
system.web.httpcontext.current.request.mappath(
"jpgs/") + _filename);
_message.append(_filename + "<br>");
}
else {
_message.append(_filename + " <font color=/"red/">failed!! only .gif and .jpg images allowed!</font> <br>");
}
}
label1.text = _message.tostring();
return true;
}
catch ( system.exception ex )
{
label1.text = ex.message ;
return false;
}
}
#endregion
#region web form designer generated code
override protected void oninit(system.eventargs e)
{
//
// codegen: this call is required by the asp.net web form designer.
//
initializecomponent();
base.oninit(e);
}
/// <summary>
/// required method for designer support - do not modify
/// the contents of this method with the code editor.
/// </summary>
private void initializecomponent()
{
this.load += new system.eventhandler(this.page_load);
}
#endregion
}
}
well just be looking at the saveimages method. the first thing that's done is a new httpfilecollection object and a new stringbuilder object is created - the stringbuilder is used to create a message to the user. then we loop through the httpfilecollection object and verify whether a gif or jpeg was uploaded - if so it is saved to the proper directory and if not then nothing happens. take a look at the following images. the first is the page right before it is posted to the server and the second is right after. notice that there is both jpg, gif, and psd extensions being uploaded. right before http://www.dotnetjunkies.com/base/articles/2221/20020602t0201/20020602t0202.gif right after http://www.dotnetjunkies.com/base/articles/2221/20020602t0201/20020602t0203.gif notice that because the .psd file wasn't valid an error message was displayed to the user. conclusion: when you want to enable users to upload multiple files use the httpfilecollection to access the httppostedfile's uploaded.
