ASP.NET中使用jQuery Uploadify插件的详细教程
172 浏览量
更新于2024-09-02
收藏 86KB PDF 举报
"这篇文章主要讲解了如何使用Jquery Uploadify插件实现文件上传功能，包括在ASP.NET环境下的具体步骤。Uploadify是一个优秀的jQuery插件，具有进度条显示功能，适用于需要用户界面友好的文件上传场景。"
在本文中，我们将深入探讨Jquery Uploadify插件的使用方法，以便在ASP.NET项目中实现文件上传功能。
首先，你需要创建一个新的Web项目，例如命名为“JQueryUploadDemo”。接着，从Uploadify官方网站获取最新版本的插件，并将其解压缩后添加到你的项目中。这一步确保你使用的是最新的、稳定的Uploadify版本。
其次，为了处理上传的文件，你需要在项目中添加一个名为“UploadHandler.ashx”的HTTP处理程序。这个处理程序将接收并处理由Uploadify插件发送的文件。通过编写适当的C#或VB.NET代码，你可以实现文件保存到服务器的逻辑。
接下来，创建一个名为“UploadFile”的文件夹，此文件夹将作为上传文件的存储位置。这样，当用户上传文件后，它们会被保存在这个特定的目录下，便于管理和检索。
完成上述步骤后，你的项目结构应该如图所示。接下来，我们需要在Default.aspx页面上设置HTML和JavaScript代码以启用Uploadify功能。以下是一段示例代码：
```html
<!DOCTYPE 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插件
$("#fileInput").uploadify({
'uploader': 'JS/jquery.uploadify-v2.1.0/uploadify.swf',
'script': 'UploadHandler.ashx', // 指向你的HTTP处理程序
'cancelImg': 'JS/jquery.uploadify-v2.1.0/cancel.png',
'folder': 'UploadFile', // 上传文件的目标文件夹
'queueID': 'fileQueue',
'auto': true,
'multi': true,
'onQueueFull': function (event, queueAmount) {
alert("队列已满，不能继续上传");
},
'onComplete': function (event, ID, fileObj, response, data) {
alert('文件' + fileObj.name + '已成功上传');
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="fileInput" type="file" name="fileInput" />
</div>
<div id="fileQueue"></div>
</form>
</body>
</html>
```
这段代码展示了如何使用jQuery和Uploadify插件初始化文件输入元素（`<input type="file">`）。它配置了插件的各项参数，如SWF文件路径、HTTP处理程序地址、目标文件夹、队列ID、自动上传以及事件处理函数（如文件上传完成时的回调）。
至此，你已经具备了使用Jquery Uploadify插件在ASP.NET项目中实现文件上传的基本知识。记得根据实际需求调整代码和设置，例如添加错误处理、限制文件类型和大小等。通过Uploadify，你可以创建一个具有直观进度反馈和用户友好界面的文件上传功能。
Jquery uploadify上传插件使用详解上传插件使用详解
主要介绍了JQuery上传插件Uploadify使用，文章给出详细的步骤来实现一个简单的上传功能，感兴趣的小伙伴
们可以参考一下
Uploadify是JQuery的一个上传插件，实现的效果非常不错，带进度显示。不过官方提供的实例时php版本的，本文将详细介
绍Uploadify在Aspnet中的使用，您也可以点击下面的链接进行演示或下载。
首先按下面的步骤来实现一个简单的上传功能。
1 创建Web项目，命名为JQueryUploadDemo，从官网上下载最新的版本解压后添加到项目中。
2 在项目中添加UploadHandler.ashx文件用来处理文件的上传。
3 在项目中添加UploadFile文件夹，用来存放上传的文件。
进行完上面三步后项目的基本结构如下图:
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)
{
下载后可阅读完整内容，剩余3页未读，立即下载
116 浏览量
点击了解资源详情
219 浏览量
252 浏览量
点击了解资源详情
2019-06-10 上传
2023-02-28 上传
2023-02-28 上传
weixin_38590784
- 粉丝: 3
- 资源: 946
我的内容管理
展开
