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 ...
随机推荐
- Python中关于with open file as 的用法
最近用到python来处理文本文件了,然后需要处理文件.发现python中提供的with open as 这个还是用的不错的!好的,废话不多说了,看下例子: with open('./sig ...
- ASP.NET -- WebForm -- 页面生命周期
ASP.NET -- WebForm -- 页面生命周期 ASP.NET 页运行时,此页将经历一个生命周期,在生命周期中将执行一系列处理步骤.这些步骤包括初始化.实例化控件.还原和维护状态.运行事件 ...
- Unity Shader 基础(4) 由深度纹理重建坐标
在PostImage中经常会用到物体本身的位置信息,但是Image Effect自身是不包含这些信息的,因为屏幕后处其实是使用特定的材质渲染一个刚好填满屏幕的四边形面片(四个角对应近剪裁面的四个角). ...
- detail
<!DOCTYPE html> <html> <head> <title>details</title> <style type=&q ...
- mumu安卓模拟器使用教程
安装教程: 1http://mumu.163.com/ 在这网址里面下载 2.安装 我的是mac 安装时需要输入你的你电脑密码 但是也报错,你点击旁边的提示就会告诉去安全与隐私里点击允许就好了 很 ...
- Linux中的零拷贝技术
转载:https://www.jianshu.com/p/fad3339e3448 引文## 在写一个服务端程序时(Web Server或者文件服务器),文件下载是一个基本功能.这时候服务端的任务是: ...
- Linux系统下为何病毒少?原因竟是这个?
Linux系统下为何病毒少?原因竟是这个? 可能不少人持这样一种观点,认为 Linux 病毒少是因为Linux不像Windows那么普及,其实这种观点很早已经被人批驳过了,一个最有力的论据是:如果写病 ...
- SQLite的文件锁、并发与pager---(SQLite学习手册(锁和并发控制))
一.概述: 在SQLite中,锁和并发控制机制都是由pager_module模块负责处理的,如ACID(Atomic, Consistent, Isolated, and Durable).在含有数据 ...
- centos7下安装docker(15.1跨主机网络)
之前学习了单个host上的网络,我们知道单个host上的网络有:none,host,bridge和joined,他们解决了单个host上面的容器通信的问题:接下来我们讨论跨主机间容器通信的方案 跨主机 ...
- Oracle调整顾问(SQL Tuning Advisor 与 SQL Access Advisor
在Oracle数据库出现性能问题时,使用Oracle本身的工具包,给出合理的调优建议是比较省力的做法. tuning advisor 是对输入的sql set的执行计划进行优化accsee advis ...