在前几天发表了一个基于jquery的上传插件plupload，最近时间比较紧，写的太仓促了，很多人不明白啥意思。。。我也很无奈。

今天直接上个干货：基于Bootstrap样式的asp.net+plupload多图片文件上传预览及展示

功能说明：

1、基于bootstrap样式，美观大方，现在比较流行。

2、开发成asp.net的控件：ascx格式。可以在项目中直接使用

3、支持多图片

4、支持预览

5、支持上传成功后动画提示并删除已成功的。

6、支持从服务器端列表展示图片

7、其他

效果图：

选择图片，可以多选。

点击开始上传后的动画处理：

图片列表：

没有耐心的同学可以直接下载代码：

百度网盘下载：链接：http://pan.baidu.com/s/1bnjHP63   密码：j6rf 

下面从前端设计UI和后台的服务代码进行一一说明。关于bootstrap的资料可以在本站搜索一下。

一、项目目录说明：

这是整个asp.netwen项目目录。

1：bootstrap的资源目录

2、dll：是我们项目使用的dll，其中只有一个json的序列化和反序列化dll：Newtonsoft.Json。参考：[Jquery+ashx 实现ajax访问服务端json数据代码示例]

3、upload是我放置plupload资源的目录。其中，可以看到4：是我添加的asp.net 一般处理程序，处理上传文件的。

5、测试界面，直接引用了控件6:upload.aspx

整个目录说明完了。

二、现在直接上代码说明

upload.ascx前台代码：

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="upload.ascx.cs" Inherits="UserControl_upload" %>
    <script type="text/javascript"  src="../../JScripts/Upload/moxie.js"></script>
