jquery实现动态添加附件功能

创建HTML页面

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

?


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

<!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

?


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

//设置面罩的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

?


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

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;

  }

})

     
Vue.JS多套精华视频教程合集 Web界面框架Vue.JS 五套中文+英文视频教程+资料
Vue 2.0高级实战开发移动端音乐WebApp–实战教程 
2017 vue.js实战 小米阅读开发 
2017潭州Arry精英战队手把手带你实战前端整站项目 
2017 vue node mongo Koa2 Nuxt/Vue SSR 全栈开发小程序商城高级全栈  ...2
2017最新 MUI 开发app视频教程
VUE.JS视频教程合集 百套教程任你学 前端实战vuejs2.0
极客WEB大前端专家级开发工程师培训视频学习教程
web前端视频教程 教学视频 百度网盘下载(价值700元)110G
nodejs 零基础入门视频教程
前端系列视频教程
html+css+bootstrap课程视频
《Sass 基础教程》共40节宁皓网课程
Hello,移动WEB 
传智前端开发
HTML5 学习 视频教程 教学视频 百度网盘下载 25G
后盾网全套教程html html5 css3 div+css php js 视频教程 教学视频 打包下载 44G
《Web前端开发 - JS基础入门》共25节课程
web前端培训 js教程 视频教程 教学视频 百度云网盘下载(价值300元)
【秀野堂】HTML5 CSS3实例标签页精解32讲

原文地址:https://www.cnblogs.com/xanthedsf/p/10164037.html

时间: 2024-10-10 12:02:48

jquery实现动态添加附件功能的相关文章

WEB前端技巧之JQuery为动态添加的元素绑定事件

jquery 为动态添加的元素绑定事件 如果直接写click函数的话,只能把事件绑定在已经存在的元素上,不能绑定在动态添加的元素上 可以用delegate来实现 .delegate( selector, eventType, handler ) 例如示例: $('someUlSelector').delegate('someLiSelector','click',function(){ //codes... //$(this) for the current jquery instance of

Jquery 实现动态添加table tr 和删除tr 以及checkbox的全选 和 获取添加TR删除TR后的数据

关于jquery实现动态添加table tr的问题我也不多说了 上面代码很多地方都有注释的 关于返回的 编辑后的table 数据 我这里想说的是我直接把他保存成一个连接起来的字符串了 格式 str=XXX | XXX | XXX , XXX | XXX | XXX , XXX | XXX | XXX 你也可以保存成对象类型的  我是为了方便后台的操作才这样做的 话不多说直接代码: <html> <head> <meta http-equiv="Content-Typ

jQuery获取动态添加的元素,live和on的区别

今天给大家说一下如果用jQuery获取动态添加的元素,通常如果你在网页上利用jQuery添加一个元素,那么用平常的jQuery获取元素的方法无效的获取不到的.可以用以下的方法获取动态元素!假设我们现在需要获取网页动态添加的div元素,并绑定click事件! 在jQuery1.9版本以前,可以用live方法: $('div').live('click' function () { // }); 在jQuery1.9版本以后,live方法被删除,用on方法来代替: 如果你用这样使用on方法的话,那么

jQuery如何动态添加具有删除按钮的行

jQuery如何动态添加具有删除按钮的行:在实际用中,如果要操作表格的话,那最多的莫过于添加和删除行的操作,一般情况下,动态添加的行也可以动态删除,下面就简单介绍一下如何实现此操作,虽然比较简单,但是还是希望能够或多或少能够给需要的朋友带来一定的帮助.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author"

动态添加input功能

动态添加input功能: <script>     var TfileUploadNum=3; //记录图片选择框个数     var Tnum=3; //ajax上传图片时索引     function TAddFileUpload() {         var idnum1 = TfileUploadNum+1;         var idnum2 = TfileUploadNum+2;         var str="<div id='fileDataDiv[&qu

jQuery对 动态添加 的元素 绑定事件(on()的用法)

从jQuery 版本 1.7 起,on() 方法是向被选元素添加事件处理程序的(官方推荐)首选方法. 当浏览器下载完一个页面的时候就开始渲染(翻译)HTML标签,然后执行css.js代码,在执行js代码的时候就注册了相应绑定的事件,我们平常用jQuery给HTML标签绑定(单击)事件是一般这样写 $("#btnId").click(function () { //触发事件后 逻辑 });  但是对用js动态添加的元素 是无效的,即没有绑定单击事件,所以对于动态添加的标签需要用on()来

jQuery给动态添加生成的元素绑定事件的方法

<div id="testdiv">   <ul></ul> </div> 需要给<ul>里面动态添加的<li>标签添加click事件 jquery 1.7版以前使用live动态绑定事件 $("#testdiv ul li").live("click",function(){ }); jquery 1.7版以后使用on动态绑定事件 $("#testdiv ul&qu

jQuery给动态添加的元素绑定事件的方法

jquery中绑定事件一般使用bind,或者click,但是这只能是对已经加载好的元素定义事件,那些后来添加插入的元素则需要另行绑定.在1.7版本以前使用live.但是在1.8版本以后推荐使用on.这里介绍jQuery中如何给动态添加的元素绑定事件在实际开发中会遇到要给动态生成的html元素绑定触发事件的情况 例如 1 <div id="testdiv"> 2 <ul></ul> 3 </div> 需要给<ul>里面动态添加的

如何获取jQuery中动态添加的元素

一.问题描述 用jQuery的append()方法动态添加了一段html代码之后,发现在为新添加的元素绑定click事件时无法获取该新元素. 二.解决方法 度娘推荐的方法基本是用live()方法 live()的官方定义和用法: live() 方法为被选元素附加一个或多个事件处理程序,并规定当这些事件发生时运行的函数.通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素(比如由脚本创建的新元素). live()的详细使用方法可以查看jQuery live() live()和