jquery实现动态添加附件功能_jquery-HTML5中文学习网

本文实例为大家分享了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;  }})

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