欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Easyui前端、JAVA后台 上传附件

程序员文章站 2022-07-17 11:51:01
前端使用easyui框架,后端使用JAVA 的JFinal框架开发 功能描述:实现附件上传功能。文件上传路径为:。。/upload(上传文件夹)/身份证号/慢病编码/上传的附件。 细节要求:实现多图片上传,上传后可在前台页面实现二次增加和删除 1.前台页面显示:填写身份证号、选择慢病信息,点击“上传 ......

前端使用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>
表单显示

 

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);
上传附件
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 }
删除附件