开发学院网页设计 JavaScript JQuery上传插件Uploadify使用详解阅读

JQuery上传插件Uploadify使用详解

　2010-01-07 00:00:00　来源：WEB开发网　　　

核心提示：Uploadify是JQuery的一个上传插件，实现的效果非常不错，JQuery上传插件Uploadify使用详解，带进度显示，不过官方提供的实例时php版本的，2 在项目中添加UploadHandler.ashx文件用来处理文件的上传，3 在项目中添加UploadFile文件夹，本文将详细介绍Uploadify在As

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

官方下载

官方文档

官方演示

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

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

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

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

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

JQuery上传插件Uploadify使用详解

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>