前端使用easyui框架，后端使用JAVA 的JFinal框架开发
功能描述：实现附件上传功能。文件上传路径为：。。/upload(上传文件夹)/身份证号/慢病编码/上传的附件。
细节要求：实现多图片上传，上传后可在前台页面实现二次增加和删除
1.前台页面显示：填写身份证号、选择慢病信息，点击“上传附件”按钮选择要上传的文件
前台页面代码：
1 <tr> 2 <td class="pe-label"><span class="sp_waning">*</span>身份证号：</td> 3 <td class="pe-content"> 4 <input id="newchrApply_app05" name="newchrApply_app05" class="easyui-textbox"> 5 </td> 6 <td class="pe-label">申请疾病：</td> 7 <td class="pe-content"> 8 <input id="newchrApply_app10" name="newchrApply_app10" class="easyui-combobox"> 9 </tr> 10 <tr> 11 <td class="pe-label">附件上传：</td> 12 <td class="pe-content" colspan="3"> 13 <span class="ui_button_primary"><label for="newchrApply_file1">上传附件</label></span> 14 <input id="newchrApply_file1" name="newchrApply_file1" type="file" style="position:absolute;clip:rect(0 0 0 0);" multiple="multiple"> 15 </td> 16 </tr> 17 <tr> 18 <td class="pe-label">上传附件名称：</td> 19 <td class="pe-content" colspan="3"> 20 <ul id='content'></ul> 21 </td> 22 </tr>
2.在“上传附件名称”中显示上传的文件信息及删除按钮。
1 var chrApply_filesTemp = [];//保存上传的附件集合 2 //显示上传文件名 3 var test = document.getElementById('newchrApply_file1'); 4 test.addEventListener('change', function() { 5 var t_files = this.files; 6 var p_idnum = $.trim($('#newchrApply_app05').val()); //身份证号 7 var p_icd01 = $('#newchrApply_app10').combobox('getValue'); 8 if(p_idnum == '' || p_icd01 == '') { 9 $.messager.alert('提示', '请输入身份证号或选择疾病！', 'warning'); 10 return; 11 } 12 var p_app01 = $.trim($('#newchrApply_app01').val()); 13 if(p_app01 == '') { 14 var p_code = "SQ" + CreateCode(3); 15 $('#newchrApply_app01').val(p_code); 16 } 17 var str = ''; 18 if(t_files.length > 0) { 19 var formData = new FormData(); 20 for(var i = 0; i < t_files.length; i++) { 21 formData.append("file_cont" + i, t_files[i]); 22 } 23 formData.append("fileCount", t_files.length); 24 formData.append("app05", p_idnum); 25 formData.append("app10", p_icd01); 26 $.ajax({ 27 url: '/ChrApply/UploadFiles', 28 type: 'POST', 29 data: formData, 30 processData: false, 31 contentType: false, 32 success: function(result) { 33 if(result.code > 0) { 34 var p_filesname = []; 35 if(chrApply_filesTemp.length > 0) { 36 for(var i = 0; i < chrApply_filesTemp.length; i++) { 37 if(p_filesname.indexOf(chrApply_filesTemp[i].name) == -1) { 38 p_filesname.push(chrApply_filesTemp[i].name); 39 } 40 } 41 } 42 var chrApply_filesUp = t_files; //新上传的文件集合 43 if(chrApply_filesUp.length > 0) { 44 for(var i = 0; i < chrApply_filesUp.length; i++) { 45 if(p_filesname.indexOf(chrApply_filesUp[i].name) == -1) { 46 chrApply_filesTemp.push({ 47 'name': chrApply_filesUp[i].name, 48 'size': chrApply_filesUp[i].size 49 }); 50 } 51 } 52 } 53 for(var i = 0, len = chrApply_filesTemp.length; i < len; i++) { 54 str += '<li id="li_' + i + '">名称：<span id="sp_name_' + i + '">' + chrApply_filesTemp[i].name + '</span> 大小：<span id="sp_size_' + i + '"> ' + parseInt(chrApply_filesTemp[i].size / 1024) + 'KB</span>' + 55 ' <input id="delfj" type="button" value="删除" onclick="delAnnex(' + i + ')" ></li>'; 56 } 57 document.getElementById('content').innerHTML = str; 58 } else { 59 $.messager.alert('提示', result.msg, 'warning'); 60 } 61 } 62 }); 63 } 64 }, false); 1 //删除 2 function delAnnex(id) { 3 var del_idnum = $.trim($('#newchrApply_app05').val()); //身份证号 4 var del_icd01 = $('#newchrApply_app10').combobox('getValue'); 5 var del_name = document.getElementById("sp_name_" + id).innerText; 6 7 $.ajax({ 8 url: '/ChrApply/DeleteAnnex', 9 type: 'POST', 10 data: { 11 'app05': del_idnum,//身份证号 12 'app10': del_icd01,//慢病编码 13 'ann01': del_name//附件名称 14 }, 15 success: function(result) { 16 if(result.code > 0) { 17 // 删除集合中的元素 18 for(var i = 0; i < chrApply_filesTemp.length; i++) { 19 var flg = isEqual(chrApply_filesTemp[i].name.valueOf(), del_name.valueOf()); 20 if(flg == true) { 21 chrApply_filesTemp.splice(i, 1); 22 } 23 } 24 var first = document.getElementById("li_" + id); 25 first.remove(); 26 } else { 27 $.messager.alert('提示', result.msg, 'warning'); 28 } 29 } 30 }); 31 }