首先,大家可以去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. [经验] Win7减肥攻略(删文件不删功能、简化优化系统不简优化性能)

    [经验] Win7减肥攻略(删文件不删功能.简化优化系统不简优化性能) ☆心梦无痕☆ 发表于 2014-1-24 11:15:04 https://www.itsk.com/thread-316471 ...

  2. ubuntu16.04安装virtualbox5.1失败 gcc:error:unrecognized command line option ‘-fstack-protector-strong’

    系统:ubuntu16.04.1 软件:Virtualbox-5.1 编译器:GCC 4.7.4 在如上环境下安装Vbx5.1提示我在终端执行/sbin/vboxconfig命令 照做 出现如下err ...

  3. 话说Spring Security权限管理(源码)

    最近项目需要用到Spring Security的权限控制,故花了点时间简单的去看了一下其权限控制相关的源码(版本为4.2). AccessDecisionManager spring security ...

  4. 三、最小化的Spring XML配置

    Spring 提供了自动装配(自动识别如何装配Bean的依赖关系)和自动检测(检测哪些类需要被配置成Spring Bean) 1.自动装配Bean的属性 1.1四种类型得自动装配:byName.byT ...

  5. IT求职中,笔试、面试的算法准备

    PS:此文章为转载,源地址:http://www.newsmth.net/nForum/#!article/CoderInterview/849     作者应该是在美国进行的笔试面试,感觉面试的的公 ...

  6. vbscript input select 添加个option根据value值到指定位置--相当于排序

    '添加option到指定位置(按value排序) dim valindex valindex=-1 for i=0 to selcom.length-1 if selcom.Options(i).va ...

  7. 个人介绍和Github使用流程

    我叫石莉静,来自网络工程143班,学号1413042067 我的兴趣爱好有看电影.动漫,听音乐,摄影,寻找美食等等. 个人编程能力:非常真诚的说,我的编程能力蛮差的,用C++写过一共写过...(很少很 ...

  8. python 函数传递参数的多种方法

    python中函数根据是否有返回值可以分为四种:无参数无返回值,无参数有返回值,有参数无返回值,有参数有返回值. Python中函数传递参数的形式主要有以下五种,分别为位置传递,关键字传递,默认值传递 ...

  9. git push命令

    git push命令用于将本地分支的更新,推送到远程主机.它的格式与git pull命令相仿. $ git push <远程主机名> <本地分支名>:<远程分支名> ...

  10. Qt:Drag-Drop操作在QGraphicsView及Model/View框架下的实现

    最近使用到Qt的Drag Drop功能,结合自己的例子写下来给大家分享一下.实现从QTreeView拖动Node到QGraphicsView上,以及QGraphicsView上item之间的拖动. 先 ...