一.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. 怎么将后缀为.opt,.frm,.myd,.myi文件还原或者是导入mySQL中

    其实这个问题的解决方案很简单,把这些文件连同这些文件所在的文件夹原封不动地复制到你的 mysql 文件夹下的 data 里面 (在我的电脑里面是D:\xampp\mysql\data), 然后你进my ...

  2. ubuntu 安装FoxitReader福昕阅读器(转载)

    虽然不怎么用Ubuntu来看文档,但是偶尔还是需要看一下的.而Ubuntu自带的打开PDF的软件真的看着很难受,装一个跨平台的福昕好了. 首先,下载.可以官网下载:福昕官网 不过晚上不知道网络抽风还是 ...

  3. spring boot +RabbitMQ +InfluxDB+Grafara监控实践

    本文需要有相关spring boot 或spring cloud 相关微服务框架的基础,如果您具备相关基础可以很容易的实现下述过程!!!!!!! 希望本文的所说对需要的您有所帮助 从这里我们开始进入闲 ...

  4. 原生js获取鼠标坐标方法全面讲解:clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y

    关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种 event.clientX/Y event.pageX/Y event.offsetX/Y event.layerX/Y event.sc ...

  5. 解决:Vue刷新/载入页面,出现双括号闪现后消失

    https://cn.vuejs.org/v2/api/#v-cloak v-cloak 不需要表达式 用法: 这个指令保持在元素上直到关联实例结束编译.和 CSS 规则如 [v-cloak] { d ...

  6. 下载时出现using cached如何解决

    pip3 --no-cache-dir install xlsxwriter 这样就可以了

  7. centos7下安装docker(26如何配置Health Check)

    Docker只能从容器启动进程的返回代码判断其状态,而对于容器内部应用的运行状况基本没有了解 执行docker run命令时,通常根据dockerfile中的CMD或ENTRYPOINT启动一个进程, ...

  8. How to get Docker

    Docker 通俗的理解就是像VM一样的虚拟技术,但是不完全相同. Docker可以打包为镜像文件,在镜像中运行容器. 镜像和容器可以理解成类和对象的关系. 拿VM虚拟机和docker来举例,一个容器 ...

  9. robotframework使用中的一些注意事项

    1.关于\的转义.使用\\ 2.关于字符串的合并 3.切换到iframe,切出iframe 4.对对象右键点击 5.对对象实现按键操作,在处理一些下拉对象时需要用到. 6.当元素定位十分困难的时候,需 ...

  10. HTTP协议、HTTP请求方法、常见状态码、HTTP消息

    HTTP协议 客户端请求,服务端响应.浏览器与服务器不建立持久连接,响应后连接失效. HTTP请求方法 一.GET GET方法用于获取请求页面的指定信息. 二.HEAD 除了服务器不能在响应里返回消息 ...