支持批量上传、JS图片预览的前端上传组件

      /*
组件使用bootstrap前端框架和Lightbox v2.8.2(图片放大预览)

范例
html:
<div>
    <ul id="AnnexList">
    </ul>
</div>

function loadApplyAnnex() {
    var thisAnnex = new loadAnnex({
        annex: thisApply.Annex,
        url: "Handle/Apply_Annex.ashx",
        ActionFunc: "AnnexUpload",
        multipart_params: { ApplyID: thisApply.ApplyBase.ApplyID },
        isShowUpButton: false,
        tmpl: "#tmpl_Annex",
        tmplBlank: "#tmpl_AnnexBlank",
        progress: { //总体进度条对象
            progressObj: $("#saveModal .progress"),   //进度条对象或带#的ID
            fileNumObj: $("#upFileNumbers"),    //显示当前正在上传第几个文件共多少个文件的对象
            currentFile: $("#currentUpFile")    //显示当前正在上传的文件对象
        }
    });

    return thisAnnex;
}
*/

/*附件显示模板
<script id="{0}" type="text/x-jquery-tmpl">
    <li name="pic__${rowid}" onmousemove="$(this).addClass('ItemMouseMove');"
        onmouseout="$(this).removeClass('ItemMouseMove');" rowid="${rowid}" RequiredID="${reqid}"
        Required="${isRequired}" sortid="${xh}" fileformat="${format}" maxsize="${maxsize}">
        <table class="AnnexContent">
            <tr onclick="{{if isShowPic==true}}BrowseImage(this){{else}}triggerFileSelect(this){{/if}}">
            {{if isShowPic == true}}
			    <td class="Image Annex_Image"><img src="{{= getImgUrl(gs, thumbnail, dz)}}" /></td>
            {{else}}
                <td class="Image Annex_NoImg"></td>
            {{/if}}
            </tr>
            <tr>
                <td class="Annex_word">${fjmc}</td>
            </tr>
            <tr>
                <td style="height:2px;">
                    <div class="progress" style="height:2px;margin-bottom:0px;">
                        <div class="progress-bar progress-bar-success" role="progressbar" 
                            aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" 	
                            style="width: 0%; height:2px;">
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="Annex_button">
                    {{if isShowPic == true}}
                        {{if isPic == true}}
                        <a name="btn_Browse_Privew" type="button" class="btn btn-link btn-sm" href="${dz}" data-lightbox="annexGroup" title="${fjmc}">查看原图</a>
                        {{else}}
                        <a name="btn_Browse_Privew" type="button" class="btn btn-link btn-sm" href="${dz}" target="_blank">下载文件</a>
                        {{/if}}
                        <button name="btn_Del" type="button" class="btn btn-link btn-sm" onclick="DelAnnex(${xh})">删除</button>
                    {{else}}
                        <button name="btn_FileSelect" type="button" class="btn btn-primary btn-sm">选择文件</button>
                    {{/if}}
                </td>
            </tr>
        </table>
    </li>
</script>
*/

/*空附件项模板
<script id="{0}" type="text/x-jquery-tmpl">
    <li name="pic__blank" isBlank='true' onmousemove="$(this).addClass('ItemMouseMove');"
        onmouseout="$(this).removeClass('ItemMouseMove');" maxsize="10485760" rowid="blank">
        <table class="AnnexContent">
            <tr onclick="triggerFileSelect(this)">
                <td class="Image Annex_NoImg"></td>
            </tr>
            <tr>
                <td class="Annex_word">
                    <div class='input-group input-group-sm' style='width: 100%'>
                        <span class='input-group-addon'><span class='Required'>名称</span></span>
                        <input name='picName_blank' type='text' class='form-control' style='width: 100%' maxlength='100' placeholder='附件名称'>
                    </div>
                </td>
            </tr>
            <tr>
                <td style="height:2px;">
                    <div class="progress" style="height:2px;margin-bottom:0px;">
                       <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%; height:2px;"></div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="Annex_button_New">
                    <button name="btn_FileSelect" type="button" class="btn btn-primary btn-sm">选择文件</button>
                </td>
            </tr>
        </table>
    </li>
</script>
*/

var me;
var loadAnnex = function (opt) {
    me = this;
    this.setOption(opt);
    $(this.option.container).html("");

    //格式化annex数据对象
    $.each(this.option.annex, function (n, value) {
        me.option.annex[n].rowid = n;

        //是否为必传附件
        if (value.reqid.isEmpty())
            me.option.annex[n].isRequired = false;
        else
            me.option.annex[n].isRequired = true;

        //如果附件地址为空则不显示图片
        if (value.dz.isEmpty())
            me.option.annex[n].isShowPic = false;
        else
            me.option.annex[n].isShowPic = true;

        //文件格式是否是预设的格式
        if ($.inArray(value.format.toLowerCase(), me.picExt) != -1)
            me.option.annex[n].isPic = true;
        else
            me.option.annex[n].isPic = false;

        //如果有缩略图则显示
        if (value.thumbnail == null || value.thumbnail.isEmpty())
            me.option.annex[n].isThum = false;
        else
            me.option.annex[n].isThum = true;
    });

    $(me.option.tmpl).tmpl(me.option.annex).appendTo(me.option.container);
    $(me.option.tmplBlank).tmpl().appendTo(me.option.container);

    //灯箱
    /*!
    * Lightbox v2.8.2
    * by Lokesh Dhakar
    *
    * More info:
    * http://lokeshdhakar.com/projects/lightbox2/
    */
    $(".lightbox").css("display", "none");

    //初始化上传控件
    $(this.option.container + " button[name='btn_FileSelect']").each(function () {
        var arrLength = me.uploaderArr.length;
        var tmpUp = me.init(this, arrLength);
        me.uploaderArr.push(tmpUp);
    });
}

loadAnnex.prototype.option = {
    container: "#AnnexList",
    annex: [],
    url: "",    //图片提交地址
    ActionFunc: "AnnexUpload",      //服务端接收文件的函数
    multipart_params: null,         //提交时需要额外加入的参数，Json格式
    format: this.picExt,
    tmpl: "#tmpl_Annex",            //附件显示模板
    tmplBlank: "#tmpl_AnnexBlank",  //空附件显示模板
    flash_swf_url: "../JavaScripts/Moxie.swf",          //当使用flash上传时使用swf文件
    silverlight_xap_url: "../JavaScripts/Moxie.xap",    //当使用SilverLight上传时使用的xap文件
    multi_selection: false,     //允许批量上传
    isShowUpButton: true,       //是否显示上传文件按钮
    progress: { //总体进度条对象
        progressObj: null,   //进度条对象或带#的ID
        fileNumObj: null,    //显示当前正在上传第几个文件共多少个文件的对象
        currentFile: null    //显示当前正在上传的文件对象
    },
    beforeUpload: null,     //上传开始前执行的函数
    complete: null          //上传全部完成后执行的函数
}

//初始化上传控件
loadAnnex.prototype.init = function (btn) {
    var rd;
    do {
        rd = parseInt(10000 * Math.random());
    } while ($("#up_" + rd.toString()).length > 0)

    var btnObj = $(btn);
    var btnID = "btnUp_" + rd.toString();
    btnObj.attr("id", btnID);
    //closest向上逐层查找符合条件的父元素
    var upContent = btnObj.closest('.AnnexContent');

    var upObj = upContent.parent();
    upObj.attr("id", "up_" +