首先,大家可以去SWF的官网下载相关Demo或者源码。

官方地址:http://code.google.com/p/swfupload/

官方Demo:http://demo.swfupload.org/v220/

先新建一个项目,并从官网上下载最新的版本解压后添加到项目中。

在相应上传文件的html页,引用下载好的css、js文件,代码如下:

<!DOCTYPE html>
<html>
<head>
<title>SWFUpload Demos - Simple Demo</title>
<link href="../css/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../swfupload/swfupload.js"></script>
<script type="text/javascript" src="../swfupload/swfupload.queue.js"></script>
<script type="text/javascript" src="js/fileprogress.js"></script>
<script type="text/javascript" src="js/handlers.js"></script>
<script type="text/javascript">
var swfu; window.onload = function() {
var settings = {
flash_url : "../swfupload/swfupload.swf",
flash9_url : "../swfupload/swfupload_fp9.swf",
upload_url: "../../UploadHandler.ashx", //上传处理
file_size_limit : "100 MB",
file_types : "*.*",
file_types_description : "All Files",
file_upload_limit : 100,
file_queue_limit : 0,
custom_settings : {
progressTarget : "fsUploadProgress",
cancelButtonId : "btnCancel"
},
debug: false, // Button settings
button_image_url: "images/TestImageNoText_65x29.png",
button_width: "65",
button_height: "29",
button_placeholder_id: "spanButtonPlaceHolder",
button_text: '<span class="theFont">Hello</span>',
button_text_style: ".theFont { font-size: 16; }",
button_text_left_padding: 12,
button_text_top_padding: 3, // The event handler functions are defined in handlers.js
swfupload_preload_handler : preLoad,
swfupload_load_failed_handler : loadFailed,
file_queued_handler : fileQueued,
file_queue_error_handler : fileQueueError,
file_dialog_complete_handler : fileDialogComplete,
upload_start_handler : uploadStart,
upload_progress_handler : uploadProgress,
upload_error_handler : uploadError,
upload_success_handler : uploadSuccess,
upload_complete_handler : uploadComplete,
queue_complete_handler : queueComplete // Queue plugin event
}; swfu = new SWFUpload(settings);
};
</script>
</head>
<body>
<div id="header">
<h1 id="logo"><a href="../">SWFUpload</a></h1>
<div id="version">v2.5.0</div>
</div> <div id="content">
<h2>Simple Demo</h2>
<p>This page demonstrates a simple usage of SWFUpload. It uses the Queue Plugin to simplify uploading or cancelling all queued files.</p> <div class="fieldset flash" id="fsUploadProgress">
<span class="legend">Upload Queue</span>
</div>
<div id="divStatus">0 Files Uploaded</div>
<div>
<span id="spanButtonPlaceHolder"></span>
<input id="btnCancel" type="button" value="Cancel All Uploads" onclick="swfu.cancelQueue();" disabled="disabled" style="margin-left: 2px; font-size: 8pt; height: 29px;" />
</div> </div>
</body>
</html>

在项目中添加UploadHandler.ashx文件用来处理文件的上传,并在项目中添加UploadFile文件夹,用来存放上传的文件。

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))
{
Directory.CreateDirectory(uploadPath);
}
file.SaveAs(uploadPath + file.FileName);
//下面这句代码缺少的话,上传成功后上传队列的显示不会自动消失
context.Response.Write("");
}
else
{
context.Response.Write("");
}
}

简单的SWFUpload模型就架构完毕,运行后选择文件上传,就可以在UploadFile中找到了。

