项目中实现的原代码，无删减直接贴上。具体请参考“添加附件”按钮相关操作。
注意引入：cardRansomManage.js，ajaxfileupload.js.
<!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> <#include "../ftl/includes/easyui.ftl"/> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>账户管理-预付卡赎回管理</title> </head> <body fit="true"> <div> <div> <div> 当前位置：预付费卡综合管理系统 > 预付卡赎回管理 > <a href="https://www.jb51.net/${rc.contextPath}/ransom/apply" >赎回申请</a> > </div> <form method="post" enctype="multipart/form-data"> <input type="hidden" value=${isLoginUser?string} /> <input type="hidden" value='${order.orderStatus!}' /> <div> <div>赎回申请</div> <div> <a iconCls="icon-add" plain="true">增加附件</a> <a iconCls="icon-save" plain="true">上传附件并保存</a> <@verifyRes res="/ransom/ransomInvalid?Apply"> <a iconCls="icon-ok" plain="true">申 请</a> </@verifyRes> <@verifyRes res="/ransom/ransomInvalid?Audit"> <a iconCls="icon-ok" plain="true">审 核</a> <a iconCls="icon-ok" plain="true">驳 回</a> </@verifyRes> <div></div> </div> <div> <div> <div> <div>赎回单号：</div> <input type="text" value='${order.orderNo!}' disabled="disabled"/> <div></div> </div> <div></div> </div> <div> <div> <div>申请人：</div> <input type="text" value='${order.createName}' disabled="disabled"/> <div></div> </div> <div></div> </div> <div> <div> <div>表单状态：</div> <select disabled="disabled"> <option value="" >--全部--</option> <#if ransomStatus??> <#list ransomStatus as es> <option value='${es.value!}' <#if order.orderStatus?exists><#if order.orderStatus==es.value> selected="selected"</#if></#if>>${es.chName!""}</option> </#list> </#if> </select> <div></div> </div> <div></div> </div> <div></div> <div> <#if order.attachment??> <#list order.attachment as attach> <div> <div> <div>附件(已上传)：</div> <input type="text" value="${attach.attachmentPath}" disabled="disabled"/> <a href="#">删除</a> <a href="javascript:void(0)">下载</a> <div></div> </div> <div></div> </div> </#list> </#if> </div> </div> </div> </form> </div> </div> <div> <div> <div> <div>附件：</div> <input type="file" /> <a href="#">删除 </a> <div></div> </div> <div></div> </div> </div> <form action="" method="post"> <input type="hidden"/> </form> <div > <div></div> <div>正在处理，请稍后...</div> </div> <script type="text/javascript" charset="utf-8" src="https://www.jb51.net/${rc.contextPath}/js/ransom/cardRansomManage.js"></script> <script type="text/javascript" charset="utf-8" src="https://www.jb51.net/${rc.contextPath}/js/card/ajaxfileupload.js"></script> </body> </html>
创建Javascript库
cardRansomManage.js
//设置面罩的z-index,打开进度条 function setPopupZ_index() { $("#popupDiv_bgDiv_1").css("z-index", "550"); bcd_openPopUpDailog(300, 'loading'); //进度条 } /** * 编辑、查看、提交页面 资源控制 */ var $fileMixSize = 10; //允许上传附件数 var $fileCurSize = 0; //已上传并保存附件数 var $fileSize = 0; //当前新增附件操作次数 var $delFiles =""; //记录 删除已保存附件 var $flag = 0; //数据校验 0:附件无效; 1:无附件提交; 2:附件有效 $(document).ready(function(){ $fileCurSize = $("input[name='attach']").size(); initialResource(); bindListener(); }); function initialResource(){ var orderStatus = $("#orderStatus").val(); var isLoginUser = $("#isLoginUser").val(); var btnSubmit = $("#btnSubmit"); var btnAudit = $("#btnAudit"); var btnRefuse = $("#btnRefuse"); if(isLoginUser=="true"){ if(orderStatus==0||orderStatus==3){//草稿、驳回状态 // addFile(); if(btnAudit != undefined){ btnAudit.hide(); } if(btnRefuse != undefined){ btnRefuse.hide(); } }else {//orderStatus:1(申请),2(审核) $("a[name='rmlinkattach']").remove(); $("#toolbar").remove(); } }else{ if(orderStatus!=1){ $("#toolbar").remove(); $("a[name='rmlinkattach']").remove(); }else{ $("#btnSave").hide(); $("a[name='rmlinkattach']").hide(); if(btnSubmit != undefined){ btnSubmit.hide(); } } } } function doCloseFunction(){ window.location.href="query?orderDetail&orderNo=" ; } function addFile(){ $fileSize = $("[name='uploadfiles']").size(); if($fileSize < $fileMixSize - $fileCurSize){ var $fileTemple=$("#fileTemplate >div").clone(); var tid = "uploadfiles0"+new Date().getTime(); $fileTemple.find(":file").attr("id",tid); $fileTemple.find(":file").attr("name","uploadfiles"); $fileTemple.find("a").attr("name","rmlink"); $("#mdiv").append($fileTemple); bindListener(); $fileSize++; }else{ alertDiv.create("alertDiv","最大上传文件数为："+$fileMixSize+"."); } } function saveFile(){ operSubmit("0"); $delFiles = ""; } function submitApply(){ operSubmit("1"); $delFiles =""; } function submitAudit(){ var orderStatus = $("#orderStatus").val(); //审核人：只允许处理审核状态的赎回单 if(orderStatus==1){ $.messager.confirm('请确认', '您要批准此赎回申请单？', function(r) { if(r){ operSubmit("2"); //审批通过 } }); $delFiles =""; }else{ alertDiv.create("alertDiv","赎回单当前状态，不允许提交！"); } } function submitRefuse(){ var orderStatus = $("#orderStatus").val(); //审核人：只允许处理审核状态的赎回单 if(orderStatus==1){ $.messager.confirm('请确认', '您要驳回此赎回申请单？', function(r) { if(r){ operSubmit("3"); //驳回 } }); }else{ alertDiv.create("alertDiv","赎回单当前状态，不允许提交！"); } } function downLoadFile(attachmentId){ $('#attachmentId').val(attachmentId); $('#downloadform').attr('action', 'downLoad'); $("#downloadform").submit(); } function bindListener(){ $("a[name=rmlink]").unbind().click(function(){ $(this).parent().parent().remove(); $fileSize--; }) } function rmlinkAttach(attach, obj){ $.messager.confirm('请确认', '您要删除当前所选项目？', function(r) { if(r){ $delFiles += ""+attach +","; $fileCurSize -=1; $(obj).parent().parent().remove(); } }); } //处理查询返回的信息 function callBack(order) { var html = ""; var orderStatus = order.orderStatus; //var orderStatus = record['record'].orderStatus; $("#orderStatus").val(orderStatus); $("#mdiv").empty();//清空以前的数据 $("#freshdiv").empty(); $(order.attachment).each( function(i, attach) { html += "<div>"; html += " <div>"; html += " <div>附件(已上传)：</div>"; html += " <input type='text' value=" + attach.attachmentPath + " disabled='disabled'/>  "; if(orderStatus==0||orderStatus==3){ html += " <a href='#'>删除</a>"; } html += " <a href='javascript:void(0)'>下载</a>"; html += " <div></div>"; html += " </div>"; html += " <div></div>"; html += "</div>"; }); var $container = $("#freshdiv"); $container.append(html);//追加新的数据 } function refreshRes(order,orderStatusName){ $("#orderNo").val(order.orderNo); $("#orderStatus").val(order.orderStatus); $("#orderStatus option[value='"+order.orderStatus+"']").attr("selected","selected"); initialResource(); //$.post("query?Detail",order,callBack, "json"); callBack(order) $fileCurSize = $("input[name='attach']").size(); } function operSubmit(status){ validateUploadfiles(); if($flag==2){ var order = { orderNo: $("#orderNo").val(), orderStatus: status, attachments: $delFiles }; fileupload("save",order,"query?orderDetail&orderNo="); }else if($flag==1){ var order = { orderNo: $("#orderNo").val(), orderStatus: status, attachments: $delFiles }; $.post("save?unUpload", order, function(data){ if (data.success) { refreshRes(data['order']); alertDiv.create("alertDiv", data.obj); } else { alertDiv.create("alertDiv", data.obj); } }, "json"); }else{ alertDiv.create("alertDiv","附件不能为空，请添加有效附件！"); } } function validateUploadfiles(){ var files = $("input[name='uploadfiles']"); if(files.size()>0){ $.each(files,function(i, file){ if(file.value==undefined || file.value==""){ alertDiv.create("alertDiv","新增附件不能为空，请上传！"); $flag = 0; }else{ $flag = 2; } }); }else{ $flag=1; } } function fileupload(url,order,successUrl){ var files = $("input[name='uploadfiles']"); var uploadfiles = []; $.each(files,function(i, file){ if(file.value!=undefined || file.value!=""){ uploadfiles.push(files[i].id) } }); $.ajaxFileUpload({ url: url, secureuri : false, type: 'post', dataType: "json", fileElementId: uploadfiles, data: order, beforeSend: function() { setPopupZ_index(); }, success: function(result) { if (result.success) { refreshRes(result['order']); alertDiv.create("alertDiv", result.obj); } else { alertDiv.create("alertDiv", result.obj); } }, error: function(result) { alertDiv.create("alertDiv", "赎回申请信息出错，请稍后重试！"); }, complete: function() { //$("#btnsave").removeAttr("disabled"); } }); }
ajaxfileupload.js