file 文件上传,下载,删除
html:
<div class="col-md-4 col-sm-4">
<div class="portlet light bordered">
<div class="portlet-title">
<div class="caption">合同附件</div>
<div class="addcaption">
添加附件
<input type="file" onchange="new_preview(this)">
</div>
</div>
<div class="portlet-body light">
<table class="table table-hover table-bordered" id="filesTable">
<thead>
<tr>
<th>文件名</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
js:
上传----
var files = [];
function new_preview(file){
var fileObj = file.files[0];
var formData = new FormData();
formData.append('file', fileObj);
formData.append('contractNo', file_contractNo);
var options = {
url: webroot + "/ht/uploadAndSaveFile",
type: 'POST',
data: formData,
processData: false,
contentType: false,
success: function(rsp) {
console.log(rsp);
var innerHtml = '<tr><td>' + rsp.result.fileName + '</td>' +
'<td>'+
'<button class="btn green" data-uri="' + rsp.uri + '" onclick="downloadFiles(this)">'+
'<i class="fa fa-download"></i>'+
'</button>'+
// '<button class="btn red" data-uri="' + rsp.uri + '" onclick="new_removeFile(this)">'+
// '<i class="fa fa-trash"></i>'+
// '</button>'+
'</td>'+
'</tr>';
$("#filesTable tbody").append(innerHtml);
files.push(rsp);
},
error: function(e) {
hint("网络错误!");
}
};
$.ajax(options);
};
下载--------
function new_downloadFiles(id) {
if (typeof(downloadFiles.iframe) == "undefined") {
var iframe = document.createElement("iframe");
downloadFiles.iframe = iframe;
document.body.appendChild(downloadFiles.iframe);
}
downloadFiles.iframe.src = webroot + "/ht/download?id=" + id;
downloadFiles.iframe.style.display = "none";
};
删除-------(未提供接口,只做html删除和数组删除)
function new_removeFile(e) {
var _uri = $(e).attr("data-uri");
for (var n = 0; n < files.length; n++) {
if (files[n].uri == _uri) {
files.splice(n, 1);
}
}
$(e).parent().parent().remove();
}
(获取附件的列表)
for (var m = 0; m < data.files.length; m++) {
files_Html += '<tr><td>' + data.files[m].fileName + '</td>' +
'<td>'+
'<button class="btn green" onclick="new_downloadFiles(' + "'" + data.files[m].id + "'" + ')">'+
'<i class="fa fa-download"></i>'+
// '<button class="btn red" onclick="new_removeFile(' + "'" + data.files[m].id + "'" + ')">'+
// '<i class="fa fa-trash"></i>'+
'</td></tr>';
}
$("#filesTable tbody").append(files_Html);
file 文件上传,下载,删除的更多相关文章
- SpringMVC ajax技术无刷新文件上传下载删除示例
参考 Spring MVC中上传文件实例 SpringMVC结合ajaxfileupload.js实现ajax无刷新文件上传 Spring MVC 文件上传下载 (FileOperateUtil.ja ...
- Struts2 文件上传,下载,删除
本文介绍了: 1.基于表单的文件上传 2.Struts 2 的文件下载 3.Struts2.文件上传 4.使用FileInputStream FileOutputStream文件流来上传 5.使用Fi ...
- java操作FTP,实现文件上传下载删除操作
上传文件到FTP服务器: /** * Description: 向FTP服务器上传文件 * @param url FTP服务器hostname * @param port FTP服务器端口,如果默认端 ...
- [java]文件上传下载删除与图片预览
图片预览 @GetMapping("/image") @ResponseBody public Result image(@RequestParam("imageName ...
- Java 客户端操作 FastDFS 实现文件上传下载替换删除
FastDFS 的作者余庆先生已经为我们开发好了 Java 对应的 SDK.这里需要解释一下:作者余庆并没有及时更新最新的 Java SDK 至 Maven 中央仓库,目前中央仓库最新版仍旧是 1.2 ...
- 艺萌TCP文件上传下载及自动更新系统介绍(TCP文件传输)(一)
艺萌TCP文件上传下载及自动更新系统介绍(TCP文件传输) 该系统基于开源的networkComms通讯框架,此通讯框架以前是收费的,目前已经免费并开元,作者是英国的,开发时间5年多,框架很稳定. 项 ...
- 【FTP】FTP文件上传下载-支持断点续传
Jar包:apache的commons-net包: 支持断点续传 支持进度监控(有时出不来,搞不清原因) 相关知识点 编码格式: UTF-8等; 文件类型: 包括[BINARY_FILE_TYPE(常 ...
- FastDFS实现文件上传下载实战
正好,淘淘商城讲这一块的时候,我又想起来当时老徐让我写过一个关于实现FastDFS实现文件上传下载的使用文档,当时结合我们的ITOO的视频系统和毕业论文系统,整理了一下,有根据网上查到的知识,总结了一 ...
- JavaWeb实现文件上传下载功能实例解析
转:http://www.cnblogs.com/xdp-gacl/p/4200090.html JavaWeb实现文件上传下载功能实例解析 在Web应用系统开发中,文件上传和下载功能是非常常用的功能 ...
- java web 文件上传下载
文件上传下载案例: 首先是此案例工程的目录结构:
随机推荐
- 关于Python打开IDLE出现错误的解决办法
安装好python,打开IDLE出现以下错误: 解决办法: 修改[Python目录]\Lib\idlelib\PyShell.py文件,在1300行附近,将def main():函数下面use_sub ...
- ActiveMQ 的安装与使用
消息中间件简介 消息中间件(MOM:Message Orient middleware) 消息中间件有很多的用途和优点: 1. 将数据从一个应用程序传送到另一个应用程序,或者从软件的一个模块传送到另外 ...
- hbase概念解析
hbase是一种nosql数据库.是一个高可靠,高性能,面向列,可伸缩,实时读取的分布式数据库. hbase一般由行键,时间戳,列族,列,表格单元,行组成. 行一般由一个行键和一个或多个具有关联关系值 ...
- Event Loop浅谈
event loop 即事件循环.最初了解到js的event loop机制是通过自己对js中异步.同步的疑惑.今天聊一聊自己的理解,希望和大家一起学习. 首先,让我们看一个经典的setTimeOut的 ...
- python元组和字典的简单学习
元组(tuple) 用圆括号()标识,定义元组后,元组元素不可修改.如果想修改元组只能重新定义元组. 因为元组不可更改,所以也没有增删改等用法,主要语法就是访问元组元素,遍历元组. 访问元组元素: t ...
- ionic hidden scroll bar
ionic 项目中隐藏所有的ion-content滚动条 在variables.scss文件中添加以下代码 ::-webkit-scrollbar { display: none; }
- Elastic Job学习
从执行的结果来看,随着服务器的增加,分片的结果也不一样 当只有一台服务器的时候,所有分片都到这一台服务器上 当服务器增加到两台的时候,分片的结果是0 1 2 3 4和5 6 7 8 9 当服务器增加到 ...
- Jenkins技巧:如何更新Jenkins到最新版本
----------------------------------------------------------------- 原创博文,未经作者允许禁止转载. 博主:疲惫的豆豆 链接:http: ...
- netty源码解解析(4.0)-14 Channel NIO实现:读取数据
本章分析Nio Channel的数据读取功能的实现. Channel读取数据需要Channel和ChannelHandler配合使用,netty设计数据读取功能包括三个要素:Channel, Eve ...
- tiny210 tslib 测试(基于 ft5x06 触摸屏),解决触摸无效问题
1. 拷贝至开发板 将上次实验中的 tmp 文件夹拷贝到开发板,可以通过 nfs 来传输,并将 tmp/lib 下的所有 .so 文件拷贝至 开发板的 /usr/lib 中,并且确保库的映射关系正确. ...