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 文件上传,下载,删除的更多相关文章

  1. SpringMVC ajax技术无刷新文件上传下载删除示例

    参考 Spring MVC中上传文件实例 SpringMVC结合ajaxfileupload.js实现ajax无刷新文件上传 Spring MVC 文件上传下载 (FileOperateUtil.ja ...

  2. Struts2 文件上传,下载,删除

    本文介绍了: 1.基于表单的文件上传 2.Struts 2 的文件下载 3.Struts2.文件上传 4.使用FileInputStream FileOutputStream文件流来上传 5.使用Fi ...

  3. java操作FTP,实现文件上传下载删除操作

    上传文件到FTP服务器: /** * Description: 向FTP服务器上传文件 * @param url FTP服务器hostname * @param port FTP服务器端口,如果默认端 ...

  4. [java]文件上传下载删除与图片预览

    图片预览 @GetMapping("/image") @ResponseBody public Result image(@RequestParam("imageName ...

  5. Java 客户端操作 FastDFS 实现文件上传下载替换删除

    FastDFS 的作者余庆先生已经为我们开发好了 Java 对应的 SDK.这里需要解释一下:作者余庆并没有及时更新最新的 Java SDK 至 Maven 中央仓库,目前中央仓库最新版仍旧是 1.2 ...

  6. 艺萌TCP文件上传下载及自动更新系统介绍(TCP文件传输)(一)

    艺萌TCP文件上传下载及自动更新系统介绍(TCP文件传输) 该系统基于开源的networkComms通讯框架,此通讯框架以前是收费的,目前已经免费并开元,作者是英国的,开发时间5年多,框架很稳定. 项 ...

  7. 【FTP】FTP文件上传下载-支持断点续传

    Jar包:apache的commons-net包: 支持断点续传 支持进度监控(有时出不来,搞不清原因) 相关知识点 编码格式: UTF-8等; 文件类型: 包括[BINARY_FILE_TYPE(常 ...

  8. FastDFS实现文件上传下载实战

    正好,淘淘商城讲这一块的时候,我又想起来当时老徐让我写过一个关于实现FastDFS实现文件上传下载的使用文档,当时结合我们的ITOO的视频系统和毕业论文系统,整理了一下,有根据网上查到的知识,总结了一 ...

  9. JavaWeb实现文件上传下载功能实例解析

    转:http://www.cnblogs.com/xdp-gacl/p/4200090.html JavaWeb实现文件上传下载功能实例解析 在Web应用系统开发中,文件上传和下载功能是非常常用的功能 ...

  10. java web 文件上传下载

    文件上传下载案例: 首先是此案例工程的目录结构:

随机推荐

  1. Javascript高级编程学习笔记(27)—— BOM(1)window对象1

    ECMAScript是JS的核心 但是对于在浏览器中运行的JS,BOM显然才是真正的核心 我们知道JS是由三个部分组成的 BOM.DOM.ECMAScript 之前的文章我们主要介绍的是ECMAScr ...

  2. JS 实现触发下载内容(H5 download)

    概述 我对使用js控制下载非常感兴趣,在网上查资料的时候碰巧看到了相关实现方法,记录下来供以后开发时参考,相信对其他人也有用. 参考资料: JS前端创建html或json文件并浏览器导出下载 理解DO ...

  3. Python的基础语法(一)

    0. 前言 最近正在重新整理Python的基础知识,以便更好地学习新知识.这一部分主要是讲述Python基础语法的演示.下面的语法都是基于Python3的语法. 1. 注释 注释:Python的注释方 ...

  4. GITHUB(github)初级使用

    Github顾名思义是一个Git版本库的托管服务,是目前全球最大的软件仓库,拥有上百万的开发者用户,也是软件开发和寻找资源的最佳途径,Github不仅可以托管各种Git版本仓库,还拥有了更美观的Web ...

  5. Ubuntu 16.04 下octave的使用入门

    SciLab和octave是开源的且免费的矩阵计算工具,二者都有希望成为矩阵计算的新宠.相比之下, octave与MatLab的兼容性更高. octave遵循GPL协议(GNU General Pub ...

  6. .net core dump分析

    服务器上如果出现cpu内存饱满,找不到原因,那么dump文件分析必不可少. 起初是想在linux下调试.net core 的dump,但是环境一直无法安装 搞了许久没搞出来,其次文章太少了,googl ...

  7. 9102年了,汇总下HttpClient问题,封印一个

    如果找的是core的HttpClientFactory 出门右转. 官方写法,高并发下,TCP连接不能快速释放,导致端口占完,无法连接 Dispose 不是马上关闭tcp连接 主动关闭的一方为什么不能 ...

  8. Apace、Ngnix、Tomcat三者关系

    Apache,指的应该是Apache软件基金会下的一个项目--Apache HTTP Server Project:Nginx同样也是一款开源的HTTP服务器软件(当然它也可以作为邮件代理服务器.通用 ...

  9. NET Core 1.1中使用Jwt

    NET Core里Jwt的生成倒是不麻烦,就是要踩完坑才知道正确的生成姿势…… Jwt的结构 jwt的结构是{Header}.{Playload}.{Signature}三截.其中Header和Pla ...

  10. java各种集合的线程安全

    微信公众号[程序员江湖] 作者黄小斜,斜杠青年,某985硕士,阿里 Java 研发工程师,于 2018 年秋招拿到 BAT 头条.网易.滴滴等 8 个大厂 offer,目前致力于分享这几年的学习经验. ...