jquery实现动态添加附件功能

2018-10-23 12 bwf1234

本文实例为大家分享了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'/>  ";
    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文章

jQuery实现的背景颜色渐变动画效果示例
Mar 24 23
jQuery动态添加.active 实现导航效果代码思路详解
Aug 29 33
jQuery 改变P标签文本值方法
Feb 24 20
jQuery实现新闻播报滚动及淡入淡出效果示例
Mar 23 22
jQuery实现form表单序列化转换为json对象功能示例
May 23 24
jQuery实现获取动态添加的标签对象示例
Jun 28 27
jQuery实现影院选座订座效果
Apr 13 52
手机访问当前页面