一.ftl

<form action="" method="post" name="form" id="form">
        <div class="m-solbox m-solbox-3">

            <div style="margin-left:180px">
            <table style="border-collapse: separate;border-spacing: 10px;font-size: 14px;">
                <tr>
                    <td>版本:
                        <input type="hidden" name="id" value="" >
                    </td>
                </tr>

                <tr>
                    <td>上传附件:</td>
                    <td>
                        <input id="uploadFile" type="file" name="fileName" multiple />
                    </td>
                </tr>
                <#if files??>
                <tr>
                    <td>已有附件:</td>
                    <td>
                        <#escape x as x!"">
                        <#list files as fileName >
                        <span>
                            <a href="${filePaths[fileName_index]}">${fileName}</a>
                            <a href="###" title="删除" onclick='deleteFile(this,"${fileName}")'>
                                <img src="/img/nav/Trash_Delete.png" style="border: none">
                            </a>
                        </span>
                        </#list>
                        </#escape>
                    </td>
                </tr>
                </#if>
            </table>
                </div>
        </div>
</form>

引入文件:
<link href="/css/flash/fileinput.css" media="all" rel="stylesheet" type="text/css" />
<script src="/js/base/fileinput.js" type="text/javascript"></script>

二.js : proReports.js

$(document).ready(function(){
    initFileInput("uploadFile");
});

function initFileInput(ctrlName) {
    var control = $('#' + ctrlName);
    control.fileinput({
        uploadUrl: '/file/uploadFile',
        language: "zh",
        //showUpload: false,               //是否显示上传按钮
        dropZoneEnabled: false,         //是否显示拖拽区域
        enctype: 'multipart/form-data',
        uploadExtraData: {  //上传的时候,增加的附加参数
            "projectId": $("#project_id").val(),
            "versionId": $("#versionId").val(),
            "fea": $("#fea").val()
        }
    })//文件上传完成后的事件
    .on('fileuploaded', function (event, data, previewId, index) {
        var response = data.response;
        //alert(response.msg);
        window.location.reload();
    });
}

function deleteFile(obj,deleteFile){
    if(confirm('确认要删除么?')){
        $.ajax({
            type: 'POST',
            url: '/pro/deleteFile',
            data:{
               "projectId": $("#project_id").val(),
               "versionId": $("#versionId").val(),
               "fea": $("#fea").val(),
               "deleteFile":deleteFile,
            },
            cache:false,
            dataType : "json",
            success: function(data){
                if(data.msg=="删除失败"){
                    alert(data.msg);
                }else{
                   $(obj).parent().remove();
                }
            }
         });
    }
}

三.上传文件的controller :ProEmailAttachmentController

@RequestMapping(value="/file/uploadFile",method = RequestMethod.POST)
    public @ResponseBody Map<String, Object>  uploadFile(@RequestParam("fileName") MultipartFile[]  file,HttpServletRequest request) throws Exception{
        String projectIdStr = request.getParameter("projectId");
        Integer projectId = Integer.valueOf(projectIdStr);
        String fea = request.getParameter("fea");
        String versionIdStr=request.getParameter("versionId");
        Integer versionId = Integer.valueOf(versionIdStr);
        String msg = "";
        try {
            //上传
            String path = Thread.currentThread().getContextClassLoader().getResource("").getPath();
            path=path+"folderPath.properties";
            Properties prop = new Properties();
            prop.load(new FileInputStream(path));
            String uploadPath =prop.getProperty("UploadMailPath")+"/"+projectId+"/"+fea+"/"+versionId;
            for (int i = 0; i < file.length; i++) {
                if (!file[i].isEmpty()) {
                    // 文件名称
                    File targetFile = new File(uploadPath, file[i].getOriginalFilename());
                    if (!targetFile.exists()){
                        targetFile.mkdirs();
                    }
                    file[i].transferTo(targetFile);
                }
            }
         } catch (Exception e) {
            e.printStackTrace();
            logger.info(e.getMessage());
            msg = "上传失败!";
         }
        Map<String, Object> map = new HashMap<String, Object>();
        map.put("msg", msg);
        map.put("code", 200);
        return map;
    }

