一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

jquery实现动态添加附件功能

时间:2018-10-24 编辑:猪哥 来源:一聚教程网

本文实例为大家分享了jquery实现动态添加附件的具体代码,供大家参考,具体内容如下

创建HTML页面

项目中实现的原代码,无删减直接贴上。具体请参考“添加附件”按钮相关操作。
注意引入:cardRansomManage.js,ajaxfileupload.js.




<#include "../ftl/includes/easyui.ftl"/>

账户管理-预付卡赎回管理


 
当前位置:预付费卡综合管理系统 > 预付卡赎回管理 >  赎回申请 > 
赎回申请
增加附件 上传附件并保存 <@verifyRes res="/ransom/ransomInvalid?Apply"> 申    请 <@verifyRes res="/ransom/ransomInvalid?Audit"> 审    核 驳    回
赎回单号:
申请人:
表单状态:
<#if order.attachment??> <#list order.attachment as attach>
附件(已上传):
   删除 下载
正在处理,请稍后...

创建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=" rel="external nofollow" ;
}

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 += "
"; html += "
"; html += "
附件(已上传):
"; html += "   "; if(orderStatus==0||orderStatus==3){ html += " 删除"; } html += " 下载"; html += "
"; html += "
"; html += "
"; html += "
"; }); 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

jQuery.extend({

  handleError: function( s, xhr, status, e )   {
    // If a local callback was specified, fire it
        if ( s.error ) {
          s.error.call( s.context || s, xhr, status, e );
        }

        // Fire the global callback
        if ( s.global ) {
          (s.context ? jQuery(s.context) : jQuery.event).trigger( "ajaxError", [xhr, s, e] );
        }
      },

  createUploadIframe: function(id, uri)
  {
      //create frame
      var frameId = 'jUploadFrame' + id;
      var iframeHtml = '