jquery实现动态添加附件功能

JeWangZhe

2018-10-23

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

创建HTML页面

项目中实现的原代码，无删减直接贴上。具体请参考“添加附件”按钮相关操作。
注意引入：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 class="easyui-layout" fit="true">
 <div class="w_960 mg_auto">
  <div class="over_f_h">
   <div class="mg_t_10 font_13">
    当前位置：预付费卡综合管理系统 > 预付卡赎回管理 > 
    <a class="color_000 hover_nav_link" href="${rc.contextPath}/ransom/apply" rel="external nofollow" >赎回申请</a> > 
   </div>
   <form id="editForm" method="post" enctype="multipart/form-data">
    <input type="hidden" name="isLoginUser" id="isLoginUser" value=${isLoginUser?string} />
    <input type="hidden" name="orderStatus" id="orderStatus" value='${order.orderStatus!}' />
    <div class="mg_t_10 bd_ccc pd_b_20">
     <div class="h_30 bg_fff4c8 font_w_bold font_13 line_2p4em pd_l_10 bd_b_ccc">赎回申请</div>
     <div id="toolbar" class="datagrid-toolbar" style="height: auto;">
      <a id="btnAddfile" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="javascript:addFile();">增加附件</a>
      <a id="btnSave" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="javascript:saveFile();">上传附件并保存</a>
      <@verifyRes res="/ransom/ransomInvalid?Apply">
      <a id="btnSubmit" class="easyui-linkbutton" iconCls="icon-ok" plain="true" onclick="javascript:submitApply();">申    请</a>
      </@verifyRes>
      <@verifyRes res="/ransom/ransomInvalid?Audit">
      <a id="btnAudit" class="easyui-linkbutton" iconCls="icon-ok" plain="true" onclick="javascript:submitAudit();">审    核</a>
      <a id="btnRefuse" class="easyui-linkbutton" iconCls="icon-ok" plain="true" onclick="javascript:submitRefuse();">驳    回</a>
      </@verifyRes>
      <div class="clear"></div>
     </div>
     <div>
      <div class="mg_auto mg_t_30 pd_l_30">
       <div class="f_l w_350">
        <div class="f_l mg_t_2 w_120 a_r val_input">赎回单号：</div>
        <input type="text" name="orderNo" id="orderNo" value='${order.orderNo!}' disabled="disabled" class="f_l show h_20 line_1p7em w_150 required"/>
        <div class="clear"></div>
       </div>
       <div class="clear"></div>
      </div>
      <div class="mg_auto mg_t_10 pd_l_30">
       <div class="f_l w_350">
        <div class="f_l mg_t_2 w_120 a_r val_input">申请人：</div>
        <input type="text" name="createName" id="createName" value='${order.createName}' disabled="disabled" class="f_l show h_20 line_1p7em w_150 required"/>
        <div class="clear"></div>
       </div>
       <div class="clear"></div>
      </div>

      <div class="mg_auto mg_t_10 pd_l_30">
       <div class="f_l w_350">
        <div class="f_l mg_t_2 w_120 a_r val_input">表单状态：</div>
        <select class="f_l show h_20 line_1p7em required w_150" id="orderStatus" name="orderStatus" disabled="disabled">
         <option class="h_20" 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 class="clear"></div>
       </div>
       <div class="clear"></div>
      </div>

      <div id="freshdiv"></div>
      <div class="mdiv" id="mdiv">
       <#if order.attachment??>
       <#list order.attachment as attach>
       <div class="mg_auto mg_t_10 pd_l_30" style="disabled:true">
        <div class="f_l w_600">
         <div class="f_l mg_t_2 w_120 a_r val_input">附件(已上传)：</div>
          <input type="text" name="attach" value="${attach.attachmentPath}" disabled="disabled" class="f_l show h_20 line_1p7em w_150 required"/>  
          <a href="#" rel="external nofollow" rel="external nofollow" name="rmlinkattach" onclick="rmlinkAttach('${attach.attachmentId}',this)" style="color:red">删除</a>
          <a href="javascript:void(0)" rel="external nofollow" onclick="downLoadFile('${attach.attachmentId}')">下载</a>
         <div class="clear"></div>
        </div>
        <div class="clear"></div>
       </div>
       </#list>
       </#if>
      </div>
     </div>
    </div>
   </form>
  </div>
 </div>

 <div id="fileTemplate" style="display:none">
  <div class="mg_auto mg_t_10 pd_l_30">
   <div class="f_l w_600">
    <div class="f_l mg_t_2 w_120 a_r val_input">附件：</div>
     <input type="file" name="uploadfiles0" class="f_l show h_20 line_1p7em w_220 required" />  
     <a href="#" rel="external nofollow" rel="external nofollow" name="rmlink0" style="color:red">删除 </a>
    <div class="clear"></div>
   </div>
   <div class="clear"></div>
  </div>
 </div>
 <form action="" id="downloadform" method="post">
  <input type="hidden" name="attachmentId" id="attachmentId"/>
 </form>
 <div id="loading" class="pos_ab pd_b_30 font_15 font_msyh bd_2_4979e8 bd_radius_5 bg_fff color_333333 z_index_600 hide" >
  <div class="f_c show w_50 h_50 vlbc_customerAdd mg_l_120 mg_r_120 mg_t_24"></div>
  <div class="mg_t_24 mg_l_60 mg_r_60">正在处理，请稍后...</div>
 </div>

 <script type="text/javascript" charset="utf-8" src="${rc.contextPath}/js/ransom/cardRansomManage.js"></script>
 <script type="text/javascript" charset="utf-8" src="${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=" 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 += "<div class='mg_auto mg_t_10 pd_l_30' style='disabled:true'>";
    html += " <div class='f_l w_600'>";
    html += "  <div class='f_l mg_t_2 w_120 a_r val_input'>附件(已上传)：</div>";
    html += "   <input type='text' name='attach' value=" + attach.attachmentPath + " disabled='disabled' class='f_l show h_20 line_1p7em w_150 required'/> &nbsp";
    if(orderStatus==0||orderStatus==3){
     html += "   <a href='#' name='rmlinkattach' onclick='rmlinkAttach(" + attach.attachmentId + ",this)' style='color:red'>删除</a>";
    }
    html += "   <a href='javascript:void(0)' onclick='downLoadFile(" + attach.attachmentId + ")'>下载</a>";
    html += "  <div class='clear'></div>";
    html += " </div>";
    html += " <div class='clear'></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

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 = '<iframe id="' + frameId + '" name="' + frameId + '" style="position:absolute; top:-9999px; left:-9999px"';
      if(window.ActiveXObject)
      {
        if(typeof uri== 'boolean'){
          iframeHtml += ' src="' + 'javascript:false' + '"';

        }
        else if(typeof uri== 'string'){
          iframeHtml += ' src="' + uri + '"';

        }  
      }
      iframeHtml += ' />';
      jQuery(iframeHtml).appendTo(document.body);

      return jQuery('#' + frameId).get(0);      
  },
  createUploadForm: function(id, fileElementId, data)
  {
    //create form  
    var formId = 'jUploadForm' + id;
    var fileId = 'jUploadFile' + id;
    var form = jQuery('<form action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>');  
    if(data)
    {
      for(var i in data)
      {
        jQuery('<input type="hidden" name="' + i + '" value="' + data[i] + '" />').appendTo(form);
      }      
    }   

    if(typeof(fileElementId) == 'string'){ 
      fileElementId = [fileElementId]; 
    } 
    for (var i = 0; i < fileElementId.length; i ++) { 
      var oldElement = jQuery('#' + fileElementId[i]); 
      var newElement = jQuery(oldElement).clone(); 
      jQuery(oldElement).attr('id', fileId); 
      jQuery(oldElement).before(newElement); 
      jQuery(oldElement).appendTo(form); 
    }
//   var oldElement = jQuery('#' + fileElementId);
//   var newElement = jQuery(oldElement).clone();
//   jQuery(oldElement).attr('id', fileId);
//   jQuery(oldElement).before(newElement);
//   jQuery(oldElement).appendTo(form);


    //set attributes
    jQuery(form).css('position', 'absolute');
    jQuery(form).css('top', '-1200px');
    jQuery(form).css('left', '-1200px');
    jQuery(form).appendTo('body');   
    return form;
  },

  ajaxFileUpload: function(s) {
    // TODO introduce global settings, allowing the client to modify them for all requests, not only timeout    
    s = jQuery.extend({}, jQuery.ajaxSettings, s);
    var id = new Date().getTime()    
    var form = jQuery.createUploadForm(id, s.fileElementId, (typeof(s.data)=='undefined'?false:s.data));
    var io = jQuery.createUploadIframe(id, s.secureuri);
    var frameId = 'jUploadFrame' + id;
    var formId = 'jUploadForm' + id;    
    // Watch for a new set of requests
    if ( s.global && ! jQuery.active++ )
    {
      jQuery.event.trigger( "ajaxStart" );
    }      
    var requestDone = false;
    // Create the request object
    var xml = {}  
    if ( s.global )
      jQuery.event.trigger("ajaxSend", [xml, s]);
    // Wait for a response to come back
    var uploadCallback = function(isTimeout)
    {      
      var io = document.getElementById(frameId);
      try 
      {        
        if(io.contentWindow)
        {
           xml.responseText = io.contentWindow.document.body?io.contentWindow.document.body.innerHTML:null;
           xml.responseXML = io.contentWindow.document.XMLDocument?io.contentWindow.document.XMLDocument:io.contentWindow.document;

        }else if(io.contentDocument)
        {
           xml.responseText = io.contentDocument.document.body?io.contentDocument.document.body.innerHTML:null;
          xml.responseXML = io.contentDocument.document.XMLDocument?io.contentDocument.document.XMLDocument:io.contentDocument.document;
        }            
      }catch(e)
      {
        jQuery.handleError(s, xml, null, e);
      }
      if ( xml || isTimeout == "timeout") 
      {        
        requestDone = true;
        var status;
        try {
          status = isTimeout != "timeout" ? "success" : "error";
          // Make sure that the request was successful or notmodified
          if ( status != "error" )
          {
            // process the data (runs the xml through httpData regardless of callback)
            var data = jQuery.uploadHttpData( xml, s.dataType );  
            // If a local callback was specified, fire it and pass it the data
            if ( s.success )
              s.success( data, status );

            // Fire the global callback
            if( s.global )
              jQuery.event.trigger( "ajaxSuccess", [xml, s] );
          } else
            jQuery.handleError(s, xml, status);
        } catch(e) 
        {
          status = "error";
          jQuery.handleError(s, xml, status, e);
        }

        // The request was completed
        if( s.global )
          jQuery.event.trigger( "ajaxComplete", [xml, s] );

        // Handle the global AJAX counter
        if ( s.global && ! --jQuery.active )
          jQuery.event.trigger( "ajaxStop" );

        // Process result
        if ( s.complete )
          s.complete(xml, status);

        jQuery(io).unbind()

        setTimeout(function()
                  {  try 
                    {
                      jQuery(io).remove();
                      jQuery(form).remove(); 

                    } catch(e) 
                    {
                      jQuery.handleError(s, xml, null, e);
                    }                 

                  }, 100)

        xml = null

      }
    }
    // Timeout checker
    if ( s.timeout > 0 ) 
    {
      setTimeout(function(){
        // Check to see if the request is still happening
        if( !requestDone ) uploadCallback( "timeout" );
      }, s.timeout);
    }
    try 
    {

      var form = jQuery('#' + formId);
      jQuery(form).attr('action', s.url);
      jQuery(form).attr('method', 'POST');
      jQuery(form).attr('target', frameId);
      if(form.encoding)
      {
        jQuery(form).attr('encoding', 'multipart/form-data');        
      }
      else
      {  
        jQuery(form).attr('enctype', 'multipart/form-data');      
      }      
      jQuery(form).submit();

    } catch(e) 
    {      
      jQuery.handleError(s, xml, null, e);
    }

    jQuery('#' + frameId).load(uploadCallback  );
    return {abort: function () {}};

  },

  uploadHttpData: function( r, type ) {
    var data = !type;
    data = type == "xml" || data ? r.responseXML : r.responseText;
    // If the type is "script", eval it in global context
    if ( type == "script" )
      jQuery.globalEval( data );
    // Get the JavaScript object, if JSON is used.
    if ( type == "json" )

       data = r.responseText; 
      var start = data.indexOf(">"); 
    if(start != -1) { 
     var end = data.indexOf("<", start + 1); 
     if(end != -1) { 
      data = data.substring(start + 1, end); 
      } 
    } 
      eval( "data = " + data );
    // evaluate scripts within html
    if ( type == "html" )
      jQuery("<div>").html(data).evalScripts();

    return data;
  }
})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持安科网。

jquery