Easyui前端、JAVA后台 上传附件详解编程语言

 

前端使用easyui框架,后台使用JAVA 的JFinal框架开发

功能描述:实现附件上传功能。文件上传路径为:。。/upload(上传文件夹)/身份证号/慢病编码/上传的附件。

细节要求:实现多图片上传,上传后可在前台页面实现二次增加和删除

1.前台页面显示:填写身份证号、选择慢病信息,点击“上传附件”按钮选择要上传的文件Easyui前端、JAVA后台 上传附件详解编程语言

Easyui前端、JAVA后台 上传附件详解编程语言

 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>

表单显示Html代码

 

2.在“上传附件名称”中显示上传的文件信息及删除按钮。

Easyui前端、JAVA后台 上传附件详解编程语言

Easyui前端、JAVA后台 上传附件详解编程语言

 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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;大小:<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);

上传附件JS代码

Easyui前端、JAVA后台 上传附件详解编程语言

 1     /** 
 2      * 上传附件(多文件上传) 
 3      *  
 4      */ 
 5     public void UploadFiles() { 
 6         MessageData data = new MessageData(); 
 7         try { 
 8             UploadFile file0 = getFile("file_cont0"); 
 9             String UploadPath0 = file0.getUploadPath(); 
10             Integer fileCount = getParaToInt("fileCount"); 
11             String app05 = getPara("app05");// 身份证号 
12             String app10 = getPara("app10");// 疾病编码 
13             String path = "upload/" + app05 + "/" + app10 + "/".trim(); 
14  
15             // 1.新建【身份证】文件夹 
16             FileOperate fo = new FileOperate(); 
17             fo.createFolder(UploadPath0 + "/" + app05); 
18             File directory = new File(UploadPath0 + "/" + app05);// 设定为当前文件夹 
19             // System.out.println(directory.getCanonicalFile());//返回类型为File 
20             // 2.在【身份证】文件夹下-->建立【疾病编码】文件夹 
21             FileOperate fo_1 = new FileOperate(); 
22             fo_1.createFolder(directory.getCanonicalFile() + "/" + app10); 
23  
24             String realPath = getSession().getServletContext().getRealPath(path); 
25             // 数据库添加附件信息 
26             for (int i = 0; i < fileCount; i++) { 
27                 UploadFile file = getFile("file_cont" + i); 
28                 String fileName = file.getFileName(); 
29                 String newName = fileName; 
30  
31                 // 移动文件:从oldPath路径 -->移动到-->newPath路径,并删除oldPath路径 里的文件 
32                 String oldPath = file.getUploadPath() + "//" + newName.trim(); 
33                 String newPath = file.getUploadPath() + "//" + app05 + "//" + app10 + "//" + newName.trim(); 
34                 file.getFile().renameTo(new File(realPath + "/" + newName)); 
35                 fo_1.moveFile(oldPath, newPath); 
36             } 
37             data.setCode(1); 
38         } catch (Exception e) { 
39             data.setCode(0); 
40             data.setMsg("上传失败!" + e.getCause().getMessage()); 
41         } finally { 
42             JSONObject json = JSONObject.fromObject(data); 
43             renderJson(json.toString()); 
44         } 
45     }

上传附件后台JAVA代码

 

3.附件上传保存路径:

Easyui前端、JAVA后台 上传附件详解编程语言

4.实现前台页面删除附件功能

Easyui前端、JAVA后台 上传附件详解编程语言

 

Easyui前端、JAVA后台 上传附件详解编程语言

Easyui前端、JAVA后台 上传附件详解编程语言

 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 }

删除按钮JS代码

Easyui前端、JAVA后台 上传附件详解编程语言

 1     /** 
 2      * 删除附件 
 3      */ 
 4     public void DeleteAnnex() { 
 5         MessageData data = new MessageData(); 
 6         try { 
 7             String app05 = getPara("app05");// 身份证号 
 8             String app10 = getPara("app10");// 疾病编码 
 9             String ann01 = getPara("ann01");// 文件名 
10             String url = "upload/" + app05 + "/" + app10 + "/" + ann01.trim(); 
11  
12             // 删除上传到服务器的文件 
13             String realPath = getSession().getServletContext().getRealPath(url); 
14             File file = new File(realPath); 
15             file.delete(); 
16  
17             data.setCode(1); 
18         } catch (Exception e) { 
19             data.setCode(0); 
20             data.setMsg("删除申诉材料失败!" + e.getCause().getMessage()); 
21         } finally { 
22             JSONObject json = JSONObject.fromObject(data); 
23             renderJson(json.toString()); 
24         } 
25     }

删除附件后台JAVA代码

 

注:上传附件及删除附件后台JAVA代码中使用到的UploadFile类及FileOperate类的代码请参考我的博文《JAVA文件操作工具类(读、增、删除、复制)》https://www.cnblogs.com/KLLQBKY/p/9293154.html

原创文章,作者:Maggie-Hunter,如若转载,请注明出处:https://blog.ytso.com/13167.html

(0)
上一篇 2021年7月19日
下一篇 2021年7月19日

相关推荐

发表回复

登录后才能评论