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 ...

随机推荐

了解struts2 action的一些原理
今天在struts2中的 action方法中,打印了一下当前action,即this,还打印了一下当前action引用的service, 在页面中访问该action方法2次,发现action是不一样的 ...
LNMP系列网站零基础开发记录（二）
[目录] 扯淡吹逼之开发前奏 Django 开发环境搭建及配置 web 页面开发 Django app开发 Django 站点管理 Python 简易爬虫开发 Nginx&uWSGI 服务器配 ...
向Array中添加插入排序
插入排序思路从第二个元素开始和它前面的元素进行比较,如果比前面的元素小,那么前面的元素向后移动,否则就将此元素插入到相应的位置. 插入排序实现 Function.prototype.method = ...
java 24点算法实现
最近闲来无事,突然怀念起小时候和堂兄表姐们经常玩24点游戏,于是就琢磨着是不是开发一个安卓手机版本.然后上网上一搜,发现已经被别人给开发烂了啊.不过这只能说明这个小游戏要想赚广告费很难了,但是拿来锻炼 ...
Analyzer使用第二Y轴，以及同一分析图不同量值使用不同的图形样式
Analyzer的建立分析图后,图中有两个量值,希望能显示成不同的图形样式,如一个是柱图.一个是线图. 1.设置显示多个量值: 3.设置显示出图例,即表明图中量值内容的说明: 2.右键图例中要修改为不 ...
Upgrading to Java 8——第三章 Optional and Similar Classes
Java程序员对付空指针异常已经好多年了.在Java8中将有新的方式去处理他们.通过包装一个潜在的可能为null的类称为Optianal. 在Java8中添加了the Optional, Option ...
【转】C#通过Expression获取指定属性的名称
原文:http://www.cnblogs.com/powerwu/articles/3393582.html 大家所熟悉的是通过对象属性来访问该属性的值,或是由字符串通过反射来获取属性,并取值.今天 ...
2014ACM/ICPC亚洲区西安站复旦命题
http://codeforces.com/gym/100548 A 签到问一个序列是不是yes,yes的序列满足每个数都是3的倍数. #include<cstdio> int main ...
word插件开发运行时,插件不启动.
word插件开发运行时,插件不启动. 查看插件信息时. 在禁用的应用程序加载项中. 启动禁用的插件: 点击转到. 选择你要启动的插件就可以了.
[nowCoder] 二进制中1的个数
题目描述输入一个整数,输出该数二进制表示中1的个数.其中负数用补码表示. class Solution { public: int NumberOf1(int n) { ; while(n) ...

asp.net+swfupload 多图片批量上传(附源码下载)

演示效果图

第一步 新建一个web项目

第二步 引入所需swfuplod文件（swfupload.swf,js,css等)

第三步 新建一个一般处理程序(upload.ashx)

第四步 新建一个web窗体(swfupload.aspx)