Ext.NET+asp.net 使用SWFUpload上传大文件
作者：袖梨
2022-06-25
Web方式的文件上传一直是个比较麻烦的问题，尤其是大尺寸(占用磁盘空间大)文件，幸亏有牛人引领Ajax潮流的到来，我们也有幸得以发挥。
本文就使用开源库SWFpload(详见官方说明)并结合Ext.NET来做一个带进度条的大尺寸文件上传Demo。
特点
- 多文件上传：支持一次选中多个文件上传，
- 大尺寸文件支持：想传多大都可以，暂未考虑断点续传
- 扩展名过滤：可对要上传的文件按扩展名进行过滤
- 进度条：上传进度条显示
先看看最终效果
SWFUpload简介
什么是SWFUpload
SWFUpload是一个客户端文件上传工具，最初由Vinterwebb.se开发，它通过整合Flash与JavaScript技术为WEB开发者提供了一个具有丰富功能继而超越传统标签的文件上传模式。
SWFUpload的主要特点
可以同时上传多个文件；
类似AJAX的无刷新上传；
可以显示上传进度；
良好的浏览器兼容性；
兼容其他JavaScript库 (例如：jQuery, Prototype等)；
支持Flash 8和Flash 9；
类似AJAX的无刷新上传；
可以显示上传进度；
良好的浏览器兼容性；
兼容其他JavaScript库 (例如：jQuery, Prototype等)；
支持Flash 8和Flash 9；
关于SWFUpload的介绍就说这么多，更多介绍及基本使用。
准备工作
环境
VS2010，.NET4.0、Ext.NET1.2、SWFUpload2.5beta3
开始之前，我们先添加对Ext.NET的引用及下载SWF最新版。
添加引用最新Ext.NET
推荐使用NuGet来添加对Ext.NET的引用。
添加NuGet扩展
在“联机库”中搜索”NuGet”添加扩展，最终如下:
用NuGet添加Ext.NET引用
VS中右键项目，单击”Manage NuGet Package…”
在”Online”中搜索”Ext.Net”，添加之，最终效果如下
这样我们的引用中就添加了如下几个DLL
引入SWFUpload库
首先，在中下载，
我们将其中”swfupload_fp10”目录下的”swfupload.js”和”swfupload.swf”两个文件Copy到我们的项目”swfupload”目录下，如下图
配置Web.config
当然不能忘记先要在Web.config中的配置，见代码注释
?>
configuration>
configSections>
section name="extnet" type="Ext.Net.GlobalConfig" requirePermission="false" />
configSections>
system.web>
httpRuntime executionTimeout="5400" maxRequestLength="20480000" useFullyQualifiedRedirectUrl="false" />
compilation debug="true" targetFramework="4.0" />
pages>
controls>
add assembly="Ext.Net" namespace="Ext.Net" tagPrefix="ext" />
controls>
pages>
httpHandlers>
add path="*/ext.axd" verb="*" type="Ext.Net.ResourceHandler" validate="false" />
httpHandlers>
httpModules>
add name="DirectRequestModule" type="Ext.Net.DirectRequestModule, Ext.Net" />
httpModules>
system.web>
appSettings>
add key="UploadPath" value="UpLoadFiles" />
appSettings>
extnet theme="Default" />
system.webServer>
validation validateIntegratedModeConfiguration="false" />
modules>
add name="DirectRequestModule" preCondition="managedHandler" type="Ext.Net.DirectRequestModule, Ext.Net" />
modules>
handlers>
add name="DirectRequestHandler" verb="*" path="*/ext.axd" preCondition="integratedMode" type="Ext.Net.ResourceHandler" />
handlers>
system.webServer>
configuration>
OK,准备已妥。
文件上传页面
引入SWFUpload.js库
在前端aspx中head节加入swfupload.js的引用
>
添加Store
添加一个Store用来存储已上传的文件,当然，这块可以保存在远端服务器中，示例中并未这么做，代码如下
| 代码如下 | 复制代码 |
|
|
铺满窗口一个Grid，下方有上传按钮和进度条,当然进度条可以为模式窗体方式显示，此处没有这么做，因为正在上传时可再添加更多的文件用来上传，如本文开始处的图例所示。
| 代码如下 | 复制代码 |
|
|
| 代码如下 | 复制代码 |
%>
"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.**w*3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
html xmlns="http://www.w***3.org/1999/xhtml">
head runat="server">
title>SimpleSwfupload>
script type="text/javascript" src="swfupload/swfupload.js">>
script type="text/javascript" src="js/swfuploadevent.js">>
script type="text/javascript" src="js/InitSwfUpload.js">>
script type="text/javascript" src="Simple.js">>
style type="text/css">
.ContentsStyle
{
font-size: 14px;
}
>
head>
body>
form id="form1" runat="server">
ext:ResourceManager ID="ResourceManager1" runat="server">
Listeners>
%>
|
|
之所以会分这么多的js文件，为了将不相干的功能分离出来，更有效的帮助大家学习使用，请理解。
请看注意看代码中的注释。
添加InitSwfUpload.js
此处主要是swfupload的初始化工作
代码如下
复制代码
///
添加swfuploadevent.js此处主要是一些上传动作对应的事件，如上传开始、失败、成功、完成等等都可以写在此处。
代码如下
复制代码
///
请下载最新版Flash.");
//alert("You need the Flash Player 9.028 or above to use SWFUpload.");
return false;
}
}
//加载失败
function swfupload_load_failed_function() {
var t = this;
}
//加载后
function swfupload_loaded_function() {
var t = this;
}
function mouse_click_function() {
var t = this;
}
function mouse_over_function() {
var t = this;
}
function mouse_out_function() {
var t = this;
}
function file_dialog_start_function() {
var t = this;
}
function file_queued_function(file) {
var t = this;
}
//文件队列错
function file_queue_error_function(file, errorCode, message) {
var t = this;
}
//文件上传完成
function file_dialog_complete_function(fileSelectedCount, numberOfFilesQueued, totalNumberOfFilesInTheQueued) {
if (fileSelectedCount > 0) {
swfu.startUpload();//如果队列中还有未上传文件，则继续，若没有，一次只能上传一个文件
}
}
//开始上传
function upload_start_function(file) {
pbar.show();
btnCancelFileUpload.show();
}
//更新进度条
function upload_progress_function(file, completeBytes, totalBytes) {
var percent = Math.ceil((completeBytes / totalBytes) * 100);
pbar.updateProgress(percent / 100, file.name + ":" + percent + "%");
}
function upload_error_function(file, errorCode, message) {
var t = this;
}
//上传成功
function upload_success_function(file, data, received) {
if (received) {
var TopicRecord = Ext.data.Record.create([
{ name: 'ID', type: 'string' },
{ name: 'FileName', type: 'string' },
{ name: 'FileSize', type: 'int' },
{ name: 'FileExtension', type: 'string' },
{ name: 'FileCreationDate', type: 'date' },
{ name: 'FileModificationDate', type: 'date' },
{ name: 'FilePath', type: 'string' },
{ name: 'FileIndex', type: 'int' },
{ name: 'FileId', tyep: 'int' }
]);
var myNewRecord = new TopicRecord({
ID: file.id,
FileName: file.name,
FileSize: file.size,
FileExtension: file.type,
FileCreationDate: file.creationdate,
FileModificationDate: file.modificationdate,
FilePath: data,
FileIndex: file.index,
FileId: file.index
});
storeFiles.add(myNewRecord);//向Store中添加一行数据
}
}
//全部上传完成
function upload_complete_function(file) {
btnCancelFileUpload.hide();
pbar.reset();
pbar.updateText("");
pbar.hide();
swfu.startUpload();
}
function debug_function() {
var t = this;
}
function CancelFileUpload() {
var s = swfu;
swfu.cancelUpload();
}
添加Simple.js此处主要是对界面的操作，与swfupload关系不大
代码如下
复制代码
///
添加后端cs方法在XXX.ASPX.CS文件中，添加实际删除文件的方法，代码如下
| 代码如下 | 复制代码 |
using System;
using Ext.Net;
namespace SwfUploadDemo
{
public partial class Simple : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
///
|
|
右键项目，添加，一般处理程序，名称为FileUpload.ashx，后端.CS文件中代码如下
| 代码如下 | 复制代码 |
using System;
using System.Web;
using System.IO;
namespace SwfUploadDemo
{
///
|
|
