asp.net+swfupload 多图片批量上传(附源码下载)
asp.net的文件上传都是单个文件上传方式，无法执行一次性多张图片批量上传操作，要实现多图片批量上传需要借助于flash，通过flash选取多个图片(文件)，然后再通过后端服务进行上传操作.
本次教程所使用的flash上传文件是 swfupload,下面会有源码下载链接。
使用工具 vs 2010。
演示效果图
第一步 新建一个web项目
第二步 引入所需swfuplod文件（swfupload.swf,js,css等)
第三步 新建一个一般处理程序(upload.ashx)
upload.ashx程序文件代码
using System;
using System.Collections.Generic;
using System.Web;
using System.IO; namespace yuyue.upload
{
/// <summary>
/// upload 的摘要说明
/// </summary>
public class upload : IHttpHandler
{ public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
try
{
HttpPostedFile file;
for (int i = ; i < context.Request.Files.Count; ++i)
{
file = context.Request.Files[i];
if (file == null || file.ContentLength == || string.IsNullOrEmpty(file.FileName)) continue;
string filename = DateTime.Now.ToString("yyyyMMddHHmmss") + RndNumStr() + Path.GetExtension(file.FileName); //文件名=上传日期+随机字符串+扩展名（可避免多人上传是第一名问题) /********************文件夹**************************/
string year=DateTime.Now.Year.ToString();
string monthday = DateTime.Now.ToString("MMdd"); if (!Directory.Exists(HttpContext.Current.Server.MapPath("/uploads/")+year))
{
Directory.CreateDirectory(HttpContext.Current.Server.MapPath("/uploads/") + year);
}
if (!Directory.Exists(HttpContext.Current.Server.MapPath("/uploads/") + year + "/" + monthday))
{
Directory.CreateDirectory(HttpContext.Current.Server.MapPath("/uploads/") + year + "/" + monthday);
}
file.SaveAs(HttpContext.Current.Server.MapPath("/uploads/" + year + "/" + monthday + "/" + filename));
context.Response.Write("/uploads/" + year + "/" + monthday + "/" + filename);//输出上传地址以用于前台js获取 }
}
catch (Exception ex)
{
context.Response.StatusCode = ;
context.Response.Write(ex.Message);
context.Response.End();
}
finally
{
context.Response.End();
}
} #region 该方法用于生成指定位数的随机字符串
/// <summary>
/// 该方法用于生成指定位数的随机字符串
/// </summary>
/// <param name="VcodeNum">参数是随机数的位数</param>
/// <returns>返回一个随机数字符串</returns>
public static string RndNumStr(int VcodeNum)
{
string[] source = { "", "", "", "", "", "", "", "", "", "", "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z" }; string checkCode = String.Empty;
Random random = new Random();
for (int i = ; i < VcodeNum; i++)
{
checkCode += source[random.Next(, source.Length)];
}
return checkCode;
}
#endregion public bool IsReusable
{
get
{
return false;
}
}
}
}
第四步 新建一个web窗体(swfupload.aspx)
swfupload.aspx 文件源码
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="swfupload.aspx.cs" Inherits="yuyue.upload.swfupload" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>文件上传</title>
<link href="/statics/js/swfupload/css.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/statics/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="/statics/js/swfupload/swfupload.js"></script>
<script type="text/javascript" src="/statics/js/swfupload/swfupload.queue.js"></script>
<script type="text/javascript" src="/statics/js/swfupload/fileprogress.js"></script>
<script type="text/javascript" src="/statics/js/swfupload/filegroupprogress.js"></script>
<script type="text/javascript" src="/statics/js/swfupload/handlers.js"></script>
<asp:Literal ID="Literal1" runat="server"></asp:Literal> <script type="text/javascript">
function album_cancel(obj,src) {
$(obj).toggleClass("on");
if ($(obj).hasClass("on")) {
$("#tb_imgurls").val($("#tb_imgurls").val() + src);
$("#piclists").val($("#piclists").val() + "<li><a href=\"" + src.toString().substring(, src.length - ) + "\" title=\"点击图片查看大图\" onclick=\"return hs.expand(this)\"><img src='" + src.toString().substring(, src.length - ) + "' width='86' height='80' alt='点击图片查看大图'></a></li>");
}
else {
var str = $("#tb_imgurls").val();
var strpic = $("#piclists").val();
$("#tb_imgurls").val(str.replace(src, ''));
$("#piclists").val(strpic.replace("<li><a href=\"" + src.toString().substring(, src.length - ) + "\" title=\"点击图片查看大图\" onclick=\"return hs.expand(this)\"><img src='" + src.toString().substring(, src.length - ) + "' width='86' height='80' alt='点击图片查看大图'></a></li>", ""));
}
} function confirmupload() {
parent.$("#relaimg").val(parent.$("#relaimg").val()+$("#tb_imgurls").val());
parent.$(".piclist").html(parent.$(".piclist").html() + $("#piclists").val());
parent.TB_remove();
} </script> </head>
<body>
<form name="frmMain" method="post" action="upload.ashx" id="frmMain" enctype="multipart/form-data">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE0MDkxNzYwNDNkZITPwV8CB9intILgmCGmWeJNXndY" />
</div>
<table cellpadding="">
<tr>
<td style="padding:5px;"><span id="spanButtonPlaceHolder"></span></td>
<td style="padding:5px;"><span class="btn_upload" onclick='swfu.startUpload()'><img src="/statics/js/swfupload/images/swfBnt_upload.png" /></span></td>
<td style="padding:5px;"><div id="nameTip" class="onShow">最多上传<font color="red"> <asp:Literal ID="Literal2" runat="server"></asp:Literal></font> 个附件,单文件最大 <font color="red"><asp:Literal ID="Literal3" runat="server"></asp:Literal></font></div></td>
</tr>
<tr>
<td colspan="" style="padding:5px;">支持 <asp:Literal ID="Literal4" runat="server"></asp:Literal>格式。</td>
</tr>
</table>
<div class="uploadbox">
<span class="uploadbox_t">列表</span>
<div id="divprogresscontainer"></div>
<div id="divprogressGroup"></div>
<div id="piclist">
<ul> </ul>
</div>
</div>
<br /><br />
<input type="hidden" name="tb_imgurls" id="tb_imgurls" value=""/><br />
<input type="hidden" name="piclists" id="piclists" value=""/>
<div style="margin-left:300px;clear:both;">
<table>
<tr>
<!-- 此处是用于我项目Thickbox应用 可忽略-->
<td><div class="submit"><input type="button" value="确定" onclick="confirmupload()"/></div></td>
<td><div class="submit"><input type="button" value="取消" onclick="parent.TB_remove();" /></div> </td>
</tr>
<!-- end -->
</table> </div>
</form> </body>
</html>
swfupload.aspx.cs 文件源码
using System;
using System.Collections.Generic; using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls; namespace yuyue.upload
{
public partial class swfupload : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
//构造 swfupload.swf 所需js文件
Literal1.Text += "<script type=\"text/javascript\">\n";
Literal1.Text += " var swfu;\n"; Literal1.Text += " window.onload = function () {\n";
Literal1.Text += " var settings = {\n";
Literal1.Text += " flash_url: \"/statics/js/swfupload/swfupload.swf\",\n";
Literal1.Text += " upload_url: \"upload.ashx\",\n";
if (Request.QueryString["file_size_limit"] != null)
{
Literal1.Text += " file_size_limit: \"" + Request.QueryString["file_size_limit"] + "\",\n";//文件大小限制
Literal3.Text = Request.QueryString["file_size_limit"];
}
else
{
Literal1.Text += " file_size_limit: \"2 MB\",\n";
Literal3.Text = "2 MB";//文件大小限制
} if (Request.QueryString["file_types"] != null)
{
Literal1.Text += " file_types: \"" + Request.QueryString["file_types"] + "\",\n";
Literal4.Text = Request.QueryString["file_types"];
}
else
{
Literal1.Text += " file_types: \"*.*\",\n";
Literal4.Text = "*.*";
} if (Request.QueryString["file_types_description"] != null)
{
Literal1.Text += " file_types_description: \"" + Request.QueryString["file_types_description"] + "\",\n";
}
else
{
Literal1.Text += " file_types_description: \"All Files\",\n";
} if (Request.QueryString["file_upload_limit"] != null)
{
Literal1.Text += " file_upload_limit: " + Request.QueryString["file_upload_limit"] + ",\n";
Literal2.Text = Request.QueryString["file_upload_limit"];
Literal2.Text = "";
}
else
{
Literal1.Text += " file_upload_limit: 50,\n";
} Literal1.Text += " file_queue_limit: 0,\n";
Literal1.Text += " autoremove: true, //是否自动移除完成上传的记录\n";
Literal1.Text += " custom_settings: {\n"; Literal1.Text += " progressTarget: \"divprogresscontainer\",\n";
Literal1.Text += " progressGroupTarget: \"divprogressGroup\",\n"; //progress object
Literal1.Text += " container_css: \"progressobj\",\n";
Literal1.Text += " icoNormal_css: \"IcoNormal\",\n";
Literal1.Text += " icoWaiting_css: \"IcoWaiting\",\n";
Literal1.Text += " icoUpload_css: \"IcoUpload\",\n";
Literal1.Text += " fname_css: \"fle ftt\",";
Literal1.Text += " state_div_css: \"statebarSmallDiv\",\n";
Literal1.Text += " vstate_bar_css: \"statebar\",\n";
Literal1.Text += " percent_css: \"ftt\",\n";
Literal1.Text += " href_delete_css: \"ftt\",\n"; //sum object
/*
页面中不应出现以"cnt_"开头声明的元素
*/
Literal1.Text += " s_cnt_progress: \"cnt_progress\",\n";
Literal1.Text += " s_cnt_span_text: \"fle\",";
Literal1.Text += " s_cnt_progress_statebar: \"cnt_progress_statebar\",\n";
Literal1.Text += " s_cnt_progress_percent: \"cnt_progress_percent\",\n";
Literal1.Text += " s_cnt_progress_uploaded:\"cnt_progress_uploaded\",\n";
Literal1.Text += " s_cnt_progress_size: \"cnt_progress_size\"\n";
Literal1.Text += " },\n";
Literal1.Text += " debug: false,\n";
// Button settings
Literal1.Text += " button_image_url: \"/statics/js/swfupload/images/swfBnt_select.png\",\n";
Literal1.Text += " button_width: \"75\",\n";
Literal1.Text += " button_height: \"28\",\n";
Literal1.Text += " button_placeholder_id: \"spanButtonPlaceHolder\",\n";
//button_cursor="HAND",
//button_text: '',
//button_text_style: ".theFont { font-size: 12;color:#0068B7;}",
//button_text_left_padding: 12,
//button_text_top_padding: 3, // The event handler functions are defined in handlers.js
Literal1.Text += " file_queued_handler: fileQueued,\n";
Literal1.Text += " file_queue_error_handler: fileQueueError,\n";
Literal1.Text += " upload_start_handler: uploadStart,\n";
Literal1.Text += " upload_progress_handler: uploadProgress,\n";
Literal1.Text += " upload_error_handler: uploadError,\n";
Literal1.Text += " upload_success_handler: uploadSuccess,\n";
Literal1.Text += " upload_complete_handler: uploadComplete\n";
//file_dialog_complete_handler: fileDialogComplete Literal1.Text += " };\n";
Literal1.Text += " swfu = new SWFUpload(settings);\n";
Literal1.Text += "};\n";
Literal1.Text += "</script>\n";
}
}
}
}
下载源码
asp.net(c#)+flash(swfupload) 多图片批量上传源码下载
总结
swfupload 多文件上传可用于多种类型文件上传，这里只演示了图片，你可以自己扩展。
同理，swfupload是不依赖于某个平台或者语言的，同样可用于PHP，Java，Asp.net等多种语言，只要您弄清楚原理就可以随意扩展，如有什么不明白的可给我留言。
asp.net+swfupload 多图片批量上传(附源码下载)的更多相关文章
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（32）-swfupload多文件上传[附源码]
原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(32)-swfupload多文件上传[附源码] 文件上传这东西说到底有时候很痛,原来的asp.net服务器 ...
- swfupload多文件上传[附源码]
swfupload多文件上传[附源码] 文件上传这东西说到底有时候很痛,原来的asp.net服务器控件提供了很简单的上传,但是有回传,还没有进度条提示.这次我们演示利用swfupload多文件上传,项 ...
- 使用 CSS3 实现 3D 图片滑块效果【附源码下载】
使用 CSS3 的3D变换特性,我们可以通过让元素在三维空间中变换来实现一些新奇的效果. 这篇文章分享的这款 jQuery 立体图片滑块插件,利用了 3D transforms(变换)属性来实现多种不 ...
- ASP.NET MVC5+EF6+EasyUI 后台管理系统（32）-swfupload多文件上传[附源码]
系列目录 文件上传这东西说到底有时候很痛,原来的asp.net服务器控件提供了很简单的上传,但是有回传,还没有进度条提示.这次我们演示利用swfupload多文件上传,项目上文件上传是比不可少的,大家 ...
- KindEditor图片批量上传
KindEditor编辑器图片批量上传采用了上传插件swfupload.swf,所以后台上传文件方法返回格式应为JSONObject的String格式(注). JSONObject格式: JSONOb ...
- OneThink实现多图片批量上传功能
OneThink原生系统中的图片上传功能是uploadify.swf插件进行上传的,默认是只能上传一张图片的,但是uploadify.swf是支持多图片批量上传的,那么我们稍加改动就可实现OneThi ...
- 利用WebUploader进行图片批量上传，在页面显示后选择多张图片压缩至指定路径【java】
WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件.在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流IE浏览 ...
- PHP 多图上传，图片批量上传插件，webuploader.js，百度文件上传插件
PHP 多图上传,图片批量上传插件,webuploader.js,百度文件上传插件(案例教程) WebUploader作用:http://fex.baidu.com/webuploader/gett ...
- 分享知识-快乐自己：FastDFS 上传 java 源码
FastDFS 上传 java 源码:点我下载源码 首先导入 POM 文件:解决 maven 不能下载 fastdfs-client-java JAR <dependency> <g ...
随机推荐
- 如何把bootstrap用webpack打包
今天下载了一个anguarl2写后台,一直没有找到是如何使用bootstrap样式的,然后就全文做了搜索,发现有一段代码 import 'bootstrap-loader'; 这段代码很可疑,所以就查 ...
- ASP.NET本质论阅读----线程与异步
线程 概要:操作系统通过线程对程序的执行进行管理 线程的数据结构:1.线程的核心对象(包含线程的当前寄存器状态),调用线程时-寄存器状态被加载到CPU中. 2.线程环境块TEB:一块用户模式下的内存 ...
- STL容器的适用情况
转自http://hsw625728.blog.163.com/blog/static/3957072820091116114655254/ ly; mso-default-props:yes; m ...
- 项目开发-->一键登录功能汇总
开发网站经常会提供一些一键登录功能,如:QQ.新浪微博.淘宝账号.开心网账号.人人网账号等进行快捷登录,下面记录几个常用的开放平台地址,方便以后开发需要. 1.QQ互联 2.新浪微博 网站接入QQ互联 ...
- 4554: [Tjoi2016&Heoi2016]游戏 二分图匹配
题目链接: http://www.lydsy.com/JudgeOnline/problem.php?id=4554 题解: 如果没有硬石头的话,就是’*‘点对应的行列建边,然后跑最大匹配 硬石头什么 ...
- 机器学习&&数据挖掘之一：决策树基础认识
决策树入门篇 前言:分类是数据挖掘中的主要分析手段,其任务就是对数据集进行学习并构造一个拥有预测功能的分类模型,用于预测未知样本的类标号,把类标号未知的样本按照某一规则映射到预先给定的类标号中. 分类 ...
- html5离线存储
为了提升Web应用的用户体验,我们在做网站或者webapp的时候,经常需要保存一些内容到本地.例如,用户登录token,或者一些不经常变动的数据. 随着HTML5的到来,出现了诸如AppCache.l ...
- SSRF攻击实例解析
ssrf攻击概述 很多web应用都提供了从其他的服务器上获取数据的功能.使用用户指定的URL,web应用可以获取图片,下载文件,读取文件内容等.这个功能如果被恶意使用,可以利用存在缺陷的web应用作为 ...
- DSP5509的时钟发生器(翻译总结自TI官方文档)
一.C5509时钟发生器的两个功能 1.将从CLKIN引脚输入的时钟信号变换为适当频率的CPU时钟,提供给CPU.外设和其他模块使用: 2.将CPU时钟通过可编程分频器输出到CLKOUT引脚. 时钟发 ...
- 移动端页面调试工具——UC浏览器开发者版
在移动页面的开发中,我们很难像PC端那样很方便的调试,网上也有各种各样的调试方式.但在工作中,我主要还是用chorme自带的模拟器来模拟各种移动设备,但是用久了之后发现毕竟是模拟的,与真机调试还是会有 ...