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 ...
随机推荐
- [Hive_4] Hive 插入数据
0. 说明 Hive 插入数据的方法 && Hive 插入数据的顺序 && 插入复杂数据的方法 && load 命令详解 1. Hive 插入数据的方法 ...
- Linux:固定 ip
默认情况下,安装完操作系统时,ip是采用dhcp来动态分配的.通常我们需要将其固定下来. 不然 每次系统重启后,ip都会变动,这样会给日常工作带来不必要的麻烦的. 下面就是在rhel .centos ...
- ctf学习(web题二)
web 下面是做bugku上一些web的总结 内容链接
- P2066 机器分配 DP
题目描述 总公司拥有高效设备M台,准备分给下属的N个分公司.各分公司若获得这些设备,可以为国家提供一定的盈利.问:如何分配这M台设备才能使国家得到的盈利最大?求出最大盈利值.其中M≤15,N≤10.分 ...
- Linux中的零拷贝技术
转载:https://www.jianshu.com/p/fad3339e3448 引文## 在写一个服务端程序时(Web Server或者文件服务器),文件下载是一个基本功能.这时候服务端的任务是: ...
- nosql:文件存储和sql数据库存储形式之外的存储系统都是nosql
为了设计一个比较好的磁盘缓存,我调查了大量的开源库,包括 TMDiskCache.PINDiskCache.SDWebImage.FastImageCache 等,也调查了一些闭源的实现,包括 NSU ...
- Spring Kafka整合Spring Boot创建生产者客户端案例
每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code 创建一个kafka-producer-master的maven工程.整个项目结构如下: ...
- 【转】联普多WAN口路由器是否可以设置叠加带宽
TP-link联普是全球领先的通讯供应厂商之一,那么你是否知道联普多WAN口路由器可以设置叠加带宽吗?下面是学习啦小编整理的一些关于联普多WAN口路由器是否可以设置叠加带宽的相关资料,供你参考. 联普 ...
- 【window】window10永久关闭更新
在使用pc过程中自己遇到的问题 相关资料:http://www.ghost580.com/win10/2016-10-21/17295.html 作者:smile.轉角 QQ:493177502
- 6.oop-类和对象
一.如何抽象对象1.创建一个类2.给该描述属性 属性就是java中所有的数据类型3.给该类定义行为方法 方法的签名是:public void 方法名(){方法体} 公共的 无返回类型 二.如何使用类和 ...