支持批量上传、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_" +