Asp.net中详解JQuery Uploadify上传插件与配置
43 浏览量
更新于2024-08-30
收藏 84KB PDF 举报
本文将深入探讨如何在ASP.NET环境中利用JQuery的Uploadify上传插件实现文件上传功能。Uploadify是一款功能强大的JavaScript上传工具，它允许用户选择并上传文件，同时提供进度显示，适用于多种服务器端语言环境，包括PHP。然而，由于官方示例主要针对PHP，这里我们将针对ASP.NET开发者提供详细的步骤和配置指南。
1. 首先，创建一个新的ASP.NET Web项目，命名为"JQueryUploadDemo"，确保从官方网站上获取最新的Uploadify版本，并将其解压后添加到项目结构中。这将为项目引入所需的JavaScript库和样式文件。
2. 在项目中，创建一个名为"UploadHandler.ashx"的特殊文件，这个文件用于处理上传文件的后端逻辑。在ASP.NET中，我们需要处理HTTP POST请求，并根据需求将文件保存到服务器或进一步处理。
3. 创建一个名为"UploadFile"的文件夹，作为存储上传文件的存储区域。确保该目录的权限设置正确，以便应用程序可以读写文件。
4. 在项目主页面"Default.aspx"的HTML代码中，对上传控件进行必要的配置。在<head>部分，添加Uploadify所需的CSS样式链接（如default.css和uploadify.css）以及jQuery和SwfObject（用于Flash支持）的JavaScript引用。然后，在<body>部分，初始化Uploadify插件，通过ID找到上传元素，并配置其属性，如uploader URL（指向UploadHandler.ashx），其他参数如'queueSizeLimit'、'fileTypeExts'等，以限制上传文件类型和队列大小。
```html
<script>
$(document).ready(function() {
$("#uploadify").uploadify({
'uploader': 'JS/jquery.uploadify-v2.1.0/uploadify.swf', // 上传文件的Flash组件URL
'script': 'UploadHandler.ashx', // 与UploadHandler.ashx通信的处理脚本地址
'folder': 'UploadFile', // 上传文件的保存路径
'auto': true, // 自动上传
'multi': true, // 允许一次上传多个文件
'cancelImg': 'JS/jquery.uploadify-v2.1.0/cancel.png', // 取消按钮的图片路径
'buttonText': '选择文件', // 上传按钮文本
'progressAll': 'progressBar', // 显示全局进度条的ID
'onSelectError': function(file, errorCode, errorString) { // 错误处理回调
alert('文件选择错误：' + errorString);
}
});
});
</script>
```
5. 最后，确保在ASP.NET项目的Web.config文件中添加对某些特性（如跨域文件上传）的配置，如果需要的话。例如，如果你的前端和后端不在同一个域名下，可能需要添加CORS设置以允许跨域请求。
通过以上步骤，你已经成功地在ASP.NET项目中集成并配置了Uploadify上传插件，用户现在可以方便地在网站上上传文件，并且可以看到实时的上传进度。记得测试各种情况，确保功能的稳定性和安全性。
AspNet中使用中使用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)
{
if (!Directory.Exists(uploadPath))
{
下载后可阅读完整内容，剩余3页未读，立即下载
点击了解资源详情
点击了解资源详情
点击了解资源详情
2013-04-04 上传
2020-10-24 上传
2011-11-11 上传
2022-06-24 上传
2010-09-29 上传
2010-06-10 上传
weixin_38528680
- 粉丝: 8
- 资源: 875
我的内容管理
展开
