ASP.NET中使用jQuery Uploadify插件的详细教程

Jquery

uploadify

15 浏览量更新于2024-09-02 收藏 86KB PDF 举报

身份认证购VIP最低享 7 折!

30元优惠券

"这篇文章主要讲解了如何使用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页的代码修改如下：

<title>Uploadify</title>

rel="stylesheet" type="text/css" />

rel="stylesheet" type="text/css" />

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

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

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

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

<p>

<a href="javascript:$('#uploadify').uploadifyUpload()">上传</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页未读，立即下载

weixin_38590784

粉丝: 3
资源: 946

ASP.NET中使用jQuery Uploadify插件的详细教程

详解jQuery uploadify文件上传插件的使用方法

jquery uploadify h5上传

jquery.uploadify.js

uploadify多文件上传、

uploadify文件上传ssm

uploadify跳过flush插件

uploadify.js

java uploadify使用教程

uploadify案例

uploadify使用教程

uploadify-3.2下载

uploadify2.1.0+springmvc

uploadify 3.1 demo

修改头像+html5,html5 头像上传更换插件

struts2上传进度条

jq实现附件上传、展示、删除、放大、缩略图

selenium非input上传文件的所有方法

基于PHP.Mysql,apache搭建一个需要链接数据库，使用数据库中的用户密码登录的可以下载上传文件的网页

C# MVC .net frameWork批量上传多个文件

找文件上传漏洞的谷歌语法

最新资源