@RequestMapping(value="/pro/deleteFile",method = RequestMethod.POST)
    public @ResponseBody Map<String, Object>  deleteFile(HttpServletRequest request) throws Exception{
        String projectIdStr = request.getParameter("projectId");
        Integer projectId = Integer.valueOf(projectIdStr);
        String fea = request.getParameter("fea");
        String versionIdStr=request.getParameter("versionId");
        Integer versionId = Integer.valueOf(versionIdStr);
        String deleteFile=request.getParameter("deleteFile");
        String msg = "";
        try {
            //上传
            String path = Thread.currentThread().getContextClassLoader().getResource("").getPath();
            path=path+"folderPath.properties";
            Properties prop = new Properties();
            prop.load(new FileInputStream(path));
            String uploadPath =prop.getProperty("UploadMailPath")+"/"+projectId+"/"+fea+"/"+versionId;
            File targetFile = new File(uploadPath, deleteFile);
            if (targetFile.exists()){
                targetFile.delete();
            }
         } catch (Exception e) {
            e.printStackTrace();
            logger.info(e.getMessage());
            msg = "删除失败!";
         }
        Map<String, Object> map = new HashMap<String, Object>();
        map.put("msg", msg);
        map.put("code", 200);
        return map;
    }

4.获取文件的Controller :ProReportController

@RequestMapping(value = "/pro/report", method = RequestMethod.GET)
    public String home(HttpServletRequest request, Model model) throws FileNotFoundException, IOException {
        String projectIdStr = request.getParameter("projectId");
        Integer projectId = Integer.valueOf(projectIdStr);
        model.addAttribute("productId", projectId);
        Project project = systemService.getProjectByProjectId(projectId);
        List<Version> versionList = systemService.getVersionByProjectId(projectId);
        FeatureEmail featureEmail = this.featureEmailMngr.getFeatureEmailByProductIdAndFea(projectId, "0");
        String[] checkEmails = null;
        if(featureEmail != null && !CheckUtils.isNullOrBlank(featureEmail.getCheckEmail())) {
            checkEmails = featureEmail.getCheckEmail().split(",");
        }

        String user = this.authService.getCookieParameter(request, "token","userid").split(" ")[0];
        model.addAttribute("user", user);
        //        处理邮件主题
        StringBuffer subject=new StringBuffer();
        subject.append("【请阅:PDU一部产品与解決方案测试部】");
        subject.append(project.getName().split("-")[0]+" ");
        subject.append("产品测试报告");
        SimpleDateFormat df = new SimpleDateFormat("yyyy-MM-dd");
        subject.append("("+df.format(new Date())+")");
        model.addAttribute("subject", subject);
        if (CheckUtils.isNullOrBlank(versionList)){
            model.addAttribute("isFind", new Boolean(false));
            return "/productkanban/report";
        }else {
            model.addAttribute("isFind", new Boolean(true));
        }
        model.addAttribute("featureEmail", featureEmail);
        model.addAttribute("checkEmails", checkEmails);
        //处理已有附件
        String path = Thread.currentThread().getContextClassLoader().getResource("").getPath();
        path=path+"folderPath.properties";
        Properties prop = new Properties();
        prop.load(new FileInputStream(path));
        String uploadPath =prop.getProperty("UploadMailPath")+"/"+projectId+"/0/"+versionId;
        File destDir = new File(uploadPath);
        if (destDir.exists()) {
            List<String> files = FileUtils.getFile(uploadPath);
            if(!CheckUtils.isNullOrBlank(files)){
                List<String> filePaths = new ArrayList<String>();
                for(String fileName:files){
                    filePaths.add(prop.getProperty("UploadMailURL")+"/"+projectId+"/0/"+versionId+"/"+fileName);
                }
                model.addAttribute("files", files);
                model.addAttribute("filePaths", filePaths);
            }
        }
        return "/productkanban/report";
    }

