ASP.NET uploadify插件：批量文件上传全攻略
78 浏览量
更新于2024-09-01
收藏 61KB PDF 举报
"ASP.NET插件uploadify批量上传文件完整使用教程"
本文将详细介绍如何在ASP.NET环境中使用uploadify插件实现文件的批量上传功能。Uploadify是一款基于jQuery的Flash插件，它允许用户通过简单的配置就能实现文件的多选、预览、上传进度显示等高级特性。
### 1. 准备工作
在使用uploadify之前，首先需要获取以下资源文件：
- uploadify的JavaScript文件：包括主JS文件`jquery.uploadify.v2.1.0.js`以及依赖的jQuery库`jquery-1.8.3.min.js`和SWFObject库`swfobject.js`。
- CSS样式文件：`uploadify.css`用于定义上传按钮和队列项的样式。
- Flash对象：uploadify依赖Flash来实现文件上传功能，确保用户的浏览器支持Flash并已安装。
### 2. 创建上传页面
创建一个名为`UpFilePage.aspx`的ASP.NET页面，将上述准备好的资源文件引用到HTML头部，如下所示：
```html
<head runat="server">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>上传文件</title>
<link href="/jquery.uploadify/uploadify.css" rel="stylesheet"/>
<script type="text/javascript" src="/jquery.uploadify/jquery-1.8.3.min.js"></script>
<script src="/jquery.uploadify/swfobject.js" charset="utf-8"></script>
<script src="/jquery.uploadify/jquery.uploadify.v2.1.0.js"></script>
<!-- 添加自定义样式 -->
<style type="text/css">
/* ...此处省略样式... */
</style>
</head>
```
### 3. 配置uploadify
在HTML body部分，创建一个input元素作为文件选择器，并为其添加id `uploadifyUploader`，然后在页面加载完成后使用jQuery初始化uploadify插件：
```html
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div>
<input id="uploadifyUploader" type="file" name="FileUpload" />
<!-- ...此处省略其他HTML... -->
</div>
</form>
<script type="text/javascript">
$(document).ready(function () {
$('#uploadifyUploader').uploadify({
'uploader': '/jquery.uploadify/uploadify.swf',
'script': 'UploaderHandler.ashx', // 这里是处理文件上传的服务器端代码
'cancelImg': '/jquery.uploadify/cancel.png',
'folder': '/uploads', // 文件保存的服务器目录
'queueID': 'fileQueue',
'fileDesc': '所有文件',
'fileExt': '*.*',
'auto': true,
'multi': true,
'simUploadLimit': 5, // 同时上传的最大文件数
'onUploadSuccess': function (file, data, response) {
// 上传成功后的回调函数
alert('文件' + file.name + '已成功上传');
},
'onUploadError': function (file, errorCode, errorMsg, errorString) {
// 上传失败的回调函数
alert('文件' + file.name + '上传失败：' + errorMsg);
}
});
});
</script>
</body>
```
### 4. 服务器端处理
在ASP.NET中，需要创建一个处理文件上传的HTTP Handler（如`UploaderHandler.ashx`），这个处理器将接收到uploadify发送的文件，并将其保存到指定的服务器目录。例如：
```csharp
public class UploaderHandler : IHttpHandler {
public void ProcessRequest(HttpContext context) {
if (context.Request.Files.Count > 0) {
foreach (HttpPostedFile file in context.Request.Files) {
string fileName = Path.GetFileName(file.FileName);
string savePath = Server.MapPath("~/uploads/" + fileName);
file.SaveAs(savePath);
context.Response.Write("文件" + fileName + "保存成功");
}
}
}
public bool IsReusable {
get { return false; }
}
}
```
### 5. 其他高级功能
uploadify还提供了许多其他功能，如自定义上传按钮样式、设置文件大小限制、文件类型过滤、上传进度条显示等。这些功能可以通过配置uploadify选项来实现，具体可参考uploadify的官方文档。
通过以上步骤，你已经能够在ASP.NET应用中实现uploadify的批量文件上传功能。记得根据实际需求调整配置，以满足项目中的具体要求。同时，考虑到Flash可能在某些现代浏览器中不再被支持，你可以考虑使用HTML5的File API来实现无Flash的上传方式。
ASP.NET插件插件uploadify批量上传文件完整使用教程批量上传文件完整使用教程
主要为大家详细介绍了ASP.NET插件uploadify批量上传文件完整使用教程，感兴趣的小伙伴们可以参考一下
uploadify批量上传文件完整使用教程，供大家参考，具体内容如下
1.首先准备uploadify的js文件，网上一搜一大堆
2.上传页面UpFilePage.aspx
关键代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>上传文件</title>
<link href="/jquery.uploadify/uploadify.css" rel="stylesheet" />
<script type="text/javascript" src="/jquery.uploadify/jquery-1.8.3.min.js"></script>
<script src="/jquery.uploadify/swfobject.js" charset="utf-8"></script>
<script src="/jquery.uploadify/jquery.uploadify.v2.1.0.js"></script>
<style type="text/css">
#fileSave { padding-left:5px; padding-right:5px;}
#fileSave .uploadifyQueueItem{ width:530px;}
#fileQueue { padding-left:5px; padding-right:5px;}
#fileQueue .uploadifyQueueItem { width:530px;}
#uploadifyUploader { position:absolute; opacity:0;}
.uploadify-button{ height: 30px; line-height: 30px; width: 109px; text-align:center; border:0px; margin-bottom:5px; background:#ff6600; color:#fff;}
.cancel a { background:url(/jquery.uploadify/cancel.png) no-repeat center center; display:inline-block; width:16px; height:16px;}
</style>
</head>
<body>
<form runat="server">
<div>
<div >
<div>
<input type="file" name="uploadify" />
<div><span>添加文件</span></div>
</div>
<div></div>
<div>
<%=GetFile() %>
</div>
</div>
</div>
</form>
<script type="text/javascript">
var fileCount = 0;
$(document).ready(function () {
fileCount = $("#fileSave>div.uploadifyQueueItem").length;
$("input[name='radPhone']:eq(0)").attr("checked", "checked");
$("#uploadify").uploadify({
'uploader': '/jquery.uploadify/uploadify.swf',//uploadify.swf 文件的相对路径
'script': '/jquery.uploadify/uploadHandler.ashx',//处理文件的程序
//'cancelImg': '/Scripts/jquery.uploadify/cancel.png',//取消图片
//'folder': 'upfiles',//上传文件存放的目录
'queueID': 'fileQueue',//文件队列的ID
//'fileDesc': '*.flv;*.mp4;*.wmv;*.avi;*.3gp;*.mpg;*.ppt;*.pptx',//上传格式限制
//'fileExt': '*.flv;*.mp4;*.wmv;*.avi;*.3gp;*.mpg;*.ppt;*.pptx',//上传格式限制
"queueSizeLimit": "5",//当允许多文件生成时，设置选择文件的个数
'auto': true,//设置为true当选择文件后就直接上传了
'multi': true,//设置为true时可以上传多个文件
"fileDataName": "imgFile",//设置一个名字，在服务器处理程序中根据该名字来取上传文件的数据
"sizeLimit": "5242880",//上传文件的大小限制,以字节为单位
"simUploadLimit": "1",// 允许同时上传的个数 默认值：1
"onSelect": function (e, queueId, fileObj) {
fileCount = $("#fileSave>div.uploadifyQueueItem").length;
var less = 5 - fileCount;
if (less <= 0) {
layer.msg("最多只能上传5个附件");
$("#a_upload").attr("href", "javascript:");
return false;
} else {
$("#a_upload").attr("href", "javascript:$('#uploadify').uploadifyUpload()");
return true;
}
},
"onComplete": function () {
$.ajax({
下载后可阅读完整内容，剩余4页未读，立即下载
2014-05-21 上传
点击了解资源详情
2011-03-16 上传
2010-03-02 上传
点击了解资源详情
2011-12-21 上传
2021-03-16 上传
weixin_38582716
- 粉丝: 6
- 资源: 929
我的内容管理
展开
最新资源
- R语言中workflows包的建模工作流程解析
- Vue统计工具项目配置与开发指南
- 基于Spearman相关性的协同过滤推荐引擎分析
- Git基础教程：掌握版本控制精髓
- RISCBoy: 探索开源便携游戏机的设计与实现
- iOS截图功能案例：TKImageView源码分析
- knowhow-shell: 基于脚本自动化作业的完整tty解释器
- 2011版Flash幻灯片管理系统：多格式图片支持
- Khuli-Hawa计划：城市空气质量与噪音水平记录
- D3-charts：轻松定制笛卡尔图表与动态更新功能
- 红酒品质数据集深度分析与应用
- BlueUtils: 经典蓝牙操作全流程封装库的介绍
- Typeout：简化文本到HTML的转换工具介绍与使用
- LeetCode动态规划面试题494解法精讲
- Android开发中RxJava与Retrofit的网络请求封装实践
- React-Webpack沙箱环境搭建与配置指南
