在ASP.NET中使用JQuery多文件上传插件

ASP.NET中使用JQuery多文件上传插件——jQuery Multiple File Upload Plugin V1.47()

 

继续我那“令人震奋的”ASP.NETJQuery探索之旅,今天的主题将演示如何在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.2JQuery VS 2008 DocMultiple 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>

请留意FileUploadclass=”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.NETcontent body提取这个信息插入到HttpFileCollection的特别成员。

‘HttpPostedFile’类提供了一系列方法和属性来访问每个文件的内容和属性。在我们的案例中,我们用类检查文件长度,名称和类型。

就这样。单击“浏览”按钮逐一上传文件。再次单击“浏览”按钮并选择你要上传的文件。为了演示效果,我选择了几个jpg类型的文件。

如果你希望限制上传的文件类型或文件最大个数,点击查看这个例子。

同样相当简单的从已选择列表中移除文件,就是通过点击每个文件左边的‘x’,如:我们通过点击‘x’来移除DesertLandscape.jpg

一旦你决定了上传以上这些文件,就可以单击‘Upload All’按钮将这些文件上传到服务器了。上传成功后,将有下如下信息显示给用户:

注意:当文件上传到服务器时,这里需要一些涉及到权限,文件大小等。我已高亮显示它们可能解决方法在一些上传过程中应该注意的要点.  感谢你的阅读,希望我的这篇文件对你有所帮助。下载文章中全部源代码请点击这里。

 

英文原文地址:http://www.dotnetcurry.com/ShowArticle.aspx?ID=317&AspxAutoDetectCookieSupport=1

文章内容我在VS2010JQuery1.4.1中也已验证通过,使用的是jQuery Multiple File Upload Plugin V1.47

由于初次做技术文章翻译,不足之处请各位大虾指教。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值