fileInput插件上传文件的更多相关文章

  1. Extjs 使用fileupload插件上传文件 带进度条显示

    一.首先我们看看官方给出的插件的解释: 一个文件上传表单项具有自定义的样式,并且可以控制按钮的文本和 像文本表单的空文本类似的其他特性. 它使用一个隐藏的文件输入元素,并在用户选择文件后 在form提 ...

  2. 用jquery uploadify上传插件上传文件

    public void ProcessRequest(HttpContext context) { string esOIDs = System.Web.HttpContext.Current.Req ...

  3. 后台使用Spring MVC 4.15 版本 通过 ajaxFileUpload plugin插件上传文件相应时引起的一个小问题,Chrome、Firefox中出现SyntaxError:unexpected token <

    html: 使用ajaxFileUpload插件做文件上传时,后台返回json格式的数据,js代码如下: 接下来,把结果错误信息打印出来: 先在网上找了下解决办法方案,stackoverflow上有说 ...

  4. 使用SWFUpload插件上传文件

    演示代码由两部分组成,包括前台文件和后台文件: 1.前台文件index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transi ...

  5. 《五》uploadify插件上传文件

    下载地址:http://www.uploadify.com/wp-content/uploads/files/uploadify.zip 相关配置:http://www.uploadify.com/d ...

  6. ajaxFileUpload插件上传文件 返回 syntaxError :unexpected token

    Html 代码<table id="deploy_application" class="bordered-table"> <tr> & ...

  7. ajaxFileUpload上传文件简单示例

    写在前面: 上传文件的方式有很多,最近在做项目的时候,一开始也试用了利用jquery的插件ajaxFileUpload来上传大文件,下面,用一个上传文件的简单例子,记录下,学习的过程~~~ 还是老样子 ...

  8. php 应用 bootstrap-fileinput 上传文件 插件 操作的方法

    //先加载插件所需要的 js .css 文件 <link href="css/fileinput.css" rel="stylesheet" type=& ...

  9. bootstrap-fileinput上传文件的插件使用总结----编辑已成功上传过的图片

    http://plugins.krajee.com/file-plugin-methods-demo 具体操作 http://plugins.krajee.com/file-preview-manag ...

随机推荐

  1. 一、Selenium 工作原理

    1.Selenium介绍 Selenium是用于测试Web应用程序用户界面UI的常用框架.端对端的功能测试.并且在一个多个浏览器中操作. 目前Seienium 组件主要包括Selenium IDE   ...

  2. June. 21 2018, Week 25th. Thursday

    Summertime is always the best of what might be. 万物最美的一面,总在夏季展现. From Charles Bowden. It was June, an ...

  3. [福大软工] Z班——个人技术博客评分

    个人技术博客 作业地址 https://edu.cnblogs.com/campus/fzu/SoftwareEngineering2015/homework/1070 作业要求 个人技术博客单次作业 ...

  4. 【转】vue父子组件之间的通信

    vue父子组件之间的通信 在vue组件通信中其中最常见通信方式就是父子组件之中的通性,而父子组件的设定方式在不同情况下又各有不同.最常见的就是父组件为控制组件子组件为视图组件.父组件传递数据给子组件使 ...

  5. 从n个数里面选择m个数

    从n个数里面选择m个数 #include<iostream> #include<vector> using namespace std; vector<int> s ...

  6. node基础—概述与安装

    什么是Nodejs 简单的说 Node.js 就是运行在服务端的 JavaScrip(编写高性能网络服务器的JavaScript工具包(用js开发服务端程序))t. JS是脚本语言,脚本语言都需要一个 ...

  7. C#、Java中的一些小知识点总结(持续更新......)

    前言:在项目中,有时候一些小的知识,总是容易让人忽略,但是这些功能加在项目中往往十分的有用,因此笔者在这里总结项目中遇到的一些实用的小知识点,以备用,并持续更新...... 1.禁用DataGridV ...

  8. Mariadb Redis 的配置使用

    Mariadb Mysql 的配置使用 CentOS 7 Mariadb 的学习 在linux上安装软件的方式 yum安装 在线搜索rpm格式的软件包,进行自动的依赖关系处理,下载,安装 ​ (阿里云 ...

  9. 从 0 → 1,学习Linux该这么开始!

    首先我们还是来普及以下概念,讲点虚的.现在是图形系统的天下,windows我们用了20多年.成功归功与它图形界面,你会点鼠标吗你会敲键盘吗?所以你会上网会聊天会玩游戏了.那么,0基础接触的Linux, ...

  10. PHP程序员的能力水平层次

    PHP程序员的能力水平层次 之前看过很多篇关于服务端工程师和PHP开发者的能力模型介绍,每篇都对能力有侧重点. 下面我们来详细谈谈以开发能力为基准点的PHP程序员的能力水平层次. 层层递进 1.功能开 ...