jquery实现动态添加附件功能
Posted xanthedsf
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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"><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; }}) |
以上是关于jquery实现动态添加附件功能的主要内容，如果未能解决你的问题，请参考以下文章