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 ...
随机推荐
- 一、Selenium 工作原理
1.Selenium介绍 Selenium是用于测试Web应用程序用户界面UI的常用框架.端对端的功能测试.并且在一个多个浏览器中操作. 目前Seienium 组件主要包括Selenium IDE ...
- June. 21 2018, Week 25th. Thursday
Summertime is always the best of what might be. 万物最美的一面,总在夏季展现. From Charles Bowden. It was June, an ...
- [福大软工] Z班——个人技术博客评分
个人技术博客 作业地址 https://edu.cnblogs.com/campus/fzu/SoftwareEngineering2015/homework/1070 作业要求 个人技术博客单次作业 ...
- 【转】vue父子组件之间的通信
vue父子组件之间的通信 在vue组件通信中其中最常见通信方式就是父子组件之中的通性,而父子组件的设定方式在不同情况下又各有不同.最常见的就是父组件为控制组件子组件为视图组件.父组件传递数据给子组件使 ...
- 从n个数里面选择m个数
从n个数里面选择m个数 #include<iostream> #include<vector> using namespace std; vector<int> s ...
- node基础—概述与安装
什么是Nodejs 简单的说 Node.js 就是运行在服务端的 JavaScrip(编写高性能网络服务器的JavaScript工具包(用js开发服务端程序))t. JS是脚本语言,脚本语言都需要一个 ...
- C#、Java中的一些小知识点总结(持续更新......)
前言:在项目中,有时候一些小的知识,总是容易让人忽略,但是这些功能加在项目中往往十分的有用,因此笔者在这里总结项目中遇到的一些实用的小知识点,以备用,并持续更新...... 1.禁用DataGridV ...
- Mariadb Redis 的配置使用
Mariadb Mysql 的配置使用 CentOS 7 Mariadb 的学习 在linux上安装软件的方式 yum安装 在线搜索rpm格式的软件包,进行自动的依赖关系处理,下载,安装 (阿里云 ...
- 从 0 → 1,学习Linux该这么开始!
首先我们还是来普及以下概念,讲点虚的.现在是图形系统的天下,windows我们用了20多年.成功归功与它图形界面,你会点鼠标吗你会敲键盘吗?所以你会上网会聊天会玩游戏了.那么,0基础接触的Linux, ...
- PHP程序员的能力水平层次
PHP程序员的能力水平层次 之前看过很多篇关于服务端工程师和PHP开发者的能力模型介绍,每篇都对能力有侧重点. 下面我们来详细谈谈以开发能力为基准点的PHP程序员的能力水平层次. 层层递进 1.功能开 ...