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 ...
随机推荐
- 怎么将后缀为.opt,.frm,.myd,.myi文件还原或者是导入mySQL中
其实这个问题的解决方案很简单,把这些文件连同这些文件所在的文件夹原封不动地复制到你的 mysql 文件夹下的 data 里面 (在我的电脑里面是D:\xampp\mysql\data), 然后你进my ...
- ubuntu 安装FoxitReader福昕阅读器(转载)
虽然不怎么用Ubuntu来看文档,但是偶尔还是需要看一下的.而Ubuntu自带的打开PDF的软件真的看着很难受,装一个跨平台的福昕好了. 首先,下载.可以官网下载:福昕官网 不过晚上不知道网络抽风还是 ...
- spring boot +RabbitMQ +InfluxDB+Grafara监控实践
本文需要有相关spring boot 或spring cloud 相关微服务框架的基础,如果您具备相关基础可以很容易的实现下述过程!!!!!!! 希望本文的所说对需要的您有所帮助 从这里我们开始进入闲 ...
- 原生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 ...
- 解决:Vue刷新/载入页面,出现双括号闪现后消失
https://cn.vuejs.org/v2/api/#v-cloak v-cloak 不需要表达式 用法: 这个指令保持在元素上直到关联实例结束编译.和 CSS 规则如 [v-cloak] { d ...
- 下载时出现using cached如何解决
pip3 --no-cache-dir install xlsxwriter 这样就可以了
- centos7下安装docker(26如何配置Health Check)
Docker只能从容器启动进程的返回代码判断其状态,而对于容器内部应用的运行状况基本没有了解 执行docker run命令时,通常根据dockerfile中的CMD或ENTRYPOINT启动一个进程, ...
- How to get Docker
Docker 通俗的理解就是像VM一样的虚拟技术,但是不完全相同. Docker可以打包为镜像文件,在镜像中运行容器. 镜像和容器可以理解成类和对象的关系. 拿VM虚拟机和docker来举例,一个容器 ...
- robotframework使用中的一些注意事项
1.关于\的转义.使用\\ 2.关于字符串的合并 3.切换到iframe,切出iframe 4.对对象右键点击 5.对对象实现按键操作,在处理一些下拉对象时需要用到. 6.当元素定位十分困难的时候,需 ...
- HTTP协议、HTTP请求方法、常见状态码、HTTP消息
HTTP协议 客户端请求,服务端响应.浏览器与服务器不建立持久连接,响应后连接失效. HTTP请求方法 一.GET GET方法用于获取请求页面的指定信息. 二.HEAD 除了服务器不能在响应里返回消息 ...