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 ...
随机推荐
- centos下安装memcached
1. 通过yum安装 yum -y install memcached #安装完成后执行: memcached –h 2. Memcached 运行 //查看考号修改配置 vim /etc/s ...
- Docker 入门到实践(三)Docker 安装
注意:不要在没有配置 Docker APT 源的情况下直接使用 apt 命令安装 Docker. 一.准备工作 系统要求 Docker CE 支持一下版本的 Ubuntu 操作系统 Cosmic 18 ...
- February 14th, 2018 Week 7th Wednesday
Love does not dominate, it culitvates. 爱不是羁绊,而是成就. Love should not wipe out everything you are, love ...
- creo2.0安装方法和图文详解教程
Creo2.0是由PTC公司2012年8月底推出的全新CAD设计软件包,整合了PTC公司的三个软件Pro/Engineer的参数化技术.CoCreate的直接建模技术和ProductView的三维可视 ...
- 【Linux基础】Linux常用命令汇总
3-1文件目录操作命令(cd pwd mkdir rmdir rm) 绝对路径:由根目录(/)开始写起的文件名或目录名称, 例如 /home/dmtsai/.bashrc: 相对路径:相对于目前路径的 ...
- SQL IN 操作符
IN 操作符 IN 操作符允许我们在 WHERE 子句中规定多个值. SQL IN 语法 SELECT column_name(s) FROM table_name WHERE column_name ...
- UVA1347-Tour(动态规划基础)
Problem UVA1347-Tour Accept: 667 Submit: 3866Time Limit: 3000 mSec Problem Description John Doe, a ...
- [SDOi2012]吊灯
嘟嘟嘟 这题想了半天,搞出了一个\(O(10 * d * n)\)(\(d\)为\(n\)的约数个数)的贪心算法,就是能在子树内匹配就在子树内匹配,否则把没匹配的都交给父亲,看父亲能否匹配.交上去开了 ...
- springcloud 服务注册、反注册 AOP 拦截,实现自定义功能
@Aspect@Component@Order(1000)public class EurekaServerAspect {private Logger logger = Logger.getLogg ...
- ubuntu查看安装的pytorch/cuda版本
使用命令: user@home:~$ python Python |Anaconda custom (-bit)| ( , ::) [GCC ] on linux Type "help&qu ...