SWFUpload - JQuery上传插件的更多相关文章

  1. JQuery上传插件uploadify优化

    旧版的uploadify是基于flash上传的,但是总有那么些问题,让我们用的不是很舒服.今天主要分享下在项目中用uploadify遇到的一些问题,以及优化处理 官方下载 官方文档 官方演示 下面是官 ...

  2. jQuery上传插件,文件上传测试用例

    jQuery上传插件,文件上传测试用例 jQuery File Upload-jQuery上传插件介绍http://www.jq22.com/jquery-info230 jQuery File Up ...

  3. jquery上传插件uploadify 报错http error 302 解决方法之一

    前段时间用到jquery上传插件uploadify时,始终出现系统报出 http error 302 的错误. 网上大量搜集信息,基本上都是说session值丢失的问题,根据网友提供的解决方案进行修改 ...

  4. 【转】JQuery上传插件Uploadify使用详解及错误处理

    转自:http://www.jb51.net/article/43498.htm 关于JQuery上传插件Uploadify使用详解网上一大把,基本上内容都一样.我根据网上的步骤配置完成后,会报一些错 ...

  5. jQuery上传插件Uploadify使用帮助

    Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示.它的功能特色总结如下: 支持单文件或多文件上传,可控制并发上传的文件数 在服务器端支持各种语言与之配合使用,诸如PHP, ...

  6. JQuery上传插件Uploadify使用详解

    本文转载http://www.cnblogs.com/oec2003/archive/2010/01/06/1640027.html Uploadify是JQuery的一个上传插件,实现的效果非常不错 ...

  7. (转)JQuery上传插件Uploadify使用详解

    原文地址:http://www.cnblogs.com/oec2003/archive/2010/01/06/1640027.html Uploadify是JQuery的一个上传插件,实现的效果非常不 ...

  8. jquery上传插件Jquery.uploadify.js-转

    Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示.不过官方提供的实例时php版本的,本文将详细介绍Uploadify在Aspnet中的使用,您也可以点击下面的链接进行演示 ...

  9. SWFUpload批量上传插件

    SWFUpload是一个批量上传插件,在HTML4.1里面,估计也只有Flash+javascript配合才能够做到了.先复制个重要的网址,这个应该是官方的文档了,相当齐全. http://leeon ...

随机推荐

  1. GO语言学习

    1. 语言特色 可直接编译成机器码,不依赖其他库,glibc的版本有一定要求,部署就是扔一个文件上去就完成了. 静态类型语言,但是有动态语言的感觉,静态类型的语言就是可以在编译的时候检查出来隐藏的大多 ...

  2. oracle笔记一

    一.Oracle简介 1.Oracle属于关系型数据库,是一款可以在Client/Server模式下运行的RDBMS产品.2009年,Oracle公司收购SUN. 2.Oracle是对象关系型数据库管 ...

  3. 从下往上看--新皮层资料的读后感 第三部分 70年前的逆向推演- 从NN到ANN

    第三部分 NN-ANN 70年前的逆向推演 从这部分开始,调整一下视角主要学习神经网络算法,将其与生物神经网络进行横向的比较,以窥探一二. 现在基于NN的AI应用几乎是满地都是,效果也不错,这种貌似神 ...

  4. Java—多线程编程

    一个多线程程序包含两个或多个能并发运行的部分.程序的每一部分都称作一个线程,并且每个线程定义了一个独立的执行路径. 进程:一个进程包括由操作系统分配的内存空间,包含一个或多个线程.一个线程不能独立的存 ...

  5. AutoCAD安装失败

    问题一: Installing .NET Framework Runtime 4.0: D:\安装包\CAD\cad2012(x64)\Map3D2012(x64)\3rdParty\NET\4\wc ...

  6. #pragma pack(push,1)与#pragma pack(1)的区别

    这是给编译器用的参数设置,有关结构体字节对齐方式设置, #pragma pack是指定数据在内存中的对齐方式. #pragma pack (n)             作用:C编译器将按照n个字节对 ...

  7. CentOS_7.2安装Nginx_1.9

    一.安装依赖包和开发工具: yum install vim vim-enhanced wget zip unzip telnet ntsysv compat* apr* nasm* gcc gcc* ...

  8. Ubuntu 16.04 安装 .NET Core[转]

    upir@upir-Rev-1-0:~$ sudo sh -c 'echo "deb [arch=amd64] https://apt-mo.trafficmanager.net/repos ...

  9. The type String cannot be constructed. You must configure the container to supply this value.

    利用 Enterprise Library 5.0 Microsoft.Practices.EnterpriseLibrary.Common Microsoft.Practices.Enterpris ...

  10. .Net Core 跨平台系列之环境部署

    前言 作为一名.NET程序员,很多时候都会被什么拖控件.跨平台等字眼所鄙视过,但是在我的的内心还是没有把自己看低过.因为说到底,平台和语言只是我们吃饭的工具.很多时候公司的发展是取决于商业竞争的,微软 ...