fileInput插件上传文件
一.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插件上传文件的更多相关文章
- Extjs 使用fileupload插件上传文件 带进度条显示
一.首先我们看看官方给出的插件的解释: 一个文件上传表单项具有自定义的样式,并且可以控制按钮的文本和 像文本表单的空文本类似的其他特性. 它使用一个隐藏的文件输入元素,并在用户选择文件后 在form提 ...
- 用jquery uploadify上传插件上传文件
public void ProcessRequest(HttpContext context) { string esOIDs = System.Web.HttpContext.Current.Req ...
- 后台使用Spring MVC 4.15 版本 通过 ajaxFileUpload plugin插件上传文件相应时引起的一个小问题,Chrome、Firefox中出现SyntaxError:unexpected token <
html: 使用ajaxFileUpload插件做文件上传时,后台返回json格式的数据,js代码如下: 接下来,把结果错误信息打印出来: 先在网上找了下解决办法方案,stackoverflow上有说 ...
- 使用SWFUpload插件上传文件
演示代码由两部分组成,包括前台文件和后台文件: 1.前台文件index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transi ...
- 《五》uploadify插件上传文件
下载地址:http://www.uploadify.com/wp-content/uploads/files/uploadify.zip 相关配置:http://www.uploadify.com/d ...
- ajaxFileUpload插件上传文件 返回 syntaxError :unexpected token
Html 代码<table id="deploy_application" class="bordered-table"> <tr> & ...
- ajaxFileUpload上传文件简单示例
写在前面: 上传文件的方式有很多,最近在做项目的时候,一开始也试用了利用jquery的插件ajaxFileUpload来上传大文件,下面,用一个上传文件的简单例子,记录下,学习的过程~~~ 还是老样子 ...
- php 应用 bootstrap-fileinput 上传文件 插件 操作的方法
//先加载插件所需要的 js .css 文件 <link href="css/fileinput.css" rel="stylesheet" type=& ...
- bootstrap-fileinput上传文件的插件使用总结----编辑已成功上传过的图片
http://plugins.krajee.com/file-plugin-methods-demo 具体操作 http://plugins.krajee.com/file-preview-manag ...
随机推荐
- Qt的事件
Qt的事件机制 事件过滤器: 可以让一个对象侦听拦截另外一个对象的事件. 实现原理: 在所有Qt对象的基类:QObject中有一个 类型为:QObjectList 名字为:eventFilters 的 ...
- c#基础知识之 Dataset 索引0没有值
datatable绑定到dataGrieView,在刷新datatable的数据时,常会bug:索引0没有值或索引(int)x没有值 昨天弄了一个下午,发现bug原因: dataGridView中有数 ...
- 为什么zookeeper集群中节点配置个数是奇数个?
Zookeeper的大部分操作都是通过选举产生的.比如,标记一个写是否成功是要在超过一半节点发送写请求成功时才认为有效.同样,Zookeeper选择领导者节点也是在超过一半节点同意时才有效.最后,Zo ...
- 洛谷P1904
法一,数字太大,可能通过不了 #include <iostream>#include <algorithm>#include <cstdio>using nam ...
- 数据库的未来:ORM+LINQ+RX
数据库的未来:ORM+LINQ+RX 数据 操作 异步 ORM LINQ RX
- 转://linux下hugepages理解
就Linux应用程序而言,使用的都是虚拟地址,当应用程序读写一个指定的虚拟地址时,内存管理单元会自动进行虚拟地址到物理地址的转换.一个虚拟地址可以映射到多个物理地址,但当前映射到哪一个物理地址取决于当 ...
- (六) JavaScript 对象
- 提取http接口响应报文中需要的值,获得的是string,使用dict转换为字典处理
- 【mongoDB查询进阶】聚合管道(一) -- 初识
https://segmentfault.com/a/1190000010618355 前言:一般查询可以通过find方法,但如果是比较复杂的查询或者数据统计的话,find可能就无能为力了,这时也许你 ...
- Apache Spark 内存管理详解(转载)
Spark 作为一个基于内存的分布式计算引擎,其内存管理模块在整个系统中扮演着非常重要的角色.理解 Spark 内存管理的基本原理,有助于更好地开发 Spark 应用程序和进行性能调优.本文旨在梳理出 ...