Easyui前端、JAVA后台 上传附件

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

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

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

1.前台页面显示：填写身份证号、选择慢病信息，点击“上传附件”按钮选择要上传的文件

     <tr>
     <td class="pe-label"><span class="sp_waning">*</span>身份证号：</td>
     <td class="pe-content">
         <input id="newchrApply_app05" name="newchrApply_app05" class="easyui-textbox">
     </td>
     <td class="pe-label">申请疾病：</td>
     <td class="pe-content">
         <input id="newchrApply_app10" name="newchrApply_app10" class="easyui-combobox">
 </tr>
 <tr>
    <td class="pe-label">附件上传：</td>
    <td class="pe-content" colspan="3">
       <span class="ui_button_primary"><label for="newchrApply_file1">上传附件</label></span>
       <input id="newchrApply_file1" name="newchrApply_file1" type="file" style="position:absolute;clip:rect(0 0 0 0);" multiple="multiple">
    </td>
 </tr>
 <tr>
    <td class="pe-label">上传附件名称：</td>
    <td class="pe-content" colspan="3">
       <ul id='content'></ul>
    </td>
 </tr>

表单显示Html代码

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

 var chrApply_filesTemp = [];//保存上传的附件集合
 //显示上传文件名
 var test = document.getElementById('newchrApply_file1');
 test.addEventListener('change', function() {
    var t_files = this.files;
    var p_idnum = $.trim($('#newchrApply_app05').val()); //身份证号
    var p_icd01 = $('#newchrApply_app10').combobox('getValue');
    if(p_idnum == '' || p_icd01 == '') {
       $.messager.alert('提示', '请输入身份证号或选择疾病！', 'warning');
       return;
    }
    var p_app01 = $.trim($('#newchrApply_app01').val());
    if(p_app01 == '') {
       var p_code = "SQ" + CreateCode(3);
       $('#newchrApply_app01').val(p_code);
    }
    var str = '';
    if(t_files.length > 0) {
       var formData = new FormData();
       for(var i = 0; i < t_files.length; i++) {
          formData.append("file_cont" + i, t_files[i]);
       }
       formData.append("fileCount", t_files.length);
       formData.append("app05", p_idnum);
       formData.append("app10", p_icd01);
       $.ajax({
          url: '/ChrApply/UploadFiles',
          type: 'POST',
          data: formData,
          processData: false,
          contentType: false,
          success: function(result) {
             if(result.code > 0) {
                var p_filesname = [];
                if(chrApply_filesTemp.length > 0) {
                   for(var i = 0; i < chrApply_filesTemp.length; i++) {
                      if(p_filesname.indexOf(chrApply_filesTemp[i].name) == -1) {
                         p_filesname.push(chrApply_filesTemp[i].name);
                      }
                   }
                }
                var chrApply_filesUp = t_files; //新上传的文件集合
                if(chrApply_filesUp.length > 0) {
                   for(var i = 0; i < chrApply_filesUp.length; i++) {
                      if(p_filesname.indexOf(chrApply_filesUp[i].name) == -1) {
                         chrApply_filesTemp.push({
                            'name': chrApply_filesUp[i].name,
                            'size': chrApply_filesUp[i].size
                         });
                      }
                   }
                }
                for(var i = 0, len = chrApply_filesTemp.length; i < len; i++) {
                   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>' +
                      ' <input id="delfj" type="button" value="删除" onclick="delAnnex(' + i + ')" ></li>';
                }
                document.getElementById('content').innerHTML = str;
             } else {
                $.messager.alert('提示', result.msg, 'warning');
             }
          }
       });
    }
 }, false);

上传附件JS代码

     /**
      * 上传附件(多文件上传)
      *
      */
     public void UploadFiles() {
         MessageData data = new MessageData();
         try {
             UploadFile file0 = getFile("file_cont0");
             String UploadPath0 = file0.getUploadPath();
             Integer fileCount = getParaToInt("fileCount");
             String app05 = getPara("app05");// 身份证号
             String app10 = getPara("app10");// 疾病编码
             String path = "upload/" + app05 + "/" + app10 + "/".trim();

             // 1.新建【身份证】文件夹
             FileOperate fo = new FileOperate();
             fo.createFolder(UploadPath0 + "/" + app05);
             File directory = new File(UploadPath0 + "/" + app05);// 设定为当前文件夹
             // System.out.println(directory.getCanonicalFile());//返回类型为File
             // 2.在【身份证】文件夹下-->建立【疾病编码】文件夹
             FileOperate fo_1 = new FileOperate();
             fo_1.createFolder(directory.getCanonicalFile() + "/" + app10);

             String realPath = getSession().getServletContext().getRealPath(path);
             // 数据库添加附件信息
             for (int i = 0; i < fileCount; i++) {
                 UploadFile file = getFile("file_cont" + i);
                 String fileName = file.getFileName();
                 String newName = fileName;

                 // 移动文件：从oldPath路径 -->移动到-->newPath路径,并删除oldPath路径 里的文件
                 String oldPath = file.getUploadPath() + "\\" + newName.trim();
                 String newPath = file.getUploadPath() + "\\" + app05 + "\\" + app10 + "\\" + newName.trim();
                 file.getFile().renameTo(new File(realPath + "/" + newName));
                 fo_1.moveFile(oldPath, newPath);
             }
             data.setCode(1);
         } catch (Exception e) {
             data.setCode(0);
             data.setMsg("上传失败！" + e.getCause().getMessage());
         } finally {
             JSONObject json = JSONObject.fromObject(data);
             renderJson(json.toString());
         }
     }

上传附件后台JAVA代码

3.附件上传保存路径：

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

 //删除
 function delAnnex(id) {
    var del_idnum = $.trim($('#newchrApply_app05').val()); //身份证号
    var del_icd01 = $('#newchrApply_app10').combobox('getValue');
    var del_name = document.getElementById("sp_name_" + id).innerText;

    $.ajax({
       url: '/ChrApply/DeleteAnnex',
       type: 'POST',
       data: {
          'app05': del_idnum,
          'app10': del_icd01,
          'ann01': del_name
       },
       success: function(result) {
          if(result.code > 0) {
             // 删除集合中的元素
             for(var i = 0; i < chrApply_filesTemp.length; i++) {
                var flg = isEqual(chrApply_filesTemp[i].name.valueOf(), del_name.valueOf());
                if(flg == true) {
                   chrApply_filesTemp.splice(i, 1);
                }
             }
             var first = document.getElementById("li_" + id);
             first.remove();
          } else {
             $.messager.alert('提示', result.msg, 'warning');
          }
       }
    });
 }

删除按钮JS代码

     /**
      * 删除附件
      */
     public void DeleteAnnex() {
         MessageData data = new MessageData();
         try {
             String app05 = getPara("app05");// 身份证号
             String app10 = getPara("app10");// 疾病编码
             String ann01 = getPara("ann01");// 文件名
             String url = "upload/" + app05 + "/" + app10 + "/" + ann01.trim();

             // 删除上传到服务器的文件
             String realPath = getSession().getServletContext().getRealPath(url);
             File file = new File(realPath);
             file.delete();

             data.setCode(1);
         } catch (Exception e) {
             data.setCode(0);
             data.setMsg("删除申诉材料失败！" + e.getCause().getMessage());
         } finally {
             JSONObject json = JSONObject.fromObject(data);
             renderJson(json.toString());
         }
     }

删除附件后台JAVA代码

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