首页 → 网站编程 → Asp.Net编程教程 → 详细讲解jquery带进度上传插件Uploadify(ASP.NET版本)使用

详细讲解jquery带进度上传插件Uploadify(ASP.NET版本)使用

时间:2010-1-19 0:13:26 来源:www.cnblogs.com 作者:冯威的学习专栏

本文将带给大家很帅的jquery上传插件，ASP.NET版本的哦，这个插件是Uploadify实现的效果非常不错，带进度显示。

首先到Uploadify官方下载这个插件：

官方下载

官方文档

官方演示

好，下载好之后，按下面的步骤来实现一个简单的上传功能。

1 创建Web项目，命名为JQueryUploadDemo，从官网上下载最新的版本解压后添加到项目中。

2 在项目中添加JQueryUploadHandler.ashx文件用来处理文件的上传。

3 在项目中添加UploadFile文件夹，用来存放上传的文件。

进行完上面三步后项目的基本结构如下图:

4 Default.aspx的html页的代码修改如下：

Code [http://www.xueit.com]

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Uploadify</title>
    <link href="JS/jquery.uploadify-v2.1.0/example/css/default.css"
     rel="stylesheet" type="text/css" />
    <link href="JS/jquery.uploadify-v2.1.0/uploadify.css"
     rel="stylesheet" type="text/css" />

    <script type="text/javascript"
     src="JS/jquery.uploadify-v2.1.0/jquery-1.3.2.min.js"></script>

    <script type="text/javascript"
     src="JS/jquery.uploadify-v2.1.0/swfobject.js"></script>

    <script type="text/javascript"
     src="JS/jquery.uploadify-v2.1.0/jquery.uploadify.v2.1.0.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function()
        {
            $("#uploadify").uploadify({
                'uploader': 'JS/jquery.uploadify-v2.1.0/uploadify.swf',
                'script': 'UploadHandler.ashx',
                'cancelImg': 'JS/jquery.uploadify-v2.1.0/cancel.png',
                'folder': 'UploadFile',
                'queueID': 'fileQueue',
                'auto': false,
                'multi': true
            });
        });  
    </script>

</head>
<body>
    <div id="fileQueue"></div>
    <input type="file" name="uploadify" id="uploadify" />
    <p>
        <a href="javascript:$('#uploadify').uploadifyUpload()">上传</a>| 
        <a href="javascript:$('#uploadify').uploadifyClearQueue()">取消上传</a>
    </p>
</body>
</html>