<script type="text/javascript"  src="../../JScripts/Upload/plupload.dev.js"></script>
<style>  
        .liclickaaa { border:1px solid #F00}
.listData {
margin:10px 20px 0px 0px;
font-size:16px;
}
.lipadihgi {
margin:10px 20px 10px 10px;
font-size:16px;
}
</style>
<div class="page-header">
    <h2>
        <small>
            <i class="icon-double-angle-right"></i>
            上传和选择素材
        </small>
    </h2>
</div>
<!-- /.page-header -->
<div class="col-sm-12" id="divcontent">
    <div>
        点击上传文件，或者点击从素材库选择，选择已有的图片
    </div>
    <div class="tabbable">
        <ul class="nav nav-tabs" id="myTab">
            <li class="active">
                <a data-toggle="tab" href="#wenben">
                    <i class="green icon-home bigger-110"></i>
                    上传新素材
                </a>
            </li>
            <li>
                <a data-toggle="tab" href="#tupian">从素材库选择 
                </a>
            </li>
        </ul>
        <div class="tab-content">
            <div id="wenben" class="tab-pane in active">
       <div class="row">
                    <div class="col-xs-10">
                        <div class="col-xs-4">
                            <button class="btn btn btn-sm btn-info" id="browse" type="button">选择文件...</button>
                        </div>
                        <div class="col-xs-4">
                            <button class="btn btn btn-sm btn-info" id="BtnStart" onclick="StartUp(); return false;" type="button">开始上传</button>
                        </div>
                        <div class="col-xs-10">
                            <ul class="ace-thumbnails" id="imageListtemp">
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div id="tupian" class="tab-pane">
                <div class="row">
                    <div class="col-xs-12">
                        <!-- PAGE CONTENT BEGINS -->
                               <div class="col-xs-6">
                            <button class="btn btn btn-sm btn-info" id="refreshs" type="button"  onclick="GetMediaList(); return false;" >刷新素材库</button>
                                  <button class="btn btn btn-sm btn-info" id="btnokselect" type="button"  onclick="SeelctedOK(); return false;" >确定选择</button>
                             </div>
                        <div class="col-xs-10  row-fluid" id="divimageList" style="height:500px;overflow-y:auto;"> 
                            <ul class="ace-thumbnails" id="imageList" >
                                  
                            </ul>
                        </div>
                        <!-- PAGE CONTENT ENDS -->
                    </div>
                    <!-- /.col -->
                </div>
                <!-- /.row -->
            </div>
        </div>
    </div>
</div>
<div>
    <input type="hidden" runat="server" id="hidValueContainer" />
</div>
<!-- /span -->

上传脚本：

var whoid = 1;
    var uploader = new plupload.Uploader({ //实例化一个plupload上传对象
        browse_button: 'browse',
        url: '../../JScripts/Upload/UploadSvc.ashx',
        flash_swf_url: '../../JScripts/Upload/Moxie.swf',
        silverlight_xap_url: '../../JScripts/Upload/Moxie.xap',
        max_file_size: '10mb', //最大文件限制
        file_size: '1mb',   //一次上传数据大小
        multipart_params: {
            Operate: "uploadmedia",
            "who": whoid
        },　　//传到后台的参数
        unique_names: true,     //是否自动生成唯一名称 
        filters: {
            mime_types: [ //只允许上传图片文件
              { title: "图片文件", extensions: "jpg,gif,png" }
            ]
        },
        init: {
            FileUploaded: function (up, file, info) {
                if (info.response != null) {
                      
                    var jsonstr = eval("(" + info.response + ")");
                    if (jsonstr== "ok") {
                        $("#fileuploadok-" + file.id).html("上传成功。");
                        setTimeout("DeleteUpokImg('" + file.id + "')", 1000);
                    }
                    else {
                        $("#fileuploadok-" + file.id).html("上传失败。" + info.response);
                    }
                    //for (var i = 0; i < jsonstr.length; i++) {
                    //    var thumbnailUrl = jsonstr[i].thumbnailUrl;
                    //    var originalUrl = jsonstr[i].originalUrl;//上传完整路径
                    //    var name = jsonstr[i].name;//图片名
                    //    //一个文件上传成功
                    //    addImage(name, originalUrl, thumbnailUrl);
                    //}
                }
            },
            Error: function (up, args) {
                //发生错误
                if (args.file) {
                    alert('文件错误:' + args.file);
                } else {
                    alert('出错' + args);
                }
            }
        }
    });
    uploader.init(); //初始化
    //$("#1").remove();
    function DeleteUpokImg(id) {
     
        $("#file-" + id).hide(1000, function() {
            //移除父级div
            $("#file-" + id).remove();
        });
    }
    //绑定文件添加进队列事件
    uploader.bind('FilesAdded', function (uploader, files) {
        for (var i = 0, len = files.length; i < len; i++) {
            var file_name = files[i].name; //文件名
            //构造html来更新UI
            var html = '<li  id="file-' + files[i].id + '"><p id="fileuploadok-' + files[i].id + '" style="width:100px;height:10px;" class="file-name">'
                + file_name + '</p><p class="progress"></p></li>';
            //显示刚才的图片
            //var html = "";
            //html = html + "   <li >";
            //html = html + "                   <div class='listData' id=\"div_" + data.Mediaobj.media_id + "\" onclick=\"SetLiStyle('" + data.Mediaobj.media_id + "','" + data.Url + "')\"   >";
            //html = html + "               </div> ";
            //html = html + "               </li>";
            $(html).appendTo('#imageListtemp');
            !function (i) {
                previewImage(files[i], function (imgsrc) {
                    $('#file-' + files[i].id).append('<img width=\'140px\' height=\'120px\'  src="' + imgsrc + '" />');
                })
            }(i);
        }
    });
    ///开始上传。
    function StartUp() {
        uploader.start();
    }
    function SeelctedOK() {
        var idd=$("#<%=hidValueContainer.ClientID %>").val();
        var _contanierid = $("#" + idd);
        if (_contanierid.length > 0) {//控件存在的话
            if (fileurl.length == 0) {
                alert("请选择一个图片");return;
            }
            _contanierid.val(fileurl);
            var modalf = $('#modal-form');
            if (modalf) modalf.modal('hide');
        }
    }
    //plupload中为我们提供了mOxie对象
    //有关mOxie的介绍和说明请看：https://github.com/moxiecode/moxie/wiki/API
    //如果你不想了解那么多的话，那就照抄本<a href="http://www.suchso.com/catalog.asp?cate=2" class="keylink" title=" 示例" target="_blank">示例</a>的代码来得到预览的图片吧
    function previewImage(file, callback) {//file为plupload事件监听函数参数中的file对象,callback为预览图片准备完成的回调函数 
        if (!file || !/image\//.test(file.type)) return; //确保文件是图片
        if (file.type == 'image/gif') {//gif使用FileReader进行预览,因为mOxie.Image只支持jpg和png
            var fr = new mOxie.FileReader();
            fr.onload = function () {
                callback(fr.result);
                fr.destroy();
                fr = null;
            }
            fr.readAsDataURL(file.getSource());
        } else {
            var preloader = new mOxie.Image();
            preloader.onload = function () {
                preloader.downsize(300, 300);//先压缩一下要预览的图片,宽300，高300
                var imgsrc = preloader.type == 'image/jpeg' ? preloader.getAsDataURL('image/jpeg', 80) : preloader.getAsDataURL(); //得到图片src,实质为一个base64编码的数据
                callback && callback(imgsrc); //callback传入的参数为预览图片的url
                preloader.destroy();
                preloader = null;
            };
            preloader.load(file.getSource());
        }
    }
    $(document).ready(function () {
        GetMediaList();
    });

从服务端获取图片脚本：

//获取媒体文件。根据类型产生不一样的html
    function GetMediaList() {
        var ajaxUrl = '../../JScripts/Upload/UploadSvc.ashx';
        $.ajax({
            type: "post",
            url: ajaxUrl,
            data: { 
                Operate: "getmedia"
            },
            success: function (data, textStatus) {
                if (data != null) {
                    if (data.length > 0) {
                        //显示刚才的图片
                        var html = "";
                        
                        $.each(data, function (i, val) {
                            html = html + "   <li class='lipadihgi'>";
                            html = html + "                 <div   id=\"div_" + val.FIlename + "\" onclick=\"SetLiStyle('" + val.FIlename + "','"
                                        + val.FileUrll + "')\"   >";
                            html = html + "                 <img  width='180px' height='180px' src=\"" + val.FileUrll + "\" />";
                            html = html + "             </div> ";
                            html = html + "             </li>";
                        }); 
                            $("#imageList").html("");
                            $("#imageList").append(html); 
                    }
                }
            },
            complete: function (XMLHttpRequest, textStatus) {
            },
            error: function (e) {
                alert("获取素材失败" + e); return;
            }
        });
    }
    var fileurl = "";
    function SetLiStyle(liid, url) {
        fileurl = url;
        $("#imageList div").removeClass("liclickaaa");
        $("#div_" + liid).addClass("liclickaaa"); 
    }

UploadSvc.ashx一般处理程序，接收js提交的$.ajax请求：

获取上传的文件，保存到服务器的文件夹中：

private object UploadImage()
    {
        object returnobj = "ok";
        string who = GetResponse("who");
        HttpFileCollection files = HttpContext.Current.Request.Files;
        int count = files.Count;
        for (int i = 0; i < count; i++)
        {
            HttpPostedFile file = files[i];
            string tmpPath = HttpContext.Current.Server.MapPath("/Upload/Media/");
            string fileName = System.IO.Path.GetFileName(file.FileName);
            try
            {
                string severlocalpath = tmpPath + fileName;
                file.SaveAs(severlocalpath);
                returnobj = "ok";
            }
            catch (Exception ex)
            {
                returnobj = ex.Message;
            }
        }
        return returnobj;
    }

返回服务端的图片文件列表：

private object GetMedia()
    {
        System.Collections.Generic.List<FileINfo> lit = new System.Collections.Generic.List<FileINfo>();
        string tmpPath = HttpContext.Current.Server.MapPath("/Upload/Media/");
        string imgtype = "*.bmp|*.jpg|*.gif|*.png";
        string[] ImageType = imgtype.Split('|');
        for (int i = 0; i < ImageType.Length; i++)
        {
            string[] dirs = System.IO.Directory.GetFiles(tmpPath, ImageType[i]);
            int j = 0;
            foreach (string dir in dirs)
            {
                System.IO.FileInfo file = new System.IO.FileInfo(dir);
                FileINfo finfo = new FileINfo();
                finfo.FIlename = j.ToString();
                finfo.FileUrll = "../../Upload/Media/" + file.Name;
                lit.Add(finfo);
                j++;
            }
        }
        return lit;
    }

三、其他功能说明：

1）、获取post或者get方式过来的参数，我加了一个处理函数都能处理：

public   string GetResponse(string responsevalue)
    {
        //判断提交方式
        HttpContext context = HttpContext.Current;
        string id = "";
        if (context.Request.RequestType.ToLower() == "get")
        {
            if (context.Request.QueryString[responsevalue] == null)
            {
                return "";
            }
            id = context.Request.QueryString[responsevalue];
        }
        else
        {
            if (context.Request.Form[responsevalue] == null)
            {
                return "";
            }
            id = context.Request.Form[responsevalue];
        }
        return id;
    }

2）、在点击素材库的图片时，可以看到会变化样式，标示当前选中的，这是一段js+css实现的：

 $("#imageList div").removeClass("liclickaaa");
        $("#div_" + liid).addClass("liclickaaa");

upload.ascx:定义一个隐藏控件，放置引用页面的控件ID:3）、选中的图片的url填充到引用页面的控件中：

  <input type="hidden" runat="server" id="hidValueContainer" />

后台接收控件ID

 public void SetFileInputID(string valueid)
    {
        hidValueContainer.Value = valueid;
    }

Default.aspx页面调用上面的函数，配置容器ID：

JqueryPUpload.SetFileInputID("tstinput");

整个功能都讲完了。希望对大家使用jquery.ui.plupload有帮助。