在ASP.NET中使用JQuery多文件上传插件——jQuery Multiple File Upload Plugin V1.47(译)
继续我那“令人震奋的”ASP.NET与JQuery探索之旅，今天的主题将演示如何在ASP.NET中使用JQuery实现多文件上传。Fyneworks.com开发了一个文件上传插件，名为“jQuery Multiple File Upload Plugin”。你可以从下面的地址下载该插件
http://www.fyneworks.com/jquery/multiple-file-upload/
如插件开发者的描述，这个多文件上传插件（jQuery.MultiFile）是一个不深奥或不难于理解的插件，它可以帮助用户轻松快速的选择多个文件，同时也提供一些基本的验证，帮助开发者在提交到服务器之前辨别一些简单错误。
在此篇文件中，我将演示如何用这个插件在ASP.NET环境中上传多个文件。我们还将显示上传后的信息-如文件名，大小和文件类型等信息。
我假设你已熟悉JQuery。如果你还不熟悉，我建议你浏览前面的文章Using jQuery with ASP.NET - A Beginner's Guide. 请注意本文使用Jquery当前的版本jQuery 1.3.2 and jQuery 1.3.2 Visual Studio 2008 Autocomplete documentation
第一步：打开VS2008> 文件 > 新建 > 网站 > 从模板中选择ASP.NET3.5网站 > 选择语言(C# or VB) > 输入存放位置 > 确定. 在解决方案资源管理器中,右击你的项目 > 新建文件夹 > 重命名为‘Scripts’. （VS2010则不用，已自带该文件夹）
第二步：下载JQuery 1.3.2，JQuery VS 2008 Doc和Multiple File Upload PlugIn。在第一步创建“Scripts”的文件夹中添加这些文件。
如果你已经下载了这些文件，请在页面的<head>元素节点添加对这些文件的引用如下：
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script>
<script src="Scripts/jquery.MultiFile.js" type="text/javascript"></script>
</head>
第三步：现在从工具箱拖拽一个ASP.NET FileUpload控件到页面。同样的方式添加一个Button控件到页面。这个Button控件将触发上传事件将文件上传到服务器。
<div>
<asp:FileUpload ID="FileUpload1" runat="server" class="multi" />
<br />
<asp:Button ID="btnUpload" runat="server" Text="Upload All"
onclick="btnUpload_Click" />
</div>
请留意FileUpload的class=”multi”属性设置。这是一个强制属性值。
第四步：最后一步是为Upload按钮添加代码。添加下面的代码：
C#
protected void btnUpload_Click(object sender, EventArgs e)
{
try
{
// Get the HttpFileCollection
HttpFileCollection hfc = Request.Files;
for (int i = 0; i < hfc.Count; i++)
{
HttpPostedFile hpf = hfc[i];
if (hpf.ContentLength > 0)
{
hpf.SaveAs(Server.MapPath("MyFiles") + "//" +
System.IO.Path.GetFileName(hpf.FileName));
Response.Write("<b>File: </b>" + hpf.FileName + " <b>Size:</b> " +
hpf.ContentLength + " <b>Type:</b> " + hpf.ContentType + " Uploaded Successfully <br/>");
}
}
}
catch (Exception ex)
{
}
}
VB.NET
Protected Sub btnUpload_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnUpload.Click
Try
' Get the HttpFileCollection
Dim hfc As HttpFileCollection = Request.Files
For i As Integer = 0 To hfc.Count - 1
Dim hpf As HttpPostedFile = hfc(i)
If hpf.ContentLength > 0 Then
hpf.SaveAs(Server.MapPath("MyFiles") & "/" & System.IO.Path.GetFileName(hpf.FileName))
Response.Write("<b>File: </b>" & hpf.FileName & " <b>Size:</b> " & hpf.ContentLength & " <b>Type:</b> " & hpf.ContentType & " Uploaded Successfully <br/>")
End If
Next i
Catch ex As Exception
End Try
End Sub
如上代码所示，‘HttpFileCollection’类用于获取上传的文件列表。文件被以multipart MIME格式编码和传输附于HTTP Content-Type头中。ASP.NET从content body提取这个信息插入到HttpFileCollection的特别成员。
‘HttpPostedFile’类提供了一系列方法和属性来访问每个文件的内容和属性。在我们的案例中，我们用类检查文件长度，名称和类型。
就这样。单击“浏览”按钮逐一上传文件。再次单击“浏览”按钮并选择你要上传的文件。为了演示效果，我选择了几个jpg类型的文件。
如果你希望限制上传的文件类型或文件最大个数，点击查看这个例子。
同样相当简单的从已选择列表中移除文件，就是通过点击每个文件左边的‘x’，如：我们通过点击‘x’来移除DesertLandscape.jpg
一旦你决定了上传以上这些文件，就可以单击‘Upload All’按钮将这些文件上传到服务器了。上传成功后，将有下如下信息显示给用户：
注意：当文件上传到服务器时,这里需要一些涉及到权限，文件大小等。我已高亮显示它们可能解决方法在一些上传过程中应该注意的要点. 感谢你的阅读，希望我的这篇文件对你有所帮助。下载文章中全部源代码请点击这里。
英文原文地址：http://www.dotnetcurry.com/ShowArticle.aspx?ID=317&AspxAutoDetectCookieSupport=1
文章内容我在VS2010和JQuery1.4.1中也已验证通过,使用的是jQuery Multiple File Upload Plugin V1.47。
由于初次做技术文章翻译，不足之处请各位大虾指教。
扫一扫
360
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
