Asp.net中详解JQuery Uploadify上传插件与配置

168 浏览量更新于2024-08-30 收藏 84KB PDF 举报

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

30元优惠券

本文将深入探讨如何在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页的代码修改如下：页的代码修改如下：

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

{

if (!Directory.Exists(uploadPath))

{

下载后可阅读完整内容，剩余3页未读，立即下载

weixin_38528680

粉丝: 8
资源: 876

Asp.net中详解JQuery Uploadify上传插件与配置

MVC JQuery uploadIfy 批量上传并写入数据库信息

uploadify 3.2在ASP.NET下的例子

Aspnet中JQuery Uploadify上传插件详解与实战

AspNet中详解JQuery Uploadify插件上传功能实现

aspnet中datatable使用

Microsoft.AspNet.ScriptManager.WebForms位置在哪

针对第一点：请问一下安装了nuget包就行了吗？

使用 ADO.NET 从数据库中查询数据，并在 ASPNET 中显示为 GridView 表格，将代码及运行结果清晰完整拍照上 店

onbarcode.barcode.aspnet.dll

Microsoft.AspNet.WebApi.Cors

aspnet购物网站代码csdn

如何用Senparc.Weixin.AspNet写微信分享接口

如何用Senparc.Weixin.AspNet写一个微信分享接口

C:\inetpub\wwwroot\aspnet_client\system_web\4_0_30319可以删除吗

aspnet管理系统vs2019

aspnet图书管理源码毕业设计

学生信息管理系统代码aspnet

aspnet easyui视频教程

指定的任务可执行文件位置“C:\Program Files (x86)\MSBuild\Microsoft\WebDeployment\v10.0\aspnet_merge.exe”无效。

aspnet部分部署到iis

最新资源

使用 ADO.NET 从数据库中查询数据，并在 ASPNET 中显示为 GridView 表格，将代码及运行结果清晰完整拍照上店