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

时间：2022-06-25 08:24:03 编辑：袖梨来源：一聚教程网

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

本文就使用开源库SWFpload(详见官方说明)并结合Ext.NET来做一个带进度条的大尺寸文件上传Demo。

特点

多文件上传：支持一次选中多个文件上传，
大尺寸文件支持：想传多大都可以，暂未考虑断点续传
扩展名过滤：可对要上传的文件按扩展名进行过滤
进度条：上传进度条显示

先看看最终效果

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的引用

推荐专题

最新下载

热门教程

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