jQuery上传插件Uploadify使用详解(3.2.1)

Sun, 25 Sep 2016 18:57:49 +0800

六年前，因为工作中使用到 jQuery 的上传组件 Uploadify ，写了一篇《JQuery上传插件Uploadify使用详解》的博客来介绍 Uploadify ，其实只是将官方文档简单翻译了下。几年下来居然有50多万的访问量，而且每天通过各种搜索引擎有大几百的朋友会访问到这篇文章。六年时间 Uploadify 从当时的2.1.0到了现在的3.2.1，变化还是挺大，为了对访问到之前那篇博客的朋友还有点价值，特写此篇。

jQuery上传插件Uploadify使用详解

Wed, 06 Jan 2010 00:00:00 +0800

本文Uploadify版本为2.1.0，已经过时，截止（2016-09-25）最新版本3.2.1的详细介绍请移步《jQuery上传插件Uploadify使用详解(3.2.1)》

Uploadify是jQuery的一个上传插件，实现的效果非常不错，带进度显示。不过官方提供的实例时php版本的，本文将详细介绍Uploadify在Aspnet中的使用，您也可以点击下面的链接进行演示或下载。

首先按下面的步骤来实现一个简单的上传功能。

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

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

3 在项目图:

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

<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>

5 UploadHandler类的ProcessRequest方法代码如下：

public void ProcessRequest(HttpContext context)
{
 context.Response.ContentType = "text/plain";
 context.Response.Charset = "utf-8"; 

 HttpPostedFile file = context.Request.Files["Filedata"];
 string uploadPath =
 HttpContext.Current.Server.MapPath(@context.Request["folder"])+"\\"; 

 if (file != null)
 {
 if (!Directory.Exists(uploadPath))
 {
 Directory.CreateDirectory(uploadPath);
 }
 file.SaveAs(uploadPath + file.FileName);
 //下面这句代码缺少的话，上传成功后上传队列的显示不会自动消失
 context.Response.Write("1");
 }
 else
 {
 context.Response.Write("0");
 }
}

6 运行后效果如下图：

Uploadify on 冯威的博客

jQuery上传插件Uploadify使用详解(3.2.1)

jQuery上传插件Uploadify使用详解

本文Uploadify版本为2.1.0，已经过时，截止（2016-09-25）最新版本3.2.1的详细介绍请移步《jQuery上传插件Uploadify使用详解(3.2.1)》