Ext.NET+asp.net 使用SWFUpload上传大文件

作者：袖梨 2022-06-25

Web方式的文件上传一直是个比较麻烦的问题，尤其是大尺寸(占用磁盘空间大)文件，幸亏有牛人引领Ajax潮流的到来，我们也有幸得以发挥。

本文就使用开源库SWFpload(详见官方说明)并结合Ext.NET来做一个带进度条的大尺寸文件上传Demo。
特点
  1. 多文件上传：支持一次选中多个文件上传，
  2. 大尺寸文件支持：想传多大都可以，暂未考虑断点续传
  3. 扩展名过滤：可对要上传的文件按扩展名进行过滤
  4. 进度条：上传进度条显示
先看看最终效果
 
SWFUpload简介
参考
什么是SWFUpload
    SWFUpload是一个客户端文件上传工具，最初由Vinterwebb.se开发，它通过整合Flash与JavaScript技术为WEB开发者提供了一个具有丰富功能继而超越传统标签的文件上传模式。
SWFUpload的主要特点
可以同时上传多个文件；
类似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库
首先，在GoogleCode中下载最新(2.5.0.beta3)